Регистрация и настройка проекта

Для работы с Cypress необходим Node.js версии не ниже 14. После установки Node.js выполняется инициализация проекта с помощью команды:

npm init -y

Эта команда создаёт базовый package.json, который будет содержать метаданные проекта и список зависимостей. Установка Cypress осуществляется через npm:

npm install cypress --save-dev

Использование флага --save-dev указывает, что Cypress является зависимостью только для разработки, а не для продакшн-сборки.

После установки можно открыть Cypress с помощью команды:

npx cypress open

Эта команда запускает графический интерфейс Cypress Test Runner, создаёт структуру папок и начальные файлы в директории cypress. Основные папки, создаваемые автоматически:

  • cypress/e2e — для тестов end-to-end;
  • cypress/fixtures — для статических данных, используемых в тестах;
  • cypress/support — для вспомогательных функций, команд и глобальной конфигурации.

Структура проекта и организация тестов

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

  • cypress.config.js — главный конфигурационный файл, в котором задаются базовый URL, тайм-ауты, директории тестов и отчёты. Пример базовой конфигурации:
const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    specPattern: 'cypress/e2e/**/*.cy.js',
    supportFile: 'cypress/support/e2e.js',
    defaultCommandTimeout: 8000,
  },
});
  • cypress/support/commands.js — добавление пользовательских команд для повторного использования. Например, команда для авторизации:
Cypress.Commands.add('login', (username, password) => {
  cy.visit('/login');
  cy.get('input[name=username]').type(username);
  cy.get('input[name=password]').type(password);
  cy.get('button[type=submit]').click();
});
  • cypress/fixtures — хранение JSON-файлов с тестовыми данными. Например, user.json:
{
  "username": "testuser",
  "password": "password123"
}

Настройка базового URL и переменных окружения

Базовый URL позволяет не указывать полный адрес в каждом тесте:

cy.visit('/dashboard'); // фактически открывает http://localhost:3000/dashboard

Переменные окружения добавляются в cypress.config.js:

env: {
  apiUrl: 'http://localhost:5000/api',
  loginUser: 'testuser'
}

Доступ к ним в тестах осуществляется через:

cy.env('apiUrl');

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

Настройка интеграции с CI/CD

Для автоматического запуска тестов в пайплайне необходимо установить Cypress как часть скриптов npm:

"scripts": {
  "cy:open": "cypress open",
  "cy:run": "cypress run"
}

Команда cypress run запускает тесты в headless-режиме, подходящем для CI/CD. Настройка окружения в CI может включать переменные, специфичные для каждой среды, что упрощает тестирование в разных окружениях.

Логи и отчётность

Cypress автоматически генерирует отчёты о результатах тестирования в терминале. Для детализированных отчётов интегрируется с Mocha reporters или Allure. Пример подключения Mocha reporter:

module.exports = defineConfig({
  reporter: 'mochawesome',
  reporterOptions: {
    reportDir: 'cypress/reports',
    overwrite: false,
    html: true,
    json: true
  },
});

Использование отчётов позволяет отслеживать прогресс тестирования, анализировать ошибки и интегрировать результаты в систему мониторинга качества.

Настройка повторного использования кода

Cypress поддерживает создание пользовательских команд и вспомогательных функций для уменьшения дублирования кода. Разделение на функции и команды позволяет:

  • ускорить написание тестов;
  • улучшить читаемость и поддержку тестов;
  • централизовать логику авторизации, навигации и работы с API.

Настройка глобальных хуков

Cypress позволяет создавать глобальные хуки before, after, beforeEach, afterEach в файле cypress/support/e2e.js или внутри отдельных файлов тестов. Пример глобальной подготовки:

beforeEach(() => {
  cy.viewport(1280, 720);
  cy.visit('/');
});

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

Выбор стратегии тестирования

Cypress поддерживает несколько уровней тестирования:

  • End-to-End (E2E) — проверка всего сценария от пользовательского интерфейса до сервера.
  • Integration — тестирование отдельных модулей приложения в рамках браузера.
  • Component Testing — проверка отдельных компонентов UI с использованием виртуального DOM.

Правильная организация тестов по типу позволяет снизить время выполнения и улучшить читаемость кода.

Оглавление