Mochawesome reporter

Mochawesome — это расширенный репортер для тестов, выполненных с использованием Cypress и Mocha. Он формирует наглядные HTML- и JSON-отчёты с детальной информацией о тестовых сессиях, включая скриншоты и видео.

Для установки используется npm:

npm install mochawesome mochawesome-merge mochawesome-report-generator --save-dev

После установки необходимо настроить Cypress для использования Mochawesome. В файле cypress.config.js или cypress.json (в зависимости от версии Cypress) добавляется конфигурация репортера:

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

module.exports = defineConfig({
  reporter: "mochawesome",
  reporterOptions: {
    reportDir: "cypress/reports",
    overwrite: false,
    html: true,
    json: true,
    charts: true,
    embeddedScreenshots: true,
    inlineAssets: true
  }
});

Ключевые параметры:

  • reportDir — директория для хранения отчётов.
  • overwrite — разрешение на перезапись отчётов.
  • html и json — форматы отчёта.
  • charts — отображение графиков прогресса тестов.
  • embeddedScreenshots — включение скриншотов прямо в отчёт.
  • inlineAssets — инлайн ресурсов для независимого HTML-файла.

Генерация отчётов при запуске Cypress

При запуске тестов командой:

npx cypress run

Mochawesome автоматически создаёт JSON-отчёты. Для генерации удобного HTML-отчёта применяется mochawesome-report-generator или mochawesome-merge:

npx mochawesome-merge cypress/reports/*.json > cypress/reports/report.json
npx marge cypress/reports/report.json

После этого формируется HTML-файл с интерактивной визуализацией тестов, графиками и скриншотами.

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

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

module.exports = defineConfig({
  reporter: "mochawesome",
  reporterOptions: {
    reportDir: "cypress/reports",
    overwrite: false,
    html: true,
    json: true,
    embeddedScreenshots: true
  },
  screenshotsFolder: "cypress/screenshots",
  video: true,
  videosFolder: "cypress/videos"
});

Использование embeddedScreenshots: true позволяет встроить скриншоты прямо в HTML-отчёт, делая его наглядным и удобным для анализа падений тестов.

Настройка многопоточного запуска и объединение отчётов

При параллельном запуске тестов или запуске на CI удобно объединять отчёты нескольких тест-ранов. Для этого применяется mochawesome-merge:

npx mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json
npx marge cypress/reports/merged-report.json

Это создаёт единый HTML-отчёт с полным набором данных:

  • Время выполнения каждого теста.
  • Статус теста (passed, failed, skipped).
  • Скриншоты и видео.
  • Графики успешности тестов.

Использование Mochawesome с CI/CD

Mochawesome хорошо интегрируется с системами CI/CD, такими как Jenkins, GitHub Actions, GitLab CI. Достаточно добавить шаги генерации отчётов после завершения Cypress-тестов и публиковать HTML- или JSON-отчёты как артефакты сборки.

Пример для GitHub Actions:

- name: Run Cypress tests
  run: npx cypress run

- name: Merge Mochawesome reports
  run: |
    npx mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json
    npx marge cypress/reports/merged-report.json

- name: Upload report
  uses: actions/upload-artifact@v3
  with:
    name: Cypress Report
    path: cypress/reports/mochawesome.html

Настройка кастомных полей и тегов

Mochawesome позволяет добавлять кастомные поля и метки, которые помогают фильтровать и группировать тесты в отчёте. В тестах это делается через Mocha hooks:

describe("Авторизация пользователя", { tags: ["smoke", "auth"] }, () => {
  it("успешный вход с валидными данными", () => {
    cy.visit("/login");
    cy.get("#username").type("user");
    cy.get("#password").type("password");
    cy.get("button[type=submit]").click();
    cy.contains("Добро пожаловать").should("exist");
  });
});

Эти теги можно отобразить в отчёте, а при необходимости фильтровать запуск тестов по группам.

Практические рекомендации

  • Использовать отдельную директорию для отчётов для каждой сборки, чтобы избежать перезаписи предыдущих результатов.
  • Включать embeddedScreenshots и charts, чтобы отчёты были наглядными и информативными.
  • Для CI/CD лучше объединять JSON-отчёты через mochawesome-merge перед генерацией HTML, особенно при параллельном выполнении.
  • Использовать кастомные теги и метаданные, чтобы облегчить анализ больших наборов тестов.
  • Хранить отчёты как артефакты сборки для последующего анализа и аудита тестирования.

Mochawesome превращает стандартные результаты тестов Cypress в визуально удобные отчёты, упрощает диагностику ошибок и интеграцию с процессами автоматического тестирования.

Оглавление