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