cypress-json-html-reporter

A Cypress Mocha reporter that generates timestamped JSON test results and converts them into rich, interactive HTML reports — featuring dashboards, error summaries, pass/fail charts, screenshot embedding, and execution history.

Features

• ✅ Generates a timestamped JSON file per test run
• 📊 Converts JSON → a self-contained interactive HTML report
• 🗂️ Suite-level and test-level pass/fail breakdowns
• 🖼️ Screenshot embedding support
• 🖥️ Console log capture support
• 📦 Works with Cypress v12+

Installation

npm install cypress-json-html-reporter --save-dev

Usage

Step 1 — Configure the reporter in cypress.config.js

const { defineConfig } = require("cypress");
const { setupJsonHtmlReporterEvents } = require("cypress-json-html-reporter/plugin");

module.exports = defineConfig({
  e2e: {
    reporter: "cypress-json-html-reporter",
    reporterOptions: {
      outputFile: "reports/test-report.json",
      screenshotOption: "always"
    },
    video: true,
    setupNodeEvents(on, config) {
      // Connect the reporter's plugin events
      setupJsonHtmlReporterEvents(on, config);
    },
  },
});

Step 2 — Configure the Support File

To reliably capture screenshots for passing tests along with Cypress's native failure screenshots, add this rule to cypress/support/e2e.js:

// Import the global afterEach hook
import 'cypress-json-html-reporter/support';

Reporter Options:

| Option | Default | Description | |--------|---------|-------------| | outputFile | "test-report.json" | Path prefix for the output JSON files |

Step 2 — Run your Cypress tests

npx cypress run

This writes a timestamped JSON file such as:

reports/test-report-Tue_03_Mar_2026_14-30-00_GMT.json

Step 3 — Generate the HTML report

Use the built-in CLI to convert all JSON files in a folder into a single HTML report:

npx cypress-json-html-reporter generate-html <inputFolder> <outputFile> [historyFile]

Example:

npx cypress-json-html-reporter generate-html reports reports/test-report.html

Step 4 — Open the report

Open reports/test-report.html in any browser — it's fully self-contained (no server needed).

npm Scripts (recommended)

Add these to your package.json:

"scripts": {
  "test": "cypress run",
  "report": "cypress-json-html-reporter generate-html reports reports/test-report.html",
  "test:full": "npm run test && npm run report"
}

Programmatic API

const { CypressJSONReporter, HTMLReportGenerator } = require("cypress-json-html-reporter");

CypressJSONReporter

A Mocha reporter class. Used automatically when set as the reporter in cypress.config.js.

HTMLReportGenerator

const generator = new HTMLReportGenerator("reports/test-report.html", "reports/history.json");
await generator.convertJSONFolderToHTML("reports");

Report Screenshots

The HTML report includes:

• Dashboard — total/passed/failed counts with doughnut charts
• Test Details — filterable/sortable table with timestamps, status, and errors