Автоматическое визуальное регрессионное тестирование

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

🦄 Появляется единорог

Недавно я узнал об отличном модуле 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

Удачного тестирования!