При использовании 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.