Search code examples
seleniumselenium-webdriverphantomjswatirwatir-webdriver

Strange offset with Watir/Capybara and PhantomJS

I want to detect the location of elements on a page using Watir and PhantomJS. My second approach using Capybara resulted in the same offset.

While the elements on the left side look good, the right side is misaligned:

enter image description here I made the screenshot before and after I grab the positions for each element with element.wd.location, but the offset is always the same. I used evaluate_script and .getBoundingClientRect() with Capybara.

One thing looks suspicious to me: The search input field is not loaded correctly and not only shows a misalignment, but also a different size and the magnifying glass isn't shown. I don't know if this causes the offset.

I tested it with pure 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();
});

Same result: If you open the test.png, you see the an image on the right (left: 952px, top: 259px), but the test.txt shows it shifted to the left (left: 891px).

Do you know what could cause this problem?

Solution

  • Do you know what could cause this offset?

    A bug in PhantomJS v2.1.1 or in the embedded Qt WebEngine.

    Is there any workaround ?

    No.

    But I want it to work anyway, how?

    Fix it yourself or hire someone to fix it or wait for it to be fixed.

    Note that the issue no longer occurs in version 2.5, but it is still in beta :

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

    Here's a screenshot taken with phantomjs-2.5.0-beta :

    enter image description here