Percy и Cypress

В современном веб-разработке помимо функционального тестирования важное место занимает визуальное тестирование интерфейсов. Даже если приложение работает корректно с точки зрения логики, изменения в CSS или структуре DOM могут нарушить пользовательский опыт. Инструмент Percy интегрируется с Cypress и позволяет автоматически фиксировать визуальные изменения на страницах приложения.

Основы интеграции Percy с Cypress

Percy — это сервис для визуального тестирования, который фиксирует скриншоты страниц и сравнивает их с эталонными версиями. В связке с Cypress он работает как расширение, позволяя создавать визуальные тесты в рамках привычной Cypress-среды.

  1. Установка зависимостей: для работы потребуется два пакета:
npm install --save-dev @percy/cypress
  1. Подключение к Cypress: в файле cypress/support/commands.js добавляется:
import '@percy/cypress';
  1. Настройка переменных окружения: Percy требует наличие токена проекта. Его перед запуском тестов можно задать через переменную окружения:
export PERCY_TOKEN=<your_percy_token>

После этого команда cypress run совместно с Percy сможет фиксировать визуальные изменения.

Создание визуального теста

Визуальный тест в Cypress с Percy строится вокруг привычной схемы describe и it. Основное отличие — использование команды cy.percySnapshot() для снятия скриншотов:

describe('Визуальное тестирование страницы', () => {
  it('Главная страница без изменений', () => {
    cy.visit('https://example.com');
    cy.percySnapshot('Главная страница');
  });
});

Ключевые моменты:

  • cy.visit() загружает страницу приложения.
  • cy.percySnapshot() делает снимок страницы и отправляет его на сервер Percy.
  • Аргумент метода ('Главная страница') используется как идентификатор снимка в интерфейсе Percy.

Percy автоматически сравнивает новые скриншоты с предыдущими и отмечает различия. Это позволяет быстро выявлять непреднамеренные визуальные регрессии.

Конфигурация скриншотов

Percy позволяет детально управлять тем, что именно фиксируется:

  1. Селекторы для игнорирования изменений: иногда необходимо исключить динамические элементы, например, даты или баннеры.
cy.percySnapshot('Страница с игнорированием динамических блоков', {
  widths: [375, 1280], // разные размеры экрана
  percyCSS: '.dynamic-banner { visibility: hidden; }'
});
  1. Разные размеры экранов: для проверки адаптивного дизайна можно указать массив ширин.
cy.percySnapshot('Адаптивная страница', { widths: [320, 768, 1024] });
  1. Стилизация скриншотов через CSS: иногда полезно скрывать элементы или подменять стили для точного сравнения.

Продвинутая работа с Percy

  1. Тестирование отдельных компонентов: вместо целых страниц можно фиксировать отдельные блоки интерфейса.
cy.get('.header').percySnapshot('Хедер сайта');

  1. Интеграция с CI/CD: Percy хорошо сочетается с Jenkins, GitHub Actions, GitLab CI. Каждый pull request может автоматически проверять визуальные изменения.

  2. Сравнение версий: интерфейс Percy позволяет просматривать все изменения между ветками, отмечая новые различия зеленым или красным.

  3. Оптимизация скорости тестов: можно снимать скриншоты только для критичных страниц или компонентов, чтобы не увеличивать время CI.

Лучшие практики

  • Четкие имена снимков: использовать описательные названия для легкой навигации в интерфейсе Percy.
  • Исключение динамических элементов: скрывать блоки с часто меняющимся контентом для предотвращения ложных срабатываний.
  • Мультибрендовые тесты: если проект использует разные темы или цвета для разных брендов, делать отдельные снимки для каждой конфигурации.
  • Регулярные ревизии: периодически проверять все эталонные скриншоты и удалять устаревшие, чтобы база данных снимков не раздувалась.

Преимущества использования Percy с Cypress

  • Полная интеграция с существующими Cypress-тестами.
  • Автоматическое выявление визуальных регрессий.
  • Возможность работы с разными разрешениями экрана.
  • Поддержка компонентного тестирования, а не только страниц.
  • Совместимость с CI/CD пайплайнами и системами контроля версий.

Использование Percy совместно с Cypress позволяет поднять качество веб-приложения, гарантируя, что любые изменения в интерфейсе будут выявлены на ранней стадии. Визуальные тесты становятся полноценной частью процесса контроля качества наряду с функциональными и интеграционными проверками.

Оглавление