​​I'm in ur webapps, checking ur screens
#qa #frontend

Продолжаем цикл рассказов о полезных QA-инструментах. Часто бывает, что в рамках проекта нет возможности производить полноценное развертывание автотестов. При этом объемы мануального тестирования регрессии сайта после каждого его обновления только возрастают.

На помощь приходит BackstopJS. Это бесплатный инструмент на Node.js с открытым исходным кодом, служащий для покрытия вашей верстки автотестами визуального регресса (visual regression testing). Пользоваться им с одинаковым успехом могут как QA-инженеры, так и frontend-разработчики.

Для его применения необходимо написать ряд шаблонных и коротких тестов на JavaScript, в которых требуется указать URL-адреса тестируемых страниц и CSS-селекторы для каждого тестируемого элемента.

BackstopJS взаимодействует с браузерами Chrome/Chromium посредством библиотеки Puppeteer. При выполнении тестов создаются снимки каждого указанного элемента. Далее производится сравнение полученных снапшотов текущей и предыдущей итерации тестирования. При найденных различиях тесты проваливаются.

В стандартный набор BackstopJS входят графические отчеты по результатам каждого теста, возможность запуска браузера в headless-режиме, возможность запуска тестов в готовом docker-окружении для исключения различий в скриншотах между разными системами и многое другое.

Конечно же, BackstopJS не является универсальным инструментом для решения всех проблем с тестами: он поддерживает узкий круг браузеров и специализируется исключительно на скриншотах. Однако в этой области его можно считать одним из лучших, когда требуется быстро обеспечить базовый автоматический контроль качества на проектах, в том числе силами самих разработчиков.