selenium - Watir/Capybara 和 PhantomJS 的奇怪偏移

Question

我想使用 Watir 和 PhantomJS 检测页面上元素的位置。 我使用 Capybara 的第二种方法产生了相同的偏移量。

虽然左侧的元素看起来不错，但右侧未对齐:

我在使用 element.wd.location 获取每个元素的位置之前和之后制作了屏幕截图，但偏移量始终相同。我对 capybara 使用了 evaluate_script 和 .getBoundingClientRect()。

有一件事在我看来很可疑:搜索输入字段未正确加载，不仅显示未对齐，而且大小不同，并且未显示放大镜。我不知道这是否会导致偏移。

我用纯 PhantomJS 2.1.1 (phantomjs file.js) 测试了它:

var fs = require('fs');
var page = require('webpage').create();

page.viewportSize = {
  width: 1024,
  height: 768
};

page.open('http://en.wikipedia.org/', function() {
  var positions = page.evaluate(function() {
    positions = [];
    elements = document.getElementsByTagName('IMG');
    for (var i=0, l=elements.length; i<l; i++) {
      pos = elements[i].getBoundingClientRect();
      positions.push(pos.left + ' ' + pos.top);
    };
    return positions;
  });

  fs.write('test.txt', positions.join("\r\n"), 'w');

  page.render('test.png');
  phantom.exit();
});

同样的结果:如果你打开 test.png，你会看到右边的图像(左边:952px，顶部:259px)，但是 test.txt 显示它向左移动(左:891 像素)。

你知道什么会导致这个问题吗？

Answer 1

你知道什么会导致这种偏移吗？

PhantomJS v2.1.1 或嵌入式 Qt WebEngine 中的错误。

有什么解决方法吗？

没有。

但我还是希望它能正常工作，怎么办？

自己修理或雇人修理或等待修理。

请注意，该问题不再出现在 2.5 版中，但仍处于测试阶段:

https://github.com/ariya/phantomjs/milestone/16
https://bitbucket.org/ariya/phantomjs/downloads/

这是使用 phantomjs-2.5.0-beta 截取的屏幕截图: