从FirefoxDriver和HtmlUnitDriver获取的渲染SVG的差异

Difference in rendered SVG fetched from FirefoxDriver and HtmlUnitDriver

本文关键字:SVG HtmlUnitDriver 获取 FirefoxDriver      更新时间:2023-09-26

我正在使用JQuery 1.8和Highcharts 4.1.9在HTML文件中使用以下代码创建highchart图表。

<div id="JSGraphContainer" class="GraphContainerJS" "></div>
<script>
        $(function() {
                    var line;
                    var plotList= [];
                    data = {"vals": [['1244246400000', 11],
                                      ['1244332800000', 22],
                                      ['1244419200000', 11],
                                      ['1244505600000', 22],
                                      ['1244592000000', 33],
                                      ['1244678400000', 11],
                                      ['1244764800000', 22]
                                    ]};
                    $("#JSGraphContainer").highcharts({
                        chart: {
                            type: 'line',
                            zoomType: "x",
                            plotBorderWidth: 1,
                            plotBorderColor: 'black',
                        },
                        title: {text: null},
                        xAxis: {
                            crosshair: true,
                            type: 'datetime',
                            opposite: true,
                            tickmarkPlacement: "on",
                            gridLineDashStyle: "Dash",
                            gridLineWidth: 1,
                            tickWidth : 0,
                            plotLines: plotList,
                        },
                        yAxis: {
                            title: { text: null },
                            tickAmount: 5,
                            gridLineDashStyle: "Dash",
                            opposite: false
                        },
                        series: [{  data: data.vals  }],
                        plotOptions: {
                            series: {
                                marker: {
                                    enabled: true
                                }
                            }
                        },
                        legend: {enabled : false},
                        tooltip: {
                            formatterdd: function() {
                                return ((new Date(this.x)).toDateString()) + ", " + this.y;
                            },
                            pointFormat: '<span style="color:{point.color}">'u25CF</span><b>{point.y}</b><br/>',
                            crosshairs: {
                                color: 'green',
                                dashStyle: 'solid'
                            }
                        }
                    });
                }); 
              </script>

我的测试代码,这意味着提取生成的SVG出来比较的目的是

WebElement elem = driver.findElement(By.className("GraphContainerJS"));
String contents = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].innerHTML;", elem);
System.out.println(contents);

当我使用FirefoxDriver,然后我得到正确的SVG打印出来的sysout,但当我使用JavaScript启用HTMLUnitDriver,然后我得到不同的SVG输出不匹配firefox,不渲染任何东西时复制到html文件。我尝试使用firefox的功能

new HtmlLUnitDriver(DesiredCapabilities.firefox());

但它没有帮助。我希望必须有一种方法来配置HtmlUnitDriver,如果有的话,以获得正确的输出。

感谢任何提示。

在highcharts中已经有一个叫做getvg的方法可以使用。

 svg = chart.getSVG()
       .replace(/</g, ''n&lt;')  
       .replace(/>/g, '&gt;');
http://jsfiddle.net/Nishith/g10j2ymc/