cucumber-html-reporter
Advanced tools
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.
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);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.
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.
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.
Generate Cucumber HTML reports with pie charts
Available HTML themes:
['bootstrap', 'hierarchy', 'foundation', 'simple']
For future updates, follow the twitter handle
npm install cucumber-html-reporter --save-dev
Note: Install cucumber-html-reporter version <0.4.0 for node version <0.12
Provide Cucumber JSON report file created from your framework and this module will create pretty HTML reports. Choose your best suitable HTML theme and dashboard on your CI with available HTML reporter plugins.
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,
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);
//more info on `metadata` is available in `options` section below.
//to generate consodilated report from multi-cucumber JSON files, please use `jsonDir` option instead of `jsonFile`. More info is available in `options` section below.
Please look at the
optionssection below for more options
Plugin the above code to the cucumber's
AfterFeatureshook 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
optionsas shown here
themeAvailable: ['bootstrap', 'hierarchy', 'foundation', 'simple']
Type: String
Select the Theme for HTML report.
N.B: Hierarchy theme is best suitable if your features are organized under features-folder hierarchy. Each folder will be rendered as a HTML Tab. It supports up to 3-level of nested folder hierarchy structure.
jsonFileType: String
Provide path of the Cucumber JSON format file
jsonDirType: String
If you have more than one cucumber JSON files, provide the path of JSON directory. This module will create consolidated report of all Cucumber JSON files.
e.g. jsonDir: 'test/reports' //where reports directory contains valid *.json files
N.B.: jsonFile takes precedence over jsonDir. We recommend to use either jsonFile or jsonDir option.
outputType: String
Provide HTML output file path and name
reportSuiteAsScenariosType: 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.
launchReportType: Boolean
Automatically launch HTML report at the end of test suite
true: Launch HTML report in the default browser
false: Do not launch HTML report at the end of test suite
ignoreBadJsonFileType: Boolean
Report any bad json files found during merging json files from directory option.
true: ignore any bad json files found and continue with remaining files to merge.
false: Default option. Fail report generation if any bad files found during merge.
nameType: String (optional)
Custom project name. If not passed, module reads the name from projects package.json which is preferable.
brandTitleType: String (optional)
Brand Title is the brand of your report, e.g. Smoke Tests Report, Acceptance Test Report etc as per your need. If not passed, it will be displayed as "Cucumberjs Report"
storeScreenShotsType: Boolean
Default: undefined
true: Stores the screenShots to the default directory. It creates a directory 'screenshot' if does not exists.
false or undefined : Does not store screenShots but attaches screenShots as a step-inline images to HTML report
metadataType: JSON (optional)
Default: undefined
Print more data to your report, such as browser info, platform, app info, environments etc. Data can be passed as JSON key-value pair. Reporter will parse the JSON and will show the Key-Value under Metadata section on HTML report. Checkout the below preview HTML Report with Metadata.
Pass the Key-Value pair as per your need, as shown in below example,
metadata: {
"App Version":"0.3.2",
"Test Environment": "STAGING",
"Browser": "Chrome 54.0.2840.98",
"Platform": "Windows 10",
"Parallel": "Scenarios",
"Executed": "Remote"
}
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'), 'image/png');
}
Attach plain-texts/data to HTML report to help debug/review the results
scenario.attach('test data goes here');
Attach JSON to HTML report
scenario.attach(JSON.stringify(myJsonObject, undefined, 4));
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.
FAQs
Generates Cucumber HTML reports in three different themes
The npm package cucumber-html-reporter receives a total of 333,306 weekly downloads. As such, cucumber-html-reporter popularity was classified as popular.
We found that cucumber-html-reporter demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A Stanford study reveals 9.5% of engineers contribute almost nothing, costing tech $90B annually, with remote work fueling the rise of "ghost engineers."
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.