BackstopJS: тестирование вёрстки через скриншоты

При вёрстке сложных проектов часто бывают регрессии. Здесь что-то добавили или поменяли, а в другом месте что-то "поплыло". Чтобы выявить такие регрессии используется регрессионное тестирование. Один из таких инструментов - BackstopJS

Для запуска я использую docker. Для удобства добавляем в наш .bashrc алиас:

alias backstopjs='docker run --rm -v $(pwd):/src backstopjs/backstopjs "$@"'

Инициализируем конфигурацию по умолчанию:

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 нужно прописать все необходимые разрешения экранов, которые надо тестировать.

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

Автор

ivnish Drupal FullStack Developer, модератор drupal.ru