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.)

Happy to Share My New Book On Playwright

Web Automation Testing Using Playwright: End-to-end, API, accessibility, and visual testing using…

Solution

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 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 command

npm install multiple-cucumber-html-reporter --save-dev

Step 4: Create .js file (cucumber-html-report.js) in 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

Link is attached below

For detail and more on Cypress blog see the below link

Generate Cucumber .html report in Cypress in Just "5" Steps - QAAutomationLabs

See more blogs on Cypress and other tools

Blogs - QAAutomationLabs