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

Let’s Play with Cypress Feature “Test Replay”

Problem Statement Before Cypress v13, test failures in CI have historically been captured through screenshots, videos, and stack trace outputs, b
Read More

Handling Shadow DOM Using Cypress

The idea of componentization has completely changed how we design and maintain user interfaces in the field of web development. The advent of Shadow D
Read More

Gear up for upcoming Conferences of 2024! ✨✨

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