Изменение размера кукловода перед скриншотом вызывает нестабильные визуальные тесты различий - PullRequest
Новая
       43

Изменение размера кукловода перед скриншотом вызывает нестабильные визуальные тесты различий

0 голосов
/ 25 января 2019

Я использую BackstopJS для визуального регрессионного тестирования.Backstop использует Puppeteer в качестве тестового движка.Некоторые скриншоты не совместимы, потому что размер области просмотра изменяется, когда Puppeteer делает скриншот.Мое приложение имеет анимацию при изменении размера области просмотра.Есть ли способ обойти это?

Я попытался увеличить размер окна и области просмотра, чтобы элементы не были за кадром, и Puppeteer не нужно изменять размер окна.Я также попытался установить высоту прокрутки в окне на 0 для x и y.

1 Ответ

0 голосов
/ 18 июня 2019

Backstop.js имеет опции readyEvent и delay, которые можно установить для устранения несоответствий в CSS-анимации. Их можно использовать отдельно или в комбинации, чтобы убедиться, что анимация успела закончиться до того, как backstop.js сделает свои снимки экрана.

У Дэвида Уолша есть отличное сообщение в блоге о том, как использовать readyEvent для запуска backstop.js. Его пример основан на приложении Angular, но принцип тот же.

Он в основном записывает сообщение на консоль после завершения анимации. Backstop.js ждет, пока не увидит сообщение в консоли, прежде чем он запустится.

В моем случае у меня были элементы, которые скользили по бокам, когда пользователь прокручивал страницу вниз. Поэтому я написал немного javascript, чтобы определить, когда пользователь (или движок рендеринга backstop.js) прокручивается до нижней части экрана. 

$(window).scroll(function() {
    if($(window).scrollTop() + $(window).height() == $(document).height()) {
        console.log("bottom");
    }
 });

Как только нижняя часть экрана была достигнута, я использовал console.log("bottom"), чтобы сообщить backstop.js, что он может продолжаться. Так что в моем файле backstop.json мой сценарий readyEvent выглядел как "readyEvent": "bottom", где слово «bottom» соответствовало моему сообщению console.log.

Примечание: вы можете заставить ваше сообщение console.log говорить что угодно (Дэвид использует "backstop.ready"), если сообщение соответствует значению readyEvent в разделе сценариев backstop.json.

Если вы столкнулись с проблемами, связанными с истечением времени ожидания вашего терминала при выполнении ваших тестов, попробуйте установить значение readyEvent обратно в пустую строку, чтобы увидеть, не вызывает ли readyEvent проблему. Если это так, прочитайте эту проблему на github.

...