QA Automation Labs

Generate Cucumber .html report in Cypress in Just “5” Steps


Generate Cucumber .html report in Cypress in Just “5” Steps

Problem statement

We need a .html report where we can see the results of the cucumber cypress test case in graphical form (pie chat etc.)


With the help of two plugins “cypress-cucumber-preprocessor” and “multiple-cucumber-html-reporter,” we can achieve this

Steps to generate the Cucumber .html report

Step 1: Install the plugin and add the following in the cypress-cucumber-preprocessor section in package.json.npm install — save-dev cypress-cucumber-preprocessor

Add below lines in package.json under the cypress-cucumber-preprocessor section in package.json.“cypress-cucumber-preprocessor”: {
“cucumberJson”: {
“generate”: true,
“outputFolder”: “cypress/cucumber-json”,
“filePrefix”: “”,
“fileSuffix”: “.cucumber

Detail of pacakage.json fields

Step 2: Run command “yarn run cypress open” and run .feature file Login.cucumber.json the file is generated under the below path.“outputFolder”: “cypress/cucumber-json”,

Login.cucumber.json help us in generating the.html file.

Step 3:Install plugin multiple-cucumber-html-reporter

Install plugin multiple-cucumber-html-reporter plugin with the following commandnpm install multiple-cucumber-html-reporter –save-dev

Step 4: Create .js file (cucumber-html-report.jsin root level which help to read the .json file under (cypress/cucumber-json)*** Let name it cucumber-html-report.js ** const report = require(“multiple-cucumber-html-reporter”); report.generate({ jsonDir: “cypress/cucumber-json”, // ** Path of .json file **// reportPath: “./reports/cucumber-htmlreport.html”, metadata: { browser: { name: “chrome”, version: “81”, }, device: “Local test machine”, platform: { name: “mac”, version: “Catalina”, }, }, });

Step 5: Generate cucumber .html report

Simply run .js file (cucumber-html-report.js) created in above steps. commnd is below

node cucumber-html-report.js

report is generate under reportPath: “./reports/cucumber-htmlreport.html”,

Open the .html (index.html) file in browser

Video for the same attached below

Leave a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

Gear up for upcoming Conferences of 2024! ✨✨

Gear up for our upcoming Conferences of 2024! ✨ ✨ #TheTestTribe #SoftwareTesting #Testers #Community #Worqference #Worqference2024 #QonfX 
Read More

Enhance Testing Workflows with HTML Allure Reports in Cypress

Allure Report is the utility that processes test results collected by a compatible test framework and produces an HTML report. Allure Report is i
Read More

Mocking API Response In Cypress

What is Mocking ? Mocking, in a broader software development and testing context, is a technique used to simulate the behavior of certain components o
Read More