multiple-cucumber-html-reporter
Advanced tools
Generate beatifull cucumberjs reports for multiple instances (browsers / devices)
The multiple-cucumber-html-reporter is an npm package that generates customizable HTML reports for Cucumber test results. It allows users to create detailed and visually appealing reports from Cucumber JSON output, making it easier to analyze test results.
Generate HTML Report
This feature allows you to generate an HTML report from Cucumber JSON files. You can specify the directory containing the JSON files and the output path for the report. Additionally, you can add metadata such as browser, device, and platform information.
const report = require('multiple-cucumber-html-reporter');
report.generate({
jsonDir: 'path/to/json/files',
reportPath: 'path/to/output/report',
metadata: {
browser: {
name: 'chrome',
version: '60'
},
device: 'Local test machine',
platform: {
name: 'ubuntu',
version: '16.04'
}
}
});Custom Metadata
This feature allows you to add custom metadata to your reports. You can specify details about the browser, device, and platform used during testing, which will be displayed in the generated report.
const report = require('multiple-cucumber-html-reporter');
report.generate({
jsonDir: 'path/to/json/files',
reportPath: 'path/to/output/report',
metadata: {
browser: {
name: 'firefox',
version: '89'
},
device: 'Remote test machine',
platform: {
name: 'windows',
version: '10'
}
}
});Custom Report Title
This feature allows you to set a custom title for your HTML report. By specifying the 'reportName' option, you can personalize the title that appears at the top of the generated report.
const report = require('multiple-cucumber-html-reporter');
report.generate({
jsonDir: 'path/to/json/files',
reportPath: 'path/to/output/report',
reportName: 'My Custom Report Title'
});The cucumber-html-reporter package generates HTML reports from Cucumber JSON output. It offers similar functionality to multiple-cucumber-html-reporter but with fewer customization options. It is simpler to use but may not provide as detailed or customizable reports.
The cucumber-html package is another tool for generating HTML reports from Cucumber JSON output. It focuses on providing a straightforward and easy-to-read report. While it is less feature-rich compared to multiple-cucumber-html-reporter, it is a good option for users who need basic reporting capabilities.
The cucumber-junit package generates JUnit XML reports from Cucumber JSON output. While it does not produce HTML reports, it is useful for integrating Cucumber test results with CI/CD pipelines that require JUnit format. It serves a different purpose compared to multiple-cucumber-html-reporter but is valuable for automated testing workflows.
Multiple Cucumber HTML Reporter is a reporting module for Cucumber to parse the JSON output to a beautiful report. The difference between all the other reporting modules on the market is that this module has:
A sample can be found here
Install this module locally with the following command:
npm install multiple-cucumber-html-reporter
Save to dependencies or dev-dependencies:
npm install multiple-cucumber-html-reporter --save
npm install multiple-cucumber-html-reporter --save-dev
Multiple Cucumber HTML Reporter works with CucumberJS 1.3.3 or lower. We are currently working on the support for CucumberJS 2.1.0 or higher.
Multiple Cucumber HTML Reporter transforms the Cucumber JSON output to a beautiful report. In order to let this happen add the piece of code that is placed below to CucumberJS AfterFeatures-hook.
const report = require('multiple-cucumber-html-reporter');
report.generate({
jsonDir: './path-to-your-json-output/',
reportPath: './path-where-the-report-needs-to-be/'
});
IMPORTANT:
Make sure that, when you generate the JSON files with Cucumber, each file will have a UNIQUE name. If you don't provide a unique name Cucumber will override the JSON files.
Advice is to use for example the name of the feature, the name of the browser / device it is running on AND a unix timestamp with for example this
(new Date).getTime();. This will result in something like thisname_of_feature.chrome.1495298685509.json
jsonDirStringThe directory that will hold all the generated JSON files, relative from where the script is started.
N.B.: If you use a npm script from the command line, like for example npm run generate-report the jsonDir will be relative from the path where the script is executed. Executing it from the root of your project will also search for the jsonDir from the root of you project.
reportPathStringThe directory in which the report needs to be saved, relative from where the script is started.
N.B.: If you use a npm script from the command line, like for example npm run generate-report the reportPath will be relative from the path where the script is executed. Executing it from the root of your project will also save the report in the reportPath in the root of you project.
openReportInBrowserbooleanIf true the report will automatically be opened in the default browser of the operating system.
saveCollectedJSONbooleanThis module will first merge all the JSON-files to 1 file and then enrich it with data that is used for the report. If saveCollectedJSON :true the merged JSON AND the enriched JSON will be saved in the reportPath. They will be saved as:
merged-output.jsonenriched-output.jsonThe report can also show on which browser / device a feature has been executed. It is shown on the featurs overview in the table as well as on the feature overview in a container.
To be able to see this you will need to add the following to the Cucumber JSON before you save it.
// This represents the Cucumber JSON file that has be retrieved
const cucumberJSON;
const metadata = "metadata": {
"browser": {
"name": "chrome",
"version": "58"
},
"device": "string",
"platform": {
"name": "osx",
"version": "10.12"
}
}
// Add it with for example
cucumberJSON[0].metadata = metadata;
// Now save the file to the disk
metadata.browser.namestringinternet explorer | edge | chrome | firefox | safariIf no correct value is provided the
?-icon with the textnot knownis shown
metadata.browser.versionstringe.g.: The version of the browser, this can be added manual or retrieved during the execution of the tests to get the exact version number.
If no correct value is provided the
?-icon with the textnot knownis shown
metadata.devicestringe.g.: A name that represents the type of device. For example, if you run it on a virtual machine, you can place it here Vitrual Machine, or the name of the mobile, like for example iPhone 7 Plus.
If no correct value is provided the
?-icon with the textnot knownis shown
metadata.platform.namestringwindows | osx | linux | ubuntu | android | iosIf no correct value is provided the
?-icon with the textnot knownis shown
metadata.platform.versionstringe.g.: The version of the platform
If no correct value is provided the
?-icon with the textnot knownis shown
It could be that the name of the Cucumber JSON file that has been saved is not unique (enough).
My advice is to use for example:
(new Date).getTime();This will result in something like this name_of_feature.chrome.1495298685509.json.
The advantage of this is that when you look at the folder where the Cucumber JSON-files are saved you can see:
not known or not the correct iconsThere could be 2 causes:
metadata.browser.name or metadata.platform.name can't be mapped to the right iconTo fix this see the part about Metadata and check the possible values.
You can attach screenshots at any time to a Cucumber JSON file. Just create a Cucumber scenario-hook that will handle this. You can add them during running or when a scenario failed.
Depending on the framework you are using, you can add a screenshot to the report like this
return driver.takeScreenshot()
.then(function (buffer) {
const decodedImage = new Buffer(screenshot.replace(/^data:image\/png;base64,/, ''), 'base64');
scenario.attach(decodedImage, 'image/png');
}
You can attach plain-text / data at any time to a Cucumber JSON file to help debug / review the results. You can add them during running or when a scenario failed.
scenario.attach('place here what you want to show in the report');
You can attach JSON at any time to a Cucumber JSON file. You can add them during running or when a scenario failed.
scenario.attach(JSON.stringify(yourJsonObject));
The Changelog can be found here
How to contribute can be found here
0.1.0 (2017-05-21)
Multiple Cucumer HTML ReporterFAQs
Generate beautiful Cucumber.js reports for multiple instances (browsers / devices)
The npm package multiple-cucumber-html-reporter receives a total of 136,602 weekly downloads. As such, multiple-cucumber-html-reporter popularity was classified as popular.
We found that multiple-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
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
Security News
CISOs are racing to adopt AI for cybersecurity, but hurdles in budgets and governance may leave some falling behind in the fight against cyber threats.