README.md

August 8, 2026 · View on GitHub

Multiple Cucumber HTML Reporter

Generate beautiful, interactive and customizable HTML reports for Cucumber runs.

🌟 Why this reporter?

Multiple Cucumber HTML Reporter is a robust reporting module that transforms standard Cucumber JSON output into stunning, feature-rich HTML reports. Unlike generic reporters, it is designed for scale and clarity.

✨ Key Features

📊 Interactive Dashboard: Scored overview of all tested features and scenarios.
🌓 Dark Mode Support: Built-in support for light and dark themes for better accessibility.
🔄 Multiple Runs: Consolidate multiple runs of the same feature (e.g., across different browsers or devices).
📱 Rich Metadata: Automatically display browser, device, platform, and app version details.
🔍 Advanced Filtering: Easily search, filter, and sort through large test suites.
🎨 Fully Customizable: Add custom data blocks, brand colors, logo, footer, and additional CSS styles.
⚡ Built for Scale: Streams report generation, so suites with heavy screenshot/video attachments don't run out of memory.
🖥️ CLI Tool (new in v4.2.0): Generate reports instantly with the mchr CLI — no scripting required.

🚀 Quick Start

Important

v4.2.0+ introduces the mchr CLI tool — the recommended way to generate reports. No scripting needed!

Option A: CLI Tool (Recommended — v4.2.0+)

1. Install globally

npm install multiple-cucumber-html-reporter --global
# or
pnpm add multiple-cucumber-html-reporter --global

2. Create a config file

Create a .multiple-cucumber-html-reporter.json file in your project root:

{
  "jsonDir": "./path-to-your-json-output/",
  "reportPath": "./path-where-the-report-needs-to-be/",
  "pageTitle": "My Project Report",
  "reportName": "My Project",
  "displayDuration": true,
  "displayReportTime": true
}

Tip

Run mchr for the first time without a config file to launch an interactive onboarding wizard that creates the config file for you.

3. Generate the report

mchr

That's it! No separate script needed. See the CLI documentation for all available config options.

Option B: Programmatic API

If you prefer to generate the report from a Node.js script, install locally and call generate() directly:

pnpm add multiple-cucumber-html-reporter --save-dev

// generate-report.ts
import { generate } from 'multiple-cucumber-html-reporter';

generate({
  jsonDir: "./path-to-your-json-output/",
  reportPath: "./path-where-the-report-needs-to-be/",
  metadata: {
    browser: {
      name: "chrome",
      version: "latest",
    },
    device: "Local test machine",
    executionPlatform: 'local',
    platform: {
      name: "osx",
      version: "Sonoma",
    },
  },
  customData: {
    projectName: 'WebDriverIO sample project',
    release: '1.2.0',
    testCycle: 'Cycle 1',
    buildNumber: 'Build 1',
    environment: 'production',
    ciPipeline: 'GitHub Actions',
  },
});