Структура директорий

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

Корневая директория проекта

При инициализации проекта Cypress создаёт несколько основных папок и файлов в корне:

  • cypress/ – основная рабочая директория для тестов и вспомогательных файлов.
  • cypress.config.js или cypress.config.ts – главный файл конфигурации Cypress, где задаются глобальные настройки, такие как базовый URL, таймауты, пути для тестов и интеграций с внешними сервисами.
  • package.json – стандартный файл Node.js проекта, содержащий зависимости Cypress, скрипты для запуска тестов и другие модули.
  • node_modules/ – директория с установленными пакетами, включая Cypress.

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

Директория cypress/ является основным рабочим пространством. Она содержит несколько стандартных подпапок:

  1. e2e/ Хранит файлы end-to-end тестов. Обычно здесь создаются файлы с тестами по функциональности приложения. Файлы имеют расширение .cy.js, .cy.ts или .spec.js.

    Пример структуры:

    cypress/e2e/
  ├─ login.cy.js
  ├─ dashboard.cy.js
  └─ settings.cy.js

  2. fixtures/ Содержит статические данные, используемые в тестах, например JSON-файлы с тестовыми пользователями, конфигурациями или ответами от API. Эти файлы удобно подключать через команду cy.fixture('filename.json').

    Пример структуры:

    cypress/fixtures/
  ├─ user.json
  └─ products.json

  3. support/ Предназначена для вспомогательных функций, кастомных команд и глобальных настроек. Обычно содержит файлы:

    • commands.js или commands.ts – определение пользовательских команд через Cypress.Commands.add.
    • e2e.js или e2e.ts – подключение глобальных хуков, обработчиков событий, настройка interceptors.

    Использование support/ позволяет избежать дублирования кода в тестах и централизованно управлять повторно используемыми действиями.

  4. plugins/ (опционально, в старых версиях Cypress) Директория для Node.js плагинов и кастомных задач, которые выполняются на стороне сервера, например обработка файлов или интеграция с внешними инструментами. В новых версиях плагины чаще подключаются через cypress.config.js.

Организация поддиректорий для больших проектов

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

  • pages/ – хранение Page Object моделей для улучшения читаемости тестов и переиспользования логики работы с UI.
  • api/ – хранение функций для работы с API, что позволяет легко выполнять подготовку данных и верификацию через API вместо UI.
  • utils/ – вспомогательные утилиты и функции, которые используются в разных тестах и командах.

Пример структуры большого проекта:

cypress/
  ├─ e2e/
  │   ├─ auth/
  │   │   └─ login.cy.js
  │   ├─ dashboard/
  │   │   └─ dashboard.cy.js
  │   └─ settings/
  │       └─ settings.cy.js
  ├─ fixtures/
  │   ├─ user.json
  │   └─ products.json
  ├─ support/
  │   ├─ commands.js
  │   └─ e2e.js
  ├─ pages/
  │   ├─ LoginPage.js
  │   └─ DashboardPage.js
  ├─ api/
  │   └─ userApi.js
  └─ utils/
      └─ helpers.js

Файлы конфигурации

  • cypress.config.js/ts – основной конфигурационный файл, где задаются:

    • baseUrl – базовый URL приложения;
    • viewportWidth и viewportHeight – размеры окна браузера;
    • defaultCommandTimeout – таймаут по умолчанию для команд;
    • env – переменные окружения для разных сред (dev, staging, prod);
    • e2e – настройки для запуска end-to-end тестов, включая путь к файлам тестов.

Пример конфигурации:

import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: 'cypress/support/e2e.js',
  },
  viewportWidth: 1280,
  viewportHeight: 720,
  defaultCommandTimeout: 8000,
  env: {
    login_email: 'test@example.com'
  }
})

Рекомендации по организации директорий

  • Тесты должны разделяться по функциональным модулям (auth, dashboard, settings) для удобного поиска и поддержки.
  • В support/commands.js выносить повторяющиеся действия, например авторизацию, заполнение форм, проверку элементов.
  • fixtures/ использовать для статических данных и шаблонов, чтобы избежать хардкода значений в тестах.
  • pages/ и api/ повышают читаемость и позволяют использовать паттерн Page Object для UI и модульные подходы для API.
  • Не хранить временные или служебные файлы в директории Cypress, чтобы не усложнять конфигурацию и CI/CD интеграцию.

Преимущества правильной структуры директорий

  • Упрощается масштабирование проекта при росте числа тестов.
  • Легче поддерживать и обновлять тесты без дублирования кода.
  • Ускоряется onboarding новых разработчиков и тестировщиков.
  • Улучшается интеграция с CI/CD за счёт предсказуемого расположения файлов и конфигураций.

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

Оглавление