Generating Cucumber HTML report - Cypress

Reading Time: 3 minutes

Hi folks,

In this blog, we will try to explore the reporting feature of the cucumber plugin in Cypress. As a prerequisite, we should have a cypress-cucumber integrated framework already. With this cleared out, let’s move ahead.

Approach

Firstly, as mentioned we should have the cypress cucumber plugin already configured in our project. The reason is, the plugin, by default, that we are using in our project for having cucumber integrated with our project, generates a cucumber.json file as an output.

This output file contains the result of all our feature file execution. And using this JSON file only we are going to generate an HTML report.

To do so, there are some plugins available that can read this JSON file and prepare an HTML report from it. However, firstly, to make the cucumber plugin generate a JSON file output, we need to make some changes to our cypress cucumber properties.

Since we already have cypress-cucumber-preprocessor plugin in our package.json as mentioned below.

"cypress-cucumber-preprocessor": {
    "nonGlobalStepDefinitions": true
  },

All we have to do now is to modify it a little bit. We need to add the following to this plugin. It will look something like this

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

One thing to note here, we have a field named “outputFolder”. To this JSON field, we need to give a path where our cucumber.json file will be created. You can give the path as per your choice. But please remember, the cucumber.json will be get named as per the name of the feature file being executed. For example, if we have a test file named, sample.feature, then the corresponding cucumber.json file will be named sample.cucumber.json, by default.

In simple words, outputFolder will tell cypress to create a folder in your project under the parent folder of cypress having the JSON file in it. As mentioned earlier, this JSON file will have the result of feature file execution.

Moving on, we need to use this execution data present in the JSON file to create an HTML report. Let’s see, how to do that.

Converting the JSON output to HTML report

Since we already have the JSON file with execution detail, half of the work is already done. All we have to do now is, we have to install and use the plugin that can convert this JSON data to an HTML report. We can do so by following the steps mentioned below.

Install this plugin, mentioned below, to your project

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

The next step is, we need to have one .js file that can read your .json file and create an HTML report from it. Therefore, we need to the following in a .js file into our framework.

const report = require('multiple-cucumber-html-reporter');

report.generate({
	jsonDir: './path-to-your-json-output/',
	reportPath: './path-where-the-report-needs-to-be/',
	metadata:{
        browser: {
            name: 'chrome',
            version: '60'
        },
        device: 'Local test machine',
        platform: {
            name: 'ubuntu',
            version: '16.04'
        }
    },
    customData: {
        title: 'Run info',
        data: [
            {label: 'Project', value: 'Custom project'},
            {label: 'Release', value: '1.2.3'},
            {label: 'Cycle', value: 'B11221.34321'},
            {label: 'Execution Start Time', value: 'Nov 19th 2017, 02:31 PM EST'},
            {label: 'Execution End Time', value: 'Nov 19th 2017, 02:56 PM EST'}
        ]
    }
});

You can name this .js file as per your choice. But we are not done yet, if you code the code closely we two main things to fill out here, reportPath, we need to give the path of the directory where we want the HTML report to be generated.

The second one is, jsonDir, to this we need to give the path of our cucumber.json file. And we are done, this is all we have to do.

Now, to generate the HTML report, just run this .js file. But please make sure to place this file at the project root level, not inside the cypress folder. Since it is just a javaScript file we can run it by using the following command.