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. Now a days Cypress allow to integrate 3rd party  HTML reports on all of the automation project specially for BDD project.

Jenkins has a very nice Cucumber report plugin that generates reports in HTML format. All the automation projects should be integrated with a Continuous Integration tool like Jenkins to run the tests and have the reports saved. To be able to integrate our project with this plugin what we need to know is that this plugin uses a report in JSON format as an input to generate a nicer HTML report version.

For this reason, we need to configure our project to generate the report in JSON format, so later on we will be able to integrate this report on Jenkins and have an HTML view of the results.

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/cucumber-json",
   "filePrefix": "",
   "fileSuffix": ".cucumber"
  }
}

-Save, then run the test cases. Refresh the project. You will see a folder created as  cypress/cucumber-json and Jason files as per feature.

-Get the plugin (cucumber-html-reporter) to the system type:

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

Cucumber HTML Reporter plugin transforms the Cucumber JSON output to a beautiful html report. In order to let this happen add the below piece of code in a new  js file under cyress project as cypress>cucumber-html-report.js

var reporter = require('cucumber-html-reporter');

var options = {

        theme: ‘bootstrap’,

        jsonFile: ‘./path-to-your-json-output/’,

        output: ‘./path-where-the-report-needs-to-be/’,

        reportSuiteAsScenarios: true,

        scenarioTimestamp: true,

        launchReport: true,

        metadata: {

            “App Version”:”0.3.2″,

            “Test Environment”: “STAGING”,

            “Browser”: “Chrome  54.0.2840.98”,

            “Platform”: “Windows 10”,

            “Parallel”: “Scenarios”,

            “Executed”: “Remote”

        }

    };

    reporter.generate(options);

-In this cucumber-html-report.js file needs few path update as:

jsonDir: the folder path of cucumber-json folder

reportPath: inside a new report folder

Example:

‘./reports/cucumber-htmlreport.html’

-You can do more update as browser, platform etc.

-Save the cucumber-html-report.js file.

– To generate the final html report just execute your test cases and Refresh the project. This module converts Cucumber’s JSON format to HTML reports.

– To generate the final html report we need to run this cucumber-html-report.js file. To do that, type and run: node +path of the file, ex: node cypress\cucumber-html-report.js

-Go inside the reports folder and copy the path of index.html file, past on browser; you will see a nice report.

Share the Knowledge

You May Also Like

About the Author: codenbox

Leave a Reply

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