Multiple-cucumber-html-reporter with cypress cucumber framework

puneet vashisth
3 min readSep 20, 2024

--

As we all know reporting is the very important part of any Automation framework. Cypress with mocha(default framework) is having multiple reporting tools like mochawesome, allure report etc but configuration of these reports are almost impossible or inefficient while working with cypress-cucumber framework. So here we will see the integration of Multiple-cucumber-html-reporter with cypress cucumber framework.

Multiple-cucumber-html-reporter creates the html report from the cucumber.json files. So, lets start first with how to get cucumber.json file then we will look about the final report.

Prerequisite- Cypress cucumber working framework should already be there, for reference- https://medium.com/@puneetvashisth/cucumber-integration-with-cypress-9465db0fde83

Step 1) Install multiple html reporter with command-

npm i multiple-cucumber-html-reporter

Step 2) Add cucumber Json report enabling script in cypress.config.js file-

const { defineConfig } = require("cypress");
const cucumber = require("cypress-cucumber-preprocessor").default;
module.exports = defineConfig({
video: false, // This enables video recording
videosFolder: "cypress/videos", // Folder where videos will be saved
videoCompression: 32, // Compression level (0 for no compression)
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
on('file:preprocessor',cucumber())
},
specPattern:"cypress/e2e/features/*.feature",
cucumberJson: {
generate: true,
outputFolder: "cypress/reports/cucumber-json", // Output folder for the JSON files
filePrefix: "",
fileSuffix: ".cucumber"
},
viewportWidth: 1280, // Set the default viewport width
viewportHeight: 720, // Set the default viewport height
},
});

Create cucumber-html-report.js file to the root of the project(not inside cypress folder) and add below code in that file-

const report = require('multiple-cucumber-html-reporter');
const moment = require('moment');

const executionStartTime = moment().format('MMMM Do YYYY, h:mm:ss A');
const executionEndTime = moment().add(30, 'minutes').format('MMMM Do YYYY, h:mm:ss A');

report.generate({
jsonDir: 'cypress/reports/cucumber-json/',// Path of cucumber json file
reportPath: 'cypress/reports/cucumber-html',//path of required report
reportTitle: 'Latest Execution',
overwrite: true,
metadata:{
browser: {
name: 'chrome',
version: '60'
},
device: 'Local test machine',
platform: {
name: 'ubuntu',
version: '16.04'
}
},
customData: {
title: 'Run info',
data: [
{label: 'Project', value: 'Custom project'},
{label: 'Release', value: '1.2.3'},
{label: 'Cycle', value: 'B11221.34321'},
{label: 'Execution Start Time', value: executionStartTime},
{label: 'Execution End Time', value: executionEndTime}
]
}
});

Here custom data can be manipulated as per the requirement. Now run cypress tests in headless mode. OR we can create scripts in package .json to run and generate report like-

 "scripts": {
"cypress:run": "cypress run",
"generate-report": "node cucumber-html-report.js",
"execute:report": "npm run cypress:run && npm run generate-report"
},

Run command- npm run cypress:run

and you should see the testName.cucumber.json file gets generate inside reports/cucumber-json folder. If not then please check if the tests are run successfully or not.

Now run command npm run generate-report

Now you should get index.html file generated in reports/cucumber-html/ folder as mentioned in the cucumber-html-report.js file. You can change the path or folder as per the requirement.

You can run single command to run and execute report — npm run execute:report

You will get report like this and you can manipulate the look and feel by interacting with file cucumber-html-report.js.

Hope you enjoyed this article and please share any feedback which requires improvement in the article. I would be very happy to hear the improvements. Happy Learning!! :)

--

--

puneet vashisth

Sound experience in automation tool | Cypress JS based automation tool | Karate API automation | Selenium | Javascript | Typescript | Cucumber | BDD approach |