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

【问题标题】：Difference in rendered SVG fetched from FirefoxDriver and HtmlUnitDriver从 FirefoxDriver 和 HtmlUnitDriver 获取的渲染 SVG 的差异
【发布时间】：2015-10-17 16:43:04
【问题描述】：

我正在使用 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 中已经有一个叫做 getSVG 的方法可以使用
您是否尝试禁用所有动画？另外，FirefoxDriver 是否支持 SVG？而且，你有什么错误吗？您是否尝试过非常简单的图表？像这样：$("#JSGraphContainer").highcharts({ series: [{ data: [10, 20] }] });.
如何禁用所有动画？你在考虑css3方法吗？ FirefoxDriver 确实支持 SVG 并提供在浏览器 (ff) 上呈现的相同内容 (svg)。因为在 HtmlUnitDriver 无头时，我什么都看不到，也没有任何错误。只是当 svg 打印在任何其他浏览器上再次呈现时（通过将其包含在 html 标签中）然后它显示只有 Highcharts.com 水印的空白画布。

标签： javascript svg selenium-webdriver highcharts

【解决方案1】：

highcharts 中已经有一个名为 getSVG 的方法可以使用。

 svg = chart.getSVG()
       .replace(/</g, '\n&lt;')  
       .replace(/>/g, '&gt;');

http://jsfiddle.net/Nishith/g10j2ymc/

【讨论】：

那么 SVG 输出的差异问题仍然存在。在 firefox 上运行脚本提供的 SVG 内容与使用 HtmlUnitDriver 生成的内容不同。