Cypress в GitLab CI

Cypress является мощным инструментом для end-to-end тестирования веб-приложений на JavaScript. Его интеграция с CI/CD системами, такими как GitLab CI, позволяет автоматизировать выполнение тестов при каждом изменении кода, обеспечивая стабильность продукта и предотвращая регрессии.

Конфигурация GitLab CI

Для запуска Cypress в GitLab CI используется файл .gitlab-ci.yml, который описывает пайплайны и стадии сборки. Минимальная структура пайплайна для Cypress включает следующие стадии:

stages:
  - install
  - test

Стадия install отвечает за установку зависимостей проекта:

install_dependencies:
  stage: install
  image: cypress/base:18
  script:
    - npm ci
  artifacts:
    paths:
      - node_modules/
  • image — базовый Docker-образ с предустановленным Node.js и инструментами для запуска браузеров.
  • npm ci — установка зависимостей строго по package-lock.json, что обеспечивает воспроизводимость сборки.
  • artifacts.paths — сохранение node_modules, чтобы не устанавливать зависимости повторно на следующих стадиях.

Стадия test выполняет тесты Cypress:

run_cypress_tests:
  stage: test
  image: cypress/base:18
  dependencies:
    - install_dependencies
  script:
    - npx cypress run
  artifacts:
    when: always
    paths:
      - cypress/screenshots
      - cypress/videos
  • dependencies гарантирует, что на стадии тестирования будут доступны артефакты из предыдущей стадии.
  • npx cypress run — стандартная команда для запуска тестов в headless режиме.
  • artifacts.when: always сохраняет скриншоты и видео даже при падении тестов, что критично для анализа ошибок.

Выбор Docker-образа

Cypress предоставляет несколько базовых образов:

  • cypress/base:<node-version> — содержит Node.js и зависимости для сборки приложений, но без браузеров.
  • cypress/browsers:<browser>-<version> — включает предустановленные браузеры (Chrome, Firefox, Edge).

Для полноценного E2E тестирования рекомендуется использовать образы с браузерами, например:

image: cypress/browsers:node18.16.0-chrome116-ff116

Настройка переменных окружения

Для безопасного хранения секретов (API-ключи, токены) используются переменные GitLab CI:

variables:
  CYPRESS_BASE_URL: "https://staging.example.com"
  CYPRESS_API_TOKEN: $API_TOKEN

В тестах Cypress переменные доступны через Cypress.env('API_TOKEN') или напрямую через Cypress.config('baseUrl').

Параллельный запуск тестов

GitLab CI поддерживает параллельные джобы, что ускоряет выполнение тестов:

run_cypress_parallel:
  stage: test
  image: cypress/browsers:node18.16.0-chrome116-ff116
  parallel: 4
  script:
    - npx cypress run --record --key $CYPRESS_RECORD_KEY
  • parallel: 4 делит тесты на 4 параллельные группы.
  • --record позволяет собирать результаты в Cypress Dashboard, что упрощает анализ и отчетность.

Кэширование зависимостей

Для ускорения пайплайнов важно кэшировать зависимости:

cache:
  key: ${CI_COMMIT_REF_SLUG}
  paths:
    - node_modules/
    - cypress/cache/
  • cypress/cache хранит загруженные браузеры и бинарники Cypress, что экономит время при повторных сборках.

Запуск тестов в Docker-контейнерах

Для локального тестирования CI-конфигурации удобно использовать Docker Compose:

services:
  - name: cypress/browsers:node18.16.0-chrome116-ff116
    alias: cypress

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

Работа с отчетами и артефактами

Cypress умеет генерировать отчеты в формате JUnit, что интегрируется с GitLab CI для отображения результатов в веб-интерфейсе:

script:
  - npx cypress run --reporter junit --reporter-options "mochaFile=reports/junit/results-[hash].xml"
artifacts:
  when: always
  reports:
    junit: reports/junit/*.xml
  • --reporter junit — генерация отчета в формате JUnit.
  • GitLab CI отображает результаты тестов прямо в интерфейсе пайплайна.

Типовые ошибки при интеграции

  1. Отсутствие браузеров в базовом образе — решается использованием образов cypress/browsers.
  2. Ошибки с GUI в headless-режиме — проверка правильности запуска браузера через --headless.
  3. Проблемы с зависимостями — использование npm ci вместо npm install обеспечивает воспроизводимость.
  4. Некорректная работа переменных окружения — обязательно проверять доступность через echo $VARIABLE перед запуском тестов.

Советы по оптимизации

  • Разделение тестов на небольшие наборы позволяет использовать параллелизм и ускоряет время пайплайна.
  • Кэширование бинарников и зависимостей существенно уменьшает время сборки.
  • Сохранение скриншотов и видео при падении тестов ускоряет диагностику ошибок.
  • Интеграция с Cypress Dashboard дает централизованный обзор результатов всех пайплайнов.

GitLab CI вместе с Cypress обеспечивает стабильную автоматизацию тестирования и позволяет быстро выявлять регрессии при изменениях кода, поддерживая высокое качество продукта.

Оглавление