Странное смещение с Watir/Capybara и PhantomJS

Я хочу определить расположение элементов на странице с помощью Watir и PhantomJS. Мой второй подход с использованием Capybara привел к такому же смещению.

В то время как элементы на левой стороне выглядят хорошо, правая сторона смещена:

введите здесь описание изображения Я сделал снимок экрана до и после того, как захватил позиции для каждого элемента с помощью element.wd.location, но смещение всегда одинаково. Я использовал evaluate_script и .getBoundingClientRect() с Capybara.

Одна вещь кажется мне подозрительной: поле ввода поиска загружается неправильно и показывает не только смещение, но и другой размер, а увеличительное стекло не отображается. Я не знаю, вызывает ли это смещение.

Я протестировал его с чистым 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, вы увидите изображение справа (слева: 952 пикселя, вверху: 259 пикселей), но оно отображается в test.txt. сдвинут влево (слева: 891px).

Вы знаете, что может вызвать эту проблему?


person Railsana    schedule 20.07.2017    source источник
comment
Смещенное содержимое выравнивается по правому краю, поэтому зазор, вероятно, связан с тем, как PhantomJS делает снимок экрана. Я предполагаю, что сначала он изменяет размер области просмотра до размера страницы, чтобы получить полный снимок экрана. Но при этом полоса прокрутки исчезает, оставляя больше места для содержимого.   -  person Florent B.    schedule 21.07.2017


Ответы (2)


Знаете ли вы, что могло вызвать это смещение?

Ошибка в PhantomJS v2.1.1 или во встроенном Qt WebEngine.

Есть ли обходной путь?

No.

Но я все равно хочу, чтобы это работало, как?

Почините сами или наймите кого-нибудь, чтобы починить, или подождите, пока починят.

Обратите внимание, что проблема больше не возникает в версии 2.5, но все еще находится в бета-версии:

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

Вот скриншот, сделанный с помощью phantomjs-2.5.0-beta:

введите здесь описание изображения

person Florent B.    schedule 24.07.2017
comment
PhantomJS 2.5.beta для меня лучшее решение. - person Railsana; 24.07.2017

Похоже, это проблема в 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).

person Maxime    schedule 23.07.2017
comment
Я добавил стили, но получил тот же результат. - person Railsana; 24.07.2017