cucumber-html-reporter

What is cucumber-html-reporter?

The cucumber-html-reporter npm package is used to generate HTML reports for Cucumber test results. It provides a way to visualize the results of your Cucumber tests in a more readable and user-friendly format.

What are cucumber-html-reporter's main functionalities?

Generate HTML Report

This feature allows you to generate an HTML report from a Cucumber JSON report. The options object specifies the theme, input JSON file, output HTML file, and additional metadata for the report.

const reporter = require('cucumber-html-reporter');

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'cucumber_report.html',
  reportSuiteAsScenarios: true,
  launchReport: true,
  metadata: {
    'App Version': '0.3.2',
    'Test Environment': 'STAGING',
    'Browser': 'Chrome  54.0.2840.98',
    'Platform': 'Windows 10',
    'Parallel': 'Scenarios',
    'Executed': 'Remote'
  }
};

reporter.generate(options);

Custom Metadata

This feature allows you to add custom metadata to your HTML report. The metadata can include information such as the app version, test environment, browser, platform, and execution details.

const reporter = require('cucumber-html-reporter');

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'cucumber_report.html',
  reportSuiteAsScenarios: true,
  launchReport: true,
  metadata: {
    'App Version': '1.0.0',
    'Test Environment': 'PRODUCTION',
    'Browser': 'Firefox  89.0',
    'Platform': 'macOS Big Sur',
    'Parallel': 'Scenarios',
    'Executed': 'Local'
  }
};

reporter.generate(options);

Launch Report Automatically

This feature allows you to automatically launch the generated HTML report in the default web browser after it is created. This is useful for quickly viewing the test results without manually opening the file.

const reporter = require('cucumber-html-reporter');

const options = {
  theme: 'bootstrap',
  jsonFile: 'cucumber_report.json',
  output: 'cucumber_report.html',
  reportSuiteAsScenarios: true,
  launchReport: true
};

reporter.generate(options);

Other packages similar to cucumber-html-reporter

cucumber-html-reporter

The cucumber-html-reporter package is a popular choice for generating HTML reports from Cucumber JSON reports. It offers a variety of themes and customization options, making it easy to create visually appealing and informative reports.

multiple-cucumber-html-reporter

The multiple-cucumber-html-reporter package is another option for generating HTML reports from Cucumber JSON reports. It supports multiple JSON files and provides additional features such as embedding screenshots and displaying step definitions. It is more feature-rich compared to cucumber-html-reporter.

cucumber-html-reporter

The cucumber-html-reporter package is a popular choice for generating HTML reports from Cucumber JSON reports. It offers a variety of themes and customization options, making it easy to create visually appealing and informative reports.

README

cucumber-html-reporter

Generate Cucumber HTML reports with pie charts

Available HTML themes: ['bootstrap', 'foundation', 'simple']

Preview of HTML Reports

1. Bootstrap Theme Reports with Pie Chart
2. Foundation Theme Reports
3. Simple Theme Reports

Snapshot of Bootstrap Report

Install

npm install cucumber-html-reporter --save-dev

Usage

Example of bootstrap theme:

var reporter = require('cucumber-html-reporter');

var options = {
        theme: 'bootstrap',
        jsonFile: 'test/report/cucumber_report.json',
        output: 'test/report/cucumber_report.html',
        reportSuiteAsScenarios: true
    };

    reporter.generate(options);

Plugin the above code to the cucumber's AfterFeatures hook as shown in test/features/step_definitions/hooks and pick the theme you are interested in.

This module converts Cucumber's JSON format to HTML reports. In order to generate JSON formats, run the Cucumber to create the JSON format and pass the file name to the formatter as shown below,

$ cucumberjs test/features/ -f json:test/report/cucumber_report.json

Multiple formatter are also supported,

$ cucumberjs test/features/ -f pretty -f json:test/report/cucumber_report.json

Are you using cucumber with other frameworks or running cucumber-parallel? Pass relative path of JSON file to the options as shown here

Options

theme

Available: ['bootstrap', 'foundation', 'simple'] Type: String

Select the Theme for HTML report.

jsonFile

Type: String

Provide path of the Cucumber JSON format file

output

Type: String

Provide HTML output file path and name

reportSuiteAsScenarios

Type: Boolean Supported in the Bootstrap theme.

true: Reports total number of passed/failed scenarios as HEADER.

false: Reports total number of passed/failed features as HEADER.

Attach Screenshots to HTML report

Capture and Attach screenshots to the Cucumber Scenario and HTML report will render the screenshot image

  
  driver.takeScreenshot().then(function (buffer) {
    return scenario.attach(new Buffer(buffer, 'base64').toString('binary'), 'image/png');
  }
  

Attach Plain Text to HTML report

Attach plain-texts/data to HTML report to help debug/review the results

 
  scenario.attach('test data goes here');
 

Credits

Credit to the developers of grunt-cucumberjs for developing pretty HTML reporting. HTML reporting is extracted from the grunt task. Thanks to all the contributors for making HTML Reporting available to the wider audiences of cucumber-js community.

Changelog

0.1.5 (Jul-05-2016)

Enhancements

• Show feature description on report

• Updated README

Bug fixes

• Fix bug when cucumber error message has kind of html tags as a string, e.g. <object> is not defined.