Автоматическое визуальное регрессионное тестирование
Когда я впервые услышал термин «тестирование снимков», я наивно предположил, что он имеет дело с данными изображения. Можете представить мое разочарование, когда я узнал, что он не дает никаких впечатляющих визуальных регрессий, хотя после некоторого времени использования снимков я пришел к выводу, что оценил их преимущества. Однако в моем сердце все еще оставался пробел для актуальных снимков регресса веб-сайта.
🦄 Появляется единорог
Недавно я узнал об отличном модуле jest-image-snapshot, который делает именно то, что вы думаете: автоматическое тестирование визуальных различий. API работает очень похоже на toMatchSnapshot
в Jest:
Создание снимка веб-страницы
Настроить toMatchImageSnapshot
очень просто:
А пользоваться им еще проще:
Под капотом происходит много всего, так что давайте погрузимся в это. toMatchImageSnapshot
работает идентично Jest toMatchSnapshot
. Он заботится о:
- Создание, присвоение имени и сохранение изображения при первом запуске.
- Нахождение изображения при последующих казнях для сравнения.
- Выполнение дельта-сравнений и создание предварительного просмотра дельт, если есть разница.
- Все остальные административные вещи: удаление, обновление и сброс в случае сбоя.
Прекратите болтовню, где демо?
Ниже у нас есть Приложение A, «критически важное» окно входа в систему с приветливым заголовком:
Поскольку это окно просматривается много раз в день, я хочу убедиться, что оно не сильно изменится. Итак, в нескольких строках кода я создаю тест, и снимок jest-image-snapshot сохраняет все детали:
Потрясающие! Теперь я могу заниматься своим днем, не слишком беспокоясь о визуальных регрессиях. Перенесемся на несколько дней вперед, и теперь мой тест не работает?!?
Стрелять! Что-то произошло! Давайте посмотрим на это изображение, которое создается в консоли:
Здесь мы получаем хороший снимок «после», «разницы» и «до». Похоже, мое дружеское сообщение в заголовке исчезло. Как только я исправлю это, мои тесты пройдут!
На данный момент все хорошо, но мы упускаем одну вещь: как сделать снимки экрана автоматически?
💪 Драйвер браузера
Возможно, вы думаете о том, чтобы обратиться к старому Selenium или другому драйверу, но я могу предложить еще кое-что: Navalia. Navalia - чрезвычайно простой драйвер браузера с кратким API, интерфейсом GraphQL и возможностью масштабирования работы на нескольких экземплярах. С его помощью мы можем легко установить модуль npm и начать настройку захвата изображений.
Визуальная регрессия с jest-image-snaphot + Navalia
Вот и все 💥 При первом запуске этого теста должно получиться изображение, которое будет сохранено в вашем проекте, и каждый последующий запуск будет сравнивать его с ним, что гарантирует, что все в порядке. Я настоятельно рекомендую вам проверить эти библиотеки с открытым исходным кодом, чтобы вы могли с уверенностью начать свой проект с нуля!
Оформить заказ jest-image-snapshot на GitHub, а также Navalia на Github
Удачного тестирования!