multiple-cucumber-html-reporter

---

🌟 Why this reporter?

Multiple Cucumber HTML Reporter is a robust reporting module that transforms standard Cucumber Messages NDJSON output and 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.
• 🖥️ CLI Tool (new since v4.2.0): Generate reports instantly with the mchr CLI — no scripting required.
• 🌍 Localized Reports: Display report labels in English, Spanish, French, Portuguese, or Arabic, with right-to-left layout for Arabic.
• 📨 Cucumber Messages NDJSON Support: Ingest standard Cucumber Messages NDJSON format line-by-line via the useCucumberMessages option or the CLI --messages (-m) flag.
• 🤝 Language independent: Generate Cucumber report using any Cucumber language binding with any frameworks like Selenium WebDriver, Playwright, WebDriverIO, etc using Java, Typescript, Javascript, and other languages.
• 📬 Email-able Report: Generate a separate Email-able report which you can send to the stakeholders.
• 🔄 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.

---

🚀 Quick Start

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",
  "language": "fr",
  "displayDuration": true,
  "humanReadableDuration": 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. (supports JSON, YAML, JavaScript, and TypeScript formats)

3. Generate the report

mchr
# OR, generate report with Emailable report
mchr --email
# OR, read Cucumber Messages NDJSON files instead of legacy JSON format
mchr --messages
# (or shorthand: mchr -m)

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

Set language to en (default), es, fr, or ar to choose the language for static report labels. Arabic reports use a right-to-left layout. The same option is available in the programmatic API, and the CLI accepts --language (or --lang) to override the configured language.

mchr --language es

---

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/",
  useCucumberMessages: false, // Set to true to ingest Cucumber Messages NDJSON (*.ndjson)
  emailReport: true,
  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',
  },
});

Check out the examples folder for integration with frameworks like Cypress.

---

📖 In-Depth Documentation

Looking for advanced configurations, framework integrations (WebdriverIO, Cypress, etc.), or FAQs? Visit our comprehensive documentation site:

👉 Read the Full Documentation

---

🖼️ Feature Showcase

Localized Reports

Report labels can be displayed in English, Spanish, French, Portuguese, or Arabic. Arabic uses a right-to-left layout. See the language option documentation for configuration details.

See the localized report screenshots in the documentation for examples.

Feature List Page

Feature Details Page

Emailable Report

---

🤝 Contributing & Community

Contributions are what make the open source community such an amazing place to learn, inspire, and create.

• Contributing: Read our Contributing Guide to get started.
• Security: Please report vulnerabilities via our Security Policy.
• Code of Conduct: We expect all contributors to follow our Code of Conduct.

💬 Support & Talk

• Discord: Join our Discord server for real-time support.
• GitHub Issues: Report bugs or request features.
• GitHub Discussions: Join our GitHub Discussions.
• Project Milestones: View complete Roadmap in Project Milestones.
• Follow project updates: Follow the latest project updates on X (formerly Twitter) and LinkedIn.

❤️ Support the project

If you find this project useful, please consider sponsoring the maintainer. Your support helps keep the project maintained and improved!

🙏🏻 Open Source Supporter

Following are the awesome supporters to the project who has sponsored their applications paid license:

💗 Repo Activity

⚖️ License

Distributed under the MIT License. See LICENSE for more information.

---

Built with ❤️ by Wasiq Bhamla