В современном мире веб-дизайн и разработка меняются быстрыми темпами💨, и убедиться, что каждый пиксель надлежащим образом протестирован🧪 на соответствие дизайну, будет сложным и трудоемким⌚ процессом.
Взглянув на различные методологии тестирования, визуальное тестирование действительно выделилось для решения этой проблемы.
Недавно мне очень понравился Cypress для тестирования пользовательского интерфейса, поэтому, взглянув на несколько инструментов, поддерживающих визуальное тестирование, я нашел Percy💜, который хорошо интегрируется с Cypress. Перси имеет массу функций из коробки.
Итак, теперь, когда я доработал инструмент, пришло время опробовать Перси.
Percy было слишком легко установить, просто команда npm
npm install @percy/cypress
После выполнения все готово для интеграции Percy в ваши существующие тесты, что является лучшей частью, поскольку вам не нужно писать новый набор тестов для визуального тестирования🖼️.
Просто добавьте cy.percySnapshot() в любом месте процесса тестирования, где вы считаете, что вам требуется визуальное сравнение. Более подробные параметры доступны в официальной документации Percy📚.
Большинство современных веб-сайтов являются динамическими, что означает, что содержимое веб-сайта постоянно меняется изо дня в день, и Перси рекомендует следующие подходы:
Некоторые из примеров реального времени, где это может быть действительно полезно, могут быть:
Подделка –кредитный баланс для банковского приложения.
Заморозить — дата и время для приложения для социальных сетей.
Скрыть — анимация пользовательского интерфейса для приложения для путешествий.
Percy также поставляется с мощной интеграцией ⛈️, чтобы упростить вам задачу.
Github –проверки PR, которые вы могли бы включить, чтобы убедиться, что визуальные изменения фиксируются перед слиянием с тестовой или рабочей средой.
Slack. Мгновенные уведомления о визуальном прохождении или сбое могут быть отправлены по любым предпочитаемым каналам.
Перси также сравнивает экраны в разных браузерах и на разных размерах экрана.
Это одна из лучших функций, поскольку она сокращает ручные усилия, необходимые для тестирования в различных браузерах🌐 и на мобильных устройствах📱.
Обладая столькими преимуществами, Percy — отличный выбор💜 для визуального тестирования.
