Highcharts中不一致的SVG元素使Geb/Selenium和PhantomJS的测试失败

Question

难以解释：

我的Geb/Selenium测试正在对Highcharts生成的SVG rect元素width/height进行断言。

测试在Chrome/Windows上本地通过，并在Linux CI环境上通过PhantomJS。不过，当我在Windows本地的PhantomJS上运行它们时，它们会失败。高度似乎有几个像素的偏差——当我在Windows中的PhantomJS上本地运行时，它总是有大约1或2个像素的不同。例如，我断言rect.height=168失败是因为它是166。

我已经确认它在两个环境中都是相同版本的PhantomJS。

我还能错过什么？是什么原因导致Highcharts在Chrome和PhantomJS中生成不同的SVG？

我可以将其与测试框架隔离开来，并直接使用PhantomJS执行：

var webpage = require('webpage');
var page = webpage.create();
page.viewportSize = {width: 1280, height: 1024};
page.open("http://www.highcharts.com/demo/column-basic", function(status) {
    var height = page.evaluate(function() {
      return jQuery('g.highcharts-series rect:nth(0)').attr('height');
    });
    console.log(height);
    phantom.exit(); 
});

此代码在Linux上运行时将打印52，在Windows上运行时打印53。

Answer 1

这取决于要测试的内容，但这可能是适应舍入问题的解决方案。检测底层操作系统，并设置具有每个操作系统dpi校正的配置对象。

var webpage = require('webpage'),
  page = webpage.create(),
  system = require('system'),
  os = system.os,
  correction = {
    mac: 1,
    windows: 1.019
  };
page.viewportSize = {
  width: 1280,
  height: 1024
};
page.open("http://www.highcharts.com/demo/column-basic", function(status) {
  var height = page.evaluate(function() {
    return jQuery('g.highcharts-series rect:nth(0)').attr('height');
  });
  console.log(Math.round(height * correction[os.name]));
  phantom.exit();
});