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 显示它向左移动（左：891px）。

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

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拍摄的截图：

Answer 2

这似乎是issue in PhantomJS。

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

我也在运行它。我的修复是在评估块中的页面上运行以下命令以强制PhantomJS在正确的高度视口处渲染。它适用于我的用例，虽然我想在2.2中看到它，因为它仍然是一个问题，我以为我会在这里发布。

    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报道）。

与Watir / Capybara和PhantomJS的奇怪抵消

2 个答案: