Cypress в CircleCI

Cypress — мощный инструмент для end-to-end тестирования веб-приложений на JavaScript, который обеспечивает быстрый и надёжный способ проверки функциональности интерфейса. CircleCI, в свою очередь, представляет собой CI/CD платформу, позволяющую автоматизировать процесс сборки, тестирования и деплоя. Совместное использование этих инструментов обеспечивает стабильность разработки и предотвращает появление регрессий на ранних этапах.

Настройка окружения

Для запуска Cypress в CircleCI требуется корректная конфигурация окружения. В основе лежит файл .circleci/config.yml, который описывает последовательность шагов (jobs) и workflow.

Пример базовой структуры config.yml:

version: 2.1

jobs:
  cypress-run:
    docker:
      - image: cypress/base:14
    steps:
      - checkout
      - run:
          name: Установка зависимостей
          command: npm ci
      - run:
          name: Запуск тестов Cypress
          command: npx cypress run
workflows:
  version: 2
  test:
    jobs:
      - cypress-run

Ключевые моменты:

  • Используется Docker-образ cypress/base, который содержит Node.js и предустановленные зависимости для Cypress.
  • Команда npm ci гарантирует чистую установку зависимостей.
  • npx cypress run запускает все тесты без GUI. Для запуска с браузером и отчетами используется дополнительная конфигурация.

Конфигурация браузеров и параллельного запуска

Cypress поддерживает несколько браузеров: Chrome, Firefox, Edge и встроенный Electron. В CircleCI возможно указать конкретный браузер с помощью флага:

npx cypress run --browser chrome

Для ускорения тестирования можно включить параллельный запуск тестов, что особенно важно для больших тестовых наборов. CircleCI поддерживает parallelism, позволяющий разделить тесты на несколько контейнеров.

jobs:
  cypress-run:
    docker:
      - image: cypress/base:14
    parallelism: 4
    steps:
      - checkout
      - run:
          name: Установка зависимостей
          command: npm ci
      - run:
          name: Запуск тестов Cypress параллельно
          command: npx cypress run --record --parallel --key $CYPRESS_RECORD_KEY

Объяснение:

  • parallelism: 4 делит выполнение на 4 контейнера.
  • --record и --key позволяют отправлять результаты в Cypress Dashboard, что обеспечивает визуальный контроль прохождения тестов и детализированные отчеты.

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

Для ускорения CI-пайплайна рекомендуется использовать кэширование node_modules и Cypress бинарников. CircleCI предоставляет возможность сохранять и восстанавливать кэш между сборками.

      - restore_cache:
          keys:
            - v1-deps-{{ checksum "package-lock.json" }}
      - run:
          name: Установка зависимостей
          command: npm ci
      - save_cache:
          paths:
            - node_modules
          key: v1-deps-{{ checksum "package-lock.json" }}

Это уменьшает время установки зависимостей на повторных сборках и предотвращает лишние загрузки бинарников Cypress.

Запись видео и скриншотов

Cypress автоматически сохраняет скриншоты при падении теста и видео выполнения тестов. CircleCI позволяет сохранять эти артефакты для последующего анализа.

      - run:
          name: Запуск Cypress с артефактами
          command: npx cypress run --record --key $CYPRESS_RECORD_KEY
      - store_artifacts:
          path: cypress/videos
      - store_artifacts:
          path: cypress/screenshots

Скриншоты и видео помогают выявлять ошибки, которые не видны в логах, и ускоряют диагностику проблем в интерфейсе.

Использование оркестрации с Docker Compose

Для проектов с зависимостями от бэкенда или базы данных удобно запускать Cypress в окружении с Docker Compose. CircleCI поддерживает такой подход через service-образы.

jobs:
  cypress-run:
    docker:
      - image: cypress/base:14
    steps:
      - checkout
      - setup_remote_docker
      - run:
          name: Запуск контейнеров
          command: docker-compose up -d
      - run:
          name: Установка зависимостей
          command: npm ci
      - run:
          name: Cypress тесты
          command: npx cypress run
      - run:
          name: Остановка контейнеров
          command: docker-compose down

Этот подход позволяет тестировать фронтенд вместе с реальными сервисами, что повышает точность тестирования интеграции.

Настройка workflow для веток и pull request

CircleCI позволяет задавать условия запуска workflow в зависимости от ветки или событий pull request. Это удобно для ограничения нагрузки на CI и прогонов тестов только там, где это необходимо.

workflows:
  version: 2
  test:
    jobs:
      - cypress-run:
          filters:
            branches:
              only:
                - main
                - develop
            pull_requests:
              only: /.*/

Таким образом, Cypress-тесты будут выполняться при каждом pull request и на ключевых ветках разработки, обеспечивая контроль качества перед слиянием.

Отчёты о покрытии кода

Cypress легко интегрируется с инструментами покрытия кода, например nyc или c8. CircleCI можно настроить на генерацию и публикацию отчетов в формате lcov или HTML:

      - run:
          name: Запуск Cypress с покрытием
          command: npx cypress run --env coverage=true
      - store_artifacts:
          path: coverage

Это позволяет отслеживать, насколько тесты покрывают критические участки приложения, и выявлять зоны, требующие дополнительного тестирования.

Интеграция Cypress с CircleCI обеспечивает автоматизированный, надежный и масштабируемый процесс тестирования веб-приложений. Гибкая настройка параллельного запуска, артефактов, кэширования и workflow делает возможным построение CI/CD, соответствующего требованиям крупных проектов и ускоряющего разработку без потери качества.

Оглавление