Watir/Capybara 和 PhantomJS 的奇怪偏移

Question

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

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

我在用 element.wd.location 抓取每个元素的位置之前和之后制作了屏幕截图，但偏移量始终相同。我对水豚使用了 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 显示它向左移动（左：891px）。

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

Answer 1

这似乎是 issue in PhantomJS。

在问题的 GitHub 线程上，@dantarion 似乎找到了解决方案：

I am running this as well. My fix is to run the following on the page in an evaluate block to force PhantomJS to render at the right height viewport. It works for my use case, and while I want to see it fixed in 2.2, since its still an issue I thought I'd post here.

    document.getElementsByTagName("body")[0].style.overflow = "hidden";
    document.getElementsByTagName("body")[0].style.height = "1080px";
    document.getElementsByTagName("body")[0].style.maxHeight = "1080px";
    document.getElementsByTagName("html")[0].style.overflow = "hidden";
    document.getElementsByTagName("html")[0].style.height = "1080px";
    document.getElementsByTagName("html")[0].style.maxHeight = "1080px";

看来解决问题了。唯一的问题是 background-size: cover 可能仍然关闭（据@Luke-SF 报道）。

Answer 2

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

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 截取的屏幕截图：

Watir/Capybara 和 PhantomJS 的奇怪偏移

Strange offset with Watir/Capybara and PhantomJS

selenium

watir

watir-webdriver

phantomjs

selenium-webdriver