Cypress, пожалуй, лучший инструмент для тестирования веб-приложений на данный момент. Но у Cypress есть еще один недостаток, сообщает сайт. Если вы потратили какое-то время на их настройку, вы знаете, насколько это может быть болезненно. Они нестабильны, требуют нескольких зависимостей, и даже немного разные версии могут их нарушить. И когда вы, наконец, настроите их, вы получите комментарии от руководства о том, что они недостаточно ясны. Это некоторые из причин, по которым я решил написать библиотеку cypress-dashboard. Пакет npm, который поможет вам создать понятную панель отчетов с минимальной настройкой. В этом посте я объясню, как его использовать.

Проблема с текущими решениями

Когда я решил внедрить Cypress в существующие проекты, одним из первых вопросов, которые мне задали, был: А как насчет отчетов?. И я потратил некоторое время, пытаясь их реализовать. Я даже написал еще три статьи на эту тему (создание отчетов и объединение отчетов). Настройка уже была проблематичной. Библиотеки должны были иметь точные версии, и некоторые вещи не работали с новейшим мокко. После этого вы обнаружите, что он генерирует отдельный отчет для каждого файла спецификации. Или, если вам нужно перезаписать, сохраняется только отчет для последнего файла спецификации, который он запускал. Таким образом, вы отключите этот флаг, и когда вы получите отдельный отчет для каждого файла спецификации, вам понадобится дополнительная зависимость, которая их объединяет. Но тогда вам нужно выполнить очистку вручную. И после всего этого вы получите комментарий, что они не так хороши, как Selenium или любое другое решение для тестирования, которое вы используете. И именно здесь на помощь приходит пакет cypress-dashboard.

Установка

Для создания этих отчетов вам понадобится всего одна зависимость - cypress-dashboard.

npm установить cypress-dashboard

Настройка

При запуске тестов Cypress одним из многих генерируемых файлов является cypress.json. Чтобы отчеты создавались после установки пакета, все, что вам нужно сделать, это добавить cypress-dashboard в качестве репортера.

{
  "reporter": "cypress-dashboard"
}

Есть несколько возможных вариантов, которые можно настроить, но здесь я остановлюсь только на одном. Это местоположение отчета. Если вы ничего не настроили, по умолчанию используется папка cypress-dashboard, созданная в корневой папке вашего проекта. Если вы хотите изменить это, вы можете установить свойство reportDir в разделе reporterOptions.

{  
  "reporter": "cypress-dashboard",
  "reporterOptions": {
    "reportDir": "cypress/reports"
  }
}

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

Заключение

Как разработчик, я не хочу тратить много времени или иметь кучу хлопот с настройкой отчетов. Приложение нуждается в тестировании, но его настройка должна быть простой. Это причина, по которой я создал эту библиотеку, и это цель пакета cypress-dashboard.

Следуйте за мной в Twitter, LinkedIn или GitHub.