При использовании Cypress для тестирования приложений есть несколько отчетов, которые вы получаете из коробки. Это видеозапись теста, а если тест не пройден, снимок экрана в тот момент, когда он не прошел. Часто этого бывает недостаточно. Вам нужен вывод HTML для отчета. Об этом я расскажу в этом посте. Вы получите пошаговое руководство по созданию отчета с mochawesome для e2e-тестов. Если вы новичок в Cypress, вы можете прочитать о том, как его настроить, в этой статье.

Установка

Начнем с необходимых пакетов, которые вам понадобятся для создания отчетов mochawesome. Первый пакет, который вам понадобится, это mochawesome, который вы можете получить, выполнив:

npm install --save-dev mochawesome

На данный момент есть некоторые проблемы с мокко, которые должны были быть решены в Cypress версии 4. К сожалению, этого не произошло, но их можно решить, установив старую версию мокко, выполнив:

npm install --save-dev [email protected]

Настройка

После установки необходимых зависимостей вам необходимо выполнить некоторую настройку для их использования. Вы можете создавать эти отчеты, используя флаг репортера при запуске тестов.

Пример:

cypress run --reporter mochawesome

Обычно вы не хотите добавлять эти флаги к командам CLI. Просто делает все менее понятным. Поэтому мы добавим конфигурацию в наш файл cypress.json. Когда вы запускаете cypress в первый раз, этот файл будет сгенерирован в корневой папке вашего проекта, и в начальной версии он просто содержит пустой объект. Чтобы определить, какой репортер использовать, нам нужно добавить свойство репортера.

{
 "reporter": "mochawesome"
 }

Это создаст папку mochawesome-report, содержащую наш отчет, как на изображении ниже.

Чаще всего мы хотим настроить некоторые параметры. Итак, сначала давайте добавим несколько таблиц для наших тестовых костюмов. Мы можем настроить это в свойстве reporterOptions. Это свойство является объектом, содержащим различные конфигурации репортера. Для создания диаграмм добавьте свойство диаграмм со значением true.

{
 "reporter": "mochawesome",
 "reporterOptions": {
   "charts": true
 }
}

Это не лучшие графики, но они дают представление о прохождении и провале тестов.

Вы можете создать отчет в нескольких различных форматах, HTML и JSON. Возможно, вы просто хотите использовать этот дисплей по умолчанию, тогда вы можете просто использовать HTML. Но если вы хотите создать что-то нестандартное, вы можете экспортировать JSON и использовать эти данные для создания собственных отчетов. Этим вы можете управлять, установив для флагов желаемого результата значение true.

{
 "reporter": "mochawesome",
 "reporterOptions": {
   "html": true,
   "json": true
 }
}

Расположение вывода и имя отчета также можно настроить в этом файле. Мы можем сделать это с помощью полей reportDir и reportFilename.

{
 "reporter": "mochawesome",
 "reporterOptions": {
   "charts": false,
   "html": true,
   "json": true,
   "reportDir": "cypress/reports",
   "reportFilename": "report"
 }
}

Mochawesome генерирует новый отчет для каждой имеющейся у нас спецификации. И поскольку по умолчанию он перезаписывает старые отчеты, это означает, что он сохранит только последний запуск спецификации теста. Это можно исправить, установив флаг перезаписи в значение false. Изменение этого флага на false просто генерирует новый файл при каждом запуске. Поэтому вам следует удалить старые перед запуском, вручную или с помощью какого-либо скрипта.

{
 "reporter": "mochawesome",
 "reporterOptions": {
   "charts": false,
   "html": true,
   "json": true,
   "reportDir": "cypress/reports",
   "reportFilename": "report",
   "overwrite": true 
 }
}

Если бы мы запустили это, мы бы получили отдельный отчет для каждого файла спецификации. Обычно мы не хотим этого делать, и мы можем объединить их в один отчет с помощью пакета npm mochawesome-merge. Поскольку я предпочитаю делать статьи меньшего размера, я расскажу об этом в отдельной статье.

Примеры кода для этой установки вы можете найти в моем репозитории Github.

Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn или GitHub.