При вёрстке сложных проектов часто бывают регрессии. Здесь что-то добавили или поменяли, а в другом месте что-то "поплыло". Чтобы выявить такие регрессии используется регрессионное тестирование. Один из таких инструментов - BackstopJS
Для запуска я использую docker. Для удобства добавляем в наш .bashrc алиас:
alias backstopjs='docker run --rm -v $(pwd):/src backstopjs/backstopjs "$@"'
Примечание: несмотря на то, что уже есть версия 6.1.0, при запуске у меня всё равно скачивается версия 5.3. Чтобы указать версию backstopjs нужно дописать её к имени контейнера
alias backstopjs='docker run --rm -v $(pwd):/src backstopjs/backstopjs:6.1.0 "$@"'
Инициализируем конфигурацию по умолчанию:
backstopjs init
В файл backstop.json нужно вписать URL вашего сайта. backstop из докера не увидел мой локальный сайт, поэтому я тестировал копию сайта с dev-сервера.
Запускаем backstopjs test
В папке backstop_data/bitmaps_test/ должна будет создаться папка со скриншотами сайта.
Запускаем backstopjs approve
чтобы считать эти скриншоты эталонными.
Если ничего не менять и снова запустить backstopjs test
то в отчете увидим, что тесты пройдены:
report | Test completed...
report | 2 Passed
report | 0 Failed
Если что-то сломается, то тесты не пройдут и нужно будет разбираться.
Там же, в backstop.json нужно прописать все необходимые разрешения экранов, которые надо тестировать.
Более подробную информацию об этом инструменте можно найти в официальной документации и в многочисленных блогах.
Комментарии
Отличная тулза можно быстро проверить не полетела ли верстка сразу на всем сайте