HTML отчеты

Cypress предоставляет мощный механизм для генерации отчетов о тестировании, которые позволяют отслеживать результаты выполнения тестов, анализировать ошибки и визуализировать статистику. Одним из наиболее популярных форматов являются HTML отчеты, благодаря наглядности и удобству использования.

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

Для генерации HTML отчетов в Cypress обычно используют плагины, такие как mochawesome. Он интегрируется с Mocha, на которой основан Cypress, и позволяет выводить подробные, красочные отчеты.

  1. Установка зависимостей:
npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
  • mochawesome — основной плагин для генерации JSON и HTML отчетов.
  • mochawesome-merge — инструмент для объединения нескольких JSON файлов в один.
  • mochawesome-report-generator — генератор HTML отчетов из JSON.
  1. Конфигурация Cypress

В файле cypress.config.js или cypress.json настраивается reporter:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  reporter: "mochawesome",
  reporterOptions: {
    reportDir: "cypress/reports",
    overwrite: false,
    html: true,
    json: true,
    timestamp: "mmddyyyy_HHMMss"
  },
  e2e: {
    setupNodeEvents(on, config) {
      // дополнительные события можно добавить здесь
    }
  }
});
  • reportDir — каталог, где будут сохраняться отчеты.
  • overwrite: false — сохраняет отчеты с уникальными именами.
  • html: true и json: true — генерируются оба формата, что удобно для последующего объединения.

Генерация отчета после тестов

После выполнения тестов Cypress создаёт JSON файлы для каждого запуска. Для формирования одного HTML отчета используется mochawesome-merge:

npx mochawesome-merge cypress/reports/*.json > cypress/reports/report.json
npx marge cypress/reports/report.json -f report -o cypress/reports/html
  • Первый шаг объединяет все JSON файлы в один.
  • Второй шаг создаёт HTML отчет в указанной папке.

Структура HTML отчета

HTML отчет включает несколько важных разделов:

  • Общая информация: дата, время, количество пройденных и проваленных тестов.
  • Статистика по тестам: количество успешных, неудачных и пропущенных тестов.
  • Дерево тестов: вложенная структура тестов и describe блоков.
  • Детали ошибок: трассировка стека, скриншоты, если они подключены.
  • Скриншоты и видео: при настройке Cypress на запись скриншотов и видео, они автоматически интегрируются в отчет.

Интеграция скриншотов

Для улучшенной наглядности ошибок часто используется автоматическое сохранение скриншотов:

Cypress.Screenshot.defaults({
  capture: 'runner'
});

В отчете под каждой ошибкой будет ссылка на соответствующий скриншот, что облегчает анализ падений тестов.

Настройка CI/CD

HTML отчеты удобно использовать в пайплайнах CI/CD. Например, в Jenkins или GitLab CI можно:

  1. После прохождения тестов сохранять HTML отчет как артефакт.
  2. Отправлять отчет в облачные хранилища или систему уведомлений.
  3. Использовать отчеты для анализа стабильности тестов, выявления flaky-тестов и отслеживания тенденций.

Пример для GitLab CI:

cypress_tests:
  stage: test
  script:
    - npx cypress run
    - npx mochawesome-merge cypress/reports/*.json > cypress/reports/report.json
    - npx marge cypress/reports/report.json -f report -o cypress/reports/html
  artifacts:
    paths:
      - cypress/reports/html
    when: always

Пользовательская кастомизация

Mochawesome позволяет изменять оформление HTML отчета, добавлять метки, категории тестов и теги. Это удобно при больших проектах с сотнями тестов. Примеры настроек:

reporterOptions: {
  reportDir: "cypress/reports",
  reportTitle: "Автоматизированные тесты проекта",
  inlineAssets: true,
  charts: true,
  code: true
}
  • reportTitle — заголовок отчета.
  • inlineAssets — включает CSS и JS внутрь HTML для удобного обмена.
  • charts — строит диаграммы успешных/неуспешных тестов.
  • code — отображает исходный код тестов в отчете.

Преимущества HTML отчетов

  • Наглядность — отчеты легко читать и анализировать.
  • Детализация — полный стек ошибок, скриншоты и видео.
  • Совместимость с CI/CD — легко интегрируются и сохраняются как артефакты.
  • Удобство командной работы — разработчики, тестировщики и менеджеры могут использовать один и тот же отчет.

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

Оглавление