Applitools и Cypress

Applitools предоставляет мощные инструменты для автоматизации визуального тестирования веб-приложений, позволяя выявлять изменения интерфейса, которые невозможно отследить с помощью обычных функциональных тестов. Cypress, будучи популярным инструментом для энд-то-энд тестирования на JavaScript, может быть интегрирован с Applitools через специальный SDK, обеспечивая синхронизацию функциональных и визуальных тестов в единой цепочке.

Установка и настройка

Для начала необходимо установить пакет @applitools/eyes-cypress:

npm install @applitools/eyes-cypress --save-dev

После установки выполняется конфигурация через файл cypress/plugins/index.js:

module.exports = (on, config) => {
  require('@applitools/eyes-cypress')(module);
};

Далее создается файл конфигурации applitools.config.js, где задаются ключевые параметры: API-ключ, базовый URL, размеры окон для тестирования и режим работы:

module.exports = {
  apiKey: process.env.APPLITOOLS_API_KEY,
  appName: 'My Web App',
  batchName: 'Cypress Visual Tests',
  browser: [
    { width: 1024, height: 768, name: 'chrome' },
    { width: 800, height: 600, name: 'firefox' }
  ]
};

Использование переменной окружения для API-ключа повышает безопасность и позволяет запускать тесты на CI/CD без раскрытия секретов.

Основные команды Applitools в Cypress

Applitools расширяет Cypress собственными командами для работы с визуальными проверками:

  • cy.eyesOpen() — инициализация визуального теста. Параметры включают имя приложения, имя теста и опционально размеры окна.
  • cy.eyesCheckWindow() — фиксирует текущее состояние окна для сравнения с эталонным изображением.
  • cy.eyesClose() — завершает визуальный тест и сохраняет результаты на сервере Applitools.

Пример использования:

describe('Визуальное тестирование главной страницы', () => {
  it('Проверка корректности UI', () => {
    cy.eyesOpen({ appName: 'My Web App', testName: 'Главная страница' });
    cy.visit('/');
    cy.eyesCheckWindow('Главная страница - начальное состояние');
    cy.get('button#login').click();
    cy.eyesCheckWindow('После клика на кнопку Вход');
    cy.eyesClose();
  });
});

Продвинутые возможности

  1. Локаторы для конкретных элементов Визуальная проверка может выполняться не для всей страницы, а для отдельных элементов, что ускоряет тестирование и упрощает диагностику изменений:
cy.eyesCheckWindow({
  tag: 'Форма логина',
  target: 'region',
  selector: '#login-form'
});
  1. Поддержка динамических элементов Для игнорирования динамических частей интерфейса (например, даты или рекламных баннеров) используется опция ignoreRegions:
cy.eyesCheckWindow({
  ignoreRegions: ['.ad-banner', '.timestamp']
});
  1. Режимы сравнения Applitools позволяет выбирать различные алгоритмы сравнения: Strict, Layout, Content и Exact. Выбор зависит от требований к точности и допустимости изменений интерфейса.
cy.eyesCheckWindow({
  tag: 'Главная страница',
  matchLevel: 'Layout'
});
  1. Тестирование в разных браузерах и размерах экрана Конфигурация браузеров в applitools.config.js позволяет запускать визуальные тесты параллельно в разных условиях, обеспечивая кросс-браузерное покрытие.

CI/CD интеграция

Applitools отлично интегрируется с Jenkins, GitHub Actions, GitLab CI и другими системами. Для этого достаточно экспортировать переменную APPLITOOLS_API_KEY в окружении CI и запускать Cypress с командой:

npx cypress run

Все визуальные результаты будут автоматически загружены в Applitools Dashboard, где можно просмотреть изменения и утвердить или отклонить их.

Полезные практики

  • Разделять визуальные тесты на небольшие блоки по страницам или компонентам для ускорения анализа изменений.
  • Использовать ignoreRegions и floatingRegions для элементов с динамическим содержимым.
  • Поддерживать единый batchName для логической группировки тестов, что упрощает отслеживание прогресса.
  • Проверять результаты визуального теста сразу после функциональных проверок, чтобы локализовать ошибки точнее.

Applitools и Cypress вместе создают мощную платформу для комплексного тестирования: Cypress обеспечивает надежное покрытие функциональности, а Applitools — точное визуальное сравнение, что минимизирует риск регрессий в пользовательском интерфейсе.

Оглавление