Cypress в GitHub Actions

Cypress является мощным инструментом для энд-ту-энд тестирования веб-приложений на JavaScript. Интеграция Cypress с GitHub Actions позволяет автоматизировать запуск тестов при каждом коммите, pull request или на расписании, обеспечивая постоянную проверку качества кода.

Установка и конфигурация

Проект с Cypress требует наличия Node.js и npm. Для установки Cypress используется стандартная команда:

npm install cypress --save-dev

После установки создается структура проекта Cypress с папками cypress/integration, cypress/fixtures, cypress/support и конфигурационным файлом cypress.config.js.

Файл конфигурации позволяет задавать базовый URL, таймауты и плагины:

const { defineConfig } = require('cypress');

module.exports = defineConfig({
  e2e: {
    baseUrl: 'https://example.com',
    supportFile: 'cypress/support/e2e.js',
    specPattern: 'cypress/integration/**/*.cy.js',
    defaultCommandTimeout: 8000,
    pageLoadTimeout: 10000,
  },
});

Создание workflow для GitHub Actions

GitHub Actions использует YAML-файлы для описания пайплайнов, которые хранятся в .github/workflows. Простейший workflow для Cypress включает три этапа: установка зависимостей, запуск сервера и выполнение тестов.

name: Cypress Tests

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  cypress-run:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

      - name: Install dependencies
        run: npm ci

      - name: Start application
        run: npm start &
        env:
          NODE_ENV: test

      - name: Run Cypress tests
        run: npx cypress run

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

  • npm ci используется для точной установки зависимостей, соответствующих package-lock.json.
  • Символ & позволяет запускать сервер приложения в фоне, чтобы Cypress мог подключиться к нему.
  • npx cypress run выполняет все тесты в headless-режиме.

Настройка кэширования

Для ускорения workflow рекомендуется использовать кэширование node_modules и Cypress бинарников:

      - name: Cache node modules
        uses: actions/cache@v3
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Cache Cypress binary
        uses: actions/cache@v3
        with:
          path: ~/.cache/Cypress
          key: cypress-binary-${{ hashFiles('package-lock.json') }}

Кэширование значительно снижает время выполнения тестов, особенно при больших проектах.

Параллельное выполнение тестов

Cypress поддерживает параллельное выполнение тестов, что критично для крупных наборов тестов. В GitHub Actions это реализуется через параметр --parallel и использование record key:

      - name: Run Cypress in parallel
        run: npx cypress run --record --parallel --key ${{ secrets.CYPRESS_RECORD_KEY }}

Особенности:

  • --record отправляет результаты на Dashboard Cypress для аналитики.
  • --parallel распределяет тесты между потоками, ускоряя прогон.
  • Секретный ключ хранится в GitHub Secrets и не отображается в логах.

Генерация отчетов

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

      - name: Run Cypress tests with JUnit reporter
        run: npx cypress run --reporter junit --reporter-options "mochaFile=results/test-results.xml"

Дальше можно добавить шаг для публикации отчетов:

      - name: Upload test results
        uses: actions/upload-artifact@v3
        with:
          name: cypress-results
          path: results/test-results.xml

Работа с переменными окружения

Cypress позволяет передавать переменные через env в workflow:

      - name: Run Cypress with environment variables
        run: npx cypress run
        env:
          BASE_URL: https://staging.example.com
          API_KEY: ${{ secrets.API_KEY }}

В тестах доступ к этим переменным осуществляется через Cypress.env('BASE_URL').

Практические рекомендации

  • Запуск только изменённых тестов: можно ограничивать запуск тестов по изменённым файлам для ускорения CI.
  • Использование Docker-образов: Cypress предоставляет официальные образы, совместимые с GitHub Actions (cypress/included:12.14.0), упрощающие конфигурацию.
  • Мониторинг стабильности: при нестабильных тестах рекомендуется использовать retries в конфигурации:
e2e: {
  retries: {
    runMode: 2,
    openMode: 0,
  },
}
  • Скриншоты и видео: Cypress автоматически делает скриншоты при падении теста и записывает видео, что удобно для анализа проблем в CI.

Примеры расширенного workflow

jobs:
  cypress-e2e:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node: [16, 18]

    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node }}
      - run: npm ci
      - run: npm start &
      - run: npx cypress run --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
      - uses: actions/upload-artifact@v3
        with:
          name: cypress-videos
          path: cypress/videos

Использование матриц позволяет тестировать проект на разных версиях Node.js, повышая надёжность кросс-окружений.

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

Оглавление