Cypress в Jenkins

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

Установка и настройка Cypress в Jenkins

1. Подготовка окружения

Для работы Cypress в Jenkins необходим Node.js и npm. Обычно на сервере Jenkins выполняется следующая последовательность:

# Установка Node.js через nvm
nvm install 20
nvm use 20

# Установка Cypress в проект
npm install cypress --save-dev

Важно убедиться, что Jenkins-агент (node executor) имеет доступ к браузерам, поддерживаемым Cypress, так как часть тестов требует графического интерфейса.

2. Установка плагинов Jenkins

Для удобного управления тестами и отчетами рекомендуется установить следующие плагины:

  • Pipeline — для создания скриптов сборки на Groovy.
  • JUnit — для отображения результатов тестов в формате JUnit.
  • HTML Publisher — для публикации HTML-отчетов Cypress.

Конфигурация пайплайна

Jenkins поддерживает два подхода: классический Freestyle и Pipeline (Scripted/Declarative). Declarative Pipeline более удобен для управления Cypress.

Пример Declarative Pipeline с запуском Cypress:

pipeline {
    agent any
    environment {
        CYPRESS_baseUrl = 'http://localhost:3000'
        NODE_OPTIONS = '--max-old-space-size=4096'
    }
    stages {
        stage('Install Dependencies') {
            steps {
                sh 'npm ci'
            }
        }
        stage('Run Cypress Tests') {
            steps {
                sh './node_modules/.bin/cypress run --reporter junit --reporter-options "mochaFile=results/test-results-[hash].xml"'
            }
        }
        stage('Publish Test Results') {
            steps {
                junit 'results/*.xml'
                publishHTML(target: [
                    allowMissing: false,
                    alwaysLinkToLastBuild: true,
                    keepAll: true,
                    reportDir: 'cypress/reports/html',
                    reportFiles: 'index.html',
                    reportName: 'Cypress HTML Report'
                ])
            }
        }
    }
    post {
        always {
            archiveArtifacts artifacts: 'cypress/videos/**', allowEmptyArchive: true
            archiveArtifacts artifacts: 'cypress/screenshots/**', allowEmptyArchive: true
        }
    }
}

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

  • CYPRESS_baseUrl — задаёт базовый URL для тестов. Можно передавать переменные окружения для разных сред (staging, production).
  • JUnit-репортер позволяет Jenkins визуализировать результаты тестов, строить графики и уведомления.
  • HTML-публикация обеспечивает наглядный и подробный отчет Cypress, включающий скриншоты и логи.

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

Cypress по умолчанию использует Electron для headless запуска, но для тестов, требующих реального браузера, нужно настроить графический режим:

sh './node_modules/.bin/cypress run --browser chrome'

Для работы с графическим браузером на удалённом сервере может потребоваться xvfb (X virtual framebuffer):

sudo apt-get install xvfb
xvfb-run -a npm run cypress:run

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

Jenkins поддерживает распределённые сборки на нескольких агентах, что позволяет ускорить выполнение тестов Cypress. Для этого используется флаг --parallel вместе с --record и Cypress Dashboard:

npx cypress run --record --parallel --key <PROJECT_KEY>
  • --record отправляет результаты на Cypress Dashboard для визуализации.
  • --parallel автоматически распределяет тесты между несколькими агентами Jenkins.
  • Cypress Dashboard предоставляет подробные отчеты с видео и скриншотами каждого теста.

Управление артефактами тестирования

Cypress генерирует артефакты, которые полезно сохранять для анализа:

  • Скриншоты (cypress/screenshots/) — при падении теста.
  • Видео (cypress/videos/) — запись всего запуска тестов.
  • Логи и HTML-отчеты (cypress/reports/html/).

Jenkins позволяет автоматически архивировать эти артефакты, что облегчает анализ проблем в пайплайне.

Оптимизация запуска тестов

  1. Кеширование node_modules — ускоряет установку зависимостей.
  2. Фильтрация тестов — запуск только изменённых тестов через теги или grep.
  3. Параллельное выполнение — уменьшает общее время сборки на больших тестовых наборах.
  4. Использование headless режима — снижает нагрузку на Jenkins-агенты.

Пример расширенной конфигурации с ветками

Можно настроить Jenkins Pipeline так, чтобы Cypress запускался только на определённых ветках или pull request:

when {
    branch 'develop'
}

Или запускать отдельный набор тестов для production-ветки:

sh 'npx cypress run --spec "cypress/e2e/prod/**/*"'

Такой подход помогает оптимизировать использование ресурсов и ускорить процесс CI/CD.

Cypress в Jenkins обеспечивает мощный инструмент автоматизации, позволяющий интегрировать frontend-тестирование прямо в процесс разработки, получать детальные отчеты и гибко настраивать выполнение тестов под разные окружения и ветки.

Оглавление