Структура проектных файлов Cypress

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

Внутри cypress/ обычно располагаются директории e2e/, fixtures/, support/, downloads/, screenshots/ и videos/. Каждая из них выполняет отдельную роль в процессе написания, исполнения и анализа тестов.

Директория e2e/

e2e/ содержит тестовые спецификации конечного-пользовательского поведения. Cypress ожидает, что тестовые файлы будут иметь расширения .cy.js, .cy.ts, .cy.jsx или .cy.tsx, что облегчает автоматическую идентификацию тестов.

Стоит уделить внимание структурированию тестов по доменам или по функциональным модулям приложения. Такой подход сокращает время поиска нужной спецификации при анализе падений или расширении покрытия. Для каждого модуля приложения обычно создают отдельную вложенную директорию внутри e2e/.

Директория fixtures/

fixtures/ предназначена для хранения статичных данных, используемых в тестах: JSON-ответов, подготовленных тел запросов, локальных файлов или шаблонов. Cypress умеет подгружать содержимое фикстур через cy.fixture(), что обеспечивает удобный доступ к данным без дублирования и нагромождения тестовых сценариев.

Хранение тестовых данных в fixtures/ упрощает поддержку сценариев, поскольку изменяются только файлы данных, а тестовые шаги остаются неизменными.

Директория support/

support/ содержит код, который исполняется перед запуском тестов, а также пользовательские команды и переопределения поведения Cypress. Файл e2e.{js,ts} инициирует тестовую среду, подключает хуки, глобальные обработчики ошибок и расширения интерфейса пользователя Cypress.

Дополнительный файл commands.{js,ts} используется для определения пользовательских команд, которые можно вызывать через cy.<команда>(). Такая инкапсуляция позволяет избавиться от повторяющихся шагов в тестах и облегчает чтение спецификаций.

Директории screenshots/ и videos/

Во время запуска тестов Cypress может автоматически снимать видео выполнения и делать скриншоты в моменты падения. Эти артефакты помещаются в директории videos/ и screenshots/. Их анализ помогает диагностировать проблемы при воспроизведении ошибок, особенно в CI-окружениях.

При использовании удалённых систем или облачных провайдеров хранения артефактов принято на уровне CI-конвейера включать сохранение содержимого этих каталогов после каждого прогона.

Директория downloads/

При тестировании функциональности загрузки файлов Cypress сохраняет результирующие файлы в директории downloads/. Это позволяет выполнять проверки наличия и структуры загруженных данных через вспомогательные функции или пользовательские команды.

Конфигурационные файлы

Рядом с каталогом cypress/ располагаются конфигурационные файлы: cypress.config.js или cypress.config.ts, а также иногда cypress.env.json. Первый отвечает за основные настройки раннера, интеграцию с плагинами, определение базового URL-адреса и настройку таймаутов. Второй обеспечивает хранение переменных окружения, секретов и параметров тестового окружения.

Ключевые настройки включают:

  • baseUrl для унификации переходов на страницы.
  • viewportWidth и viewportHeight для выбора размеров экрана.
  • retries для повторных прогонов упавших тестов.
  • defaultCommandTimeout и requestTimeout для регулировки ожиданий.

Логика разделения тестового кода

В крупных проектах тестовый код часто разделяется на несколько уровней. В support/ размещают низкоуровневую инфраструктуру, в e2e/ — сценарии высокого уровня, а в fixtures/ — данные. Дополнительно могут создаваться папки pages/ для паттерна Page Object и api/ для абстракций HTTP-взаимодействий. Они располагаются либо в e2e/, либо в support/, в зависимости от предпочтений команды.

Абстрактный слой позволяет менять стратегию инициализации и обращения к элементам без переписывания спецификаций. Такой подход особенно полезен при смене DOM-структуры или переходе на другой UI-фреймворк.

Особенности при работе с TypeScript

При использовании TypeScript генерируются типы Cypress, помещаемые через types внутри tsconfig.json. support/commands.ts часто содержит декларации для модификации глобального пространства Cypress.Chainable, что обеспечивает подсветку типов и автодополнение пользовательских команд.

Стратегия для CI-окружений

В непрерывной интеграции структура файлов способствует воспроизводимости прогонов. videos/ и screenshots/ позволяют проводить последующий анализ, а конфигурационные файлы фиксируют настройки окружения. Дополнительные YAML-файлы CI-систем не вмешиваются в Cypress-структуру, но работают поверх неё, формируя стабильный pipeline тестирования.

Расширения и плагины проектной структуры

Плагины Cypress могут создавать дополнительные директории, например для отчётов. Инструменты вроде Allure или Mochawesome формируют отчётные файлы в reports/. При этом структура остаётся совместимой с базовым деревом Cypress, что не нарушает навигацию и не усложняет поддержку.

Подход к масштабированию

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