multiple-cucumber-html-reporter

KO | EN

gitlite — search

#javascript #hacktoberfest #react #ai #typescript #llm #android #deep-learning #linux #macos #vue #pytorch #ios #openai

multiple-cucumber-html-reporter

(★ 281)

Generate beautiful Cucumber HTML reports

File Explorer

Download Latest Version (.zip)

- - --bug-report.md
  - --documentation.md
  - --feature-request.md
  - --question.md
- - check-commit.yml
  - codeql.yml
  - pr-labeler.yml
  - release.yml
  - test-cypress.yml
  - test-docs.yml
  - test-playwright.yml
  - test-wdio.yml
  - test.yml
- CODE_OF_CONDUCT.md
- CODEOWNERS
- CONTRIBUTING.md
- dependabot.yml
- FUNDING.yml
- labeler.yml
- PULL_REQUEST_TEMPLATE.md
- SECURITY.md
- stale.yml
- commit-msg
- pre-commit
- launch.json
- settings.json
- components.json
- next.config.mjs
- package.json
- postcss.config.mjs
- proxy.ts
- source.config.ts
- tsconfig.json
- - .cypress-cucumber-preprocessorrc.json
  - .multiple-cucumber-html-reporter.ts
  - cypress-runner.ts
  - cypress.config.ts
  - package.json
  - README.md
  - tsconfig.json
- - .multiple-cucumber-html-reporter.yml
  - cucumber.json
  - package.json
  - README.md
  - tsconfig.json
- - package.json
  - README.md
  - tsconfig.json
  - wdio-browserstack.conf.ts
  - wdio-cc-formatter.conf.ts
  - wdio-cc-reporter.conf.ts
  - wdio-shared.conf.ts
- - base.json
  - next-js.json
  - package.json
- - collect-jsons.ts
  - generate-report.ts
  - logger.ts
  - report-helpers.ts
  - run-build.ts
  - types.ts
- package.json
- tsconfig.json
.gitignore
.release-it.json
biome.json
CHANGELOG.md
commitlint.config.ts
lerna.json
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<h2>
    Multiple Cucumber HTML Reporter
  </h2>

<h3>
    Generate beautiful, interactive and customizable HTML reports for Cucumber runs.
  </h3>

---

## 🌟 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

```shell
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:

```json
{
  "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

```shell
mchr
```

That's it! No separate script needed. See the [CLI documentation](https://multiple-cucumber-html-reporter.vercel.app/docs/latest/cli) 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:

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

```typescript
// 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',
  },
});
```

Check out the [examples](./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](https://multiple-cucumber-html-reporter.vercel.app/docs/latest)

---

## 🖼️ Feature Showcase

### Feature List Page

![Feature List Page](https://raw.githubusercontent.com/WasiqB/multiple-cucumber-html-reporter/main/docs/public/images/feature-list-page.jpeg)

### Feature Details Page

![Feature Details Page](https://raw.githubusercontent.com/WasiqB/multiple-cucumber-html-reporter/main/docs/public/images/feature-detail-page.jpeg)

---

## 🤝 Contributing & Community

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

- **Contributing**: Read our [Contributing Guide](https://multiple-cucumber-html-reporter.vercel.app/docs/latest/contributing) to get started.
- **Security**: Please report vulnerabilities via our [Security Policy](./.github/SECURITY.md).
- **Code of Conduct**: We expect all contributors to follow our [Code of Conduct](./.github/CODE_OF_CONDUCT.md).

### 💬 Support & Talk

- **Discord**: [Join our Discord server](https://discord.gg/d6rfHkSDjc) for real-time support.
- **GitHub Issues**: [Report bugs or request features](https://github.com/WasiqB/multiple-cucumber-html-reporter/issues).
- **GitHub Discussions**: [Join our GitHub Discussions](https://github.com/WasiqB/multiple-cucumber-html-reporter/discussions).
- **Project Milestones**: [View complete Roadmap in Project Milestones](https://github.com/WasiqB/multiple-cucumber-html-reporter/milestones).
- **Follow project updates**: Follow the latest project updates on [X (formerly Twitter)](https://x.com/WasiqBhamla) and [LinkedIn](https://www.linkedin.com/in/wasiqbhamla).

## ❤️ Support the project

If you find this project useful, please consider [sponsoring the maintainer](https://github.com/sponsors/WasiqB). 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

![Multiple Cucumber HTML Reporter Repo activity](https://repobeats.axiom.co/api/embed/b0964ed36e8c350255ca9b3f357459af82d712a4.svg "Repobeats analytics image")

## ⚖️ License

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

---

<p align="center">Built with ❤️ by <a href="https://wasiqbhamla.com/">Wasiq Bhamla</a></p>

multiple-cucumber-html-reporter

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

multiple-cucumber-html-reporter

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README