Cucumber HTML report in Cypress

It is very important to have a report on our test automation project. A good report allows us to evaluate the current status of the project and the overall quality of the product. It makes it easier to take corrective actions if it is necessary. The test report can also determine if the product is ready for release or not. The key thing on setting our report is to make sure that the report generated will give visibility to stakeholders (team, product owners, managers, etc.) of the tests that passed and/or failed, and if it failed for what reasons.

A html report with chart is considered to be used in automation project. Today, we will learn how to use cucumber html report in cypress

Step 1: Configure folder where contain cucumber-json

1) By default ‘cypress-cucumber-preprocessor’ plugin generate one cucumber-json file when we execute our BDD test cases. So on the package.json file we should add the following code as we are just informing that we want a cucumber json report generated on the folder “cypress/cucumber-json”

"cypress-cucumber-preprocessor": {
  "cucumberJson": {
   "generate": true,
   "outputFolder": "cypress/reports/cucumber-json",
   "filePrefix": "",
   "fileSuffix": ".cucumber"
  }
}

**Remember to add the report folder "reports" to .gitignore file, so the results of local executions are not committed to the repository.

2) Run scripts

cypress open //--> run all features
cypress run

Now, cucumber-json is created in your configuration folder (cypress/reports/cucumber-json)

Step 2: Install report plugin to generate json to html report.

1) Install cucumber-html-reporter

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

2): Create file js (for example cucumber-html-report.js) with below code. Cucumber HTML Reporter plugin transforms the Cucumber JSON output to a beautiful html report.

// Prepare folder structure
const fs = require('fs-extra');
const dir = 'cypress/reports/html'
 
if (fs.existsSync(dir)){
  fs.removeSync(dir);
}
fs.mkdirSync(dir); 

// Report configuration
const reporter = require('cucumber-html-reporter');
const options = {
  theme: 'bootstrap',
   //the folder where contain cucumber-json file. The same in package.json
  jsonDir: 'cypress/reports/cucumber-json',
  //where contain html report. The above step to create folder html
  output: 'cypress/reports/html/cucumber_report.html',
  reportSuiteAsScenarios: true,
  scenarioTimestamp: true,
  launchReport: true,
  metadata: {
            "App Version":"0.3.2",
            "Test Environment": "STAGING",
            "Browser": "Chrome 91.0.4472.124",
            "Platform": "Windows 10",
            "Parallel": "Scenarios",
            "Executed": "Remote"
  }
}; 

// Generate report
reporter.generate(options);