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

Question

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

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

Answer 1

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" где слово "дно" соответствует моему сообщению console.log.

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

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