В статье Начало работы с тестированием Cypress e2e в Angular рассказывается, как настроить Cypress для проекта Angular. В этом посте мы сделаем еще один шаг и расскажем, как использовать Cypress для автоматического тестирования e2e в рабочем процессе CI / CD.
Jenkins используется в качестве сервера автоматизации, и я предполагаю, что у вас уже есть запущенный экземпляр. Кроме того, ваше приложение должно быть отправлено в репозиторий VCS, например GitHub.

Настройка Jenkins

Сначала мы создаем необходимую конфигурацию в Jenkins, создав новый конвейер:

Исходный код нашего приложения должен быть взят с GitHub. Итак, нам нужно настроить соединение. На машине, на которой мы запускаем Jenkins, мы создаем пару открытого / закрытого ключей:

ssh-keygen -t rsa -b 4096

Мы добавляем открытый ключ в GitHub в раздел «Ключи развертывания». И установите следующее для нашего конвейера в Jenkins:

Если под полем «URL-адрес репозитория» нет красного сообщения об ошибке, вы успешно подключили репозиторий GitHub к Jenkins.

Поскольку у нас есть проект Angular, нам необходимо выполнить сценарии npm для сборки и тестирования нашего приложения. Итак, нам нужны NodeJs. Давайте установим его в разделе «Управление Jenkins» → «Управление плагинами» → «Доступно»:

Затем мы переходим к «Управление Jenkins» → «Глобальная конфигурация инструмента» и убеждаемся, что версия узла установлена ​​и настроена:

Имя «узел» здесь важно. Он будет использован позже. На данный момент Jenkins настроен для наших нужд, и мы можем продолжить проект Angular.

Настройка Angular проекта

Предварительным условием для этой части является то, что у вас есть готовый проект Angular, который уже использует Cypress (посмотрите, например, этот пост) или другие руководства.

Мы не хотим, чтобы конфигурация нашего конвейера хранилась в самом Jenkins. Нам нужен конвейер, определенный как код. Следовательно, мы создаем «Jenkinsfile» в корневом каталоге нашего проекта:

Мы говорим конвейеру использовать Node.js с ранее определенной версией «node». Кроме того, вы должны убедиться, что у вас установлен Google Chrome и на него есть ссылка в Jenkinsfile. Точное определение этапа «Развертывание» здесь отсутствует для простоты. Это задача для вас.

Мы используем браузер Chrome для модульного тестирования. Следовательно, мы настраиваем наш karma.conf.js для использования безголового Chrome:

customLaunchers: {
  ChromeHeadless: {
    base: 'Chrome',
    flags: [
      '--headless',
      '--disable-gpu',
      '--no-sandbox',
      '--remote-debugging-port=9222',
    ]
  }
},
browsers: ['ChromeHeadless'],

Это означает, что у нас запущены модульные тесты. Продолжим тесты Cypress. Если у вас есть проблемы с запуском Cypress в Jenkins, вам поможет эта отличная статья: https://medium.com/aubergine-solutions/install-cypress-io-front-end-testing-tool-dependencies-on-amazon-linux- ami-ec2-instance-f676da4abbdd .

Для части Cypress мы устанавливаем следующий пакет узлов, который позволяет нам выполнять команды параллельно:

npm install concurrently --save-dev

И расширите наш раздел скриптов package.json, добавив:

"cypress:ci": "concurrently \"cypress run\" --kill-others \"ng serve\" --success first",

Запуск сборки

Задача «cypress: ci» будет выполняться на этапе «e2e Tests» в конвейере Jenkins. Теперь мы можем нажать кнопку «Build Now» в Jenkins и получить следующий результат:

Изучая консольный вывод сборки, мы можем убедиться, что тесты Cypress действительно выполнялись:

Но что, если тест не удастся? В настоящее время нам нужно проверить вывод консоли в Jenkins, чтобы выяснить, что пошло не так. Нам нужен репортер для Mocha. Чтобы иметь соответствующие настройки, мы помещаем следующее в файл cypress.json в корневом каталоге нашего проекта:

Чтобы это работало, нам нужно установить плагин JUnit в Jenkins. Так должно быть по умолчанию. Затем мы вставляем блок «post» после «стадий» в нашем Jenkinsfile:

stages {
    ...
}
post {
    always {
        junit 'results/cypress-report.xml'
    }
}

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

На этом пока все. Наши тесты Cypress выполняются в Jenkins. Полные исходники доступны на GitHub. В качестве следующего шага вы можете изучить Распараллеливание тестов cypress, чтобы сократить общее время сборки. И конечно было бы здорово посмотреть скриншоты и видео неудачных тестов прямо в Jenkins.