При вёрстке сложных проектов часто бывают регрессии. Здесь что-то добавили или поменяли, а в другом месте что-то "поплыло". Чтобы выявить такие регрессии используется регрессионное тестирование. Один из таких инструментов - 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 то в отчете увидим, что тесты пройдены:

Если что-то сломается, то тесты не пройдут и нужно будет разбираться.

Там же, в backstop.json нужно прописать все необходимые разрешения экранов, которые надо тестировать.

Более подробную информацию об этом инструменте можно найти в официальной документации и в многочисленных блогах.