How To Create Selenium Cucumber Html Reports With Node Js

I want to create cucumber html reports and I am new to Node JS and I tried searching for it and I used the following this.registerHandler('AfterFeatures', function(callback) {

Solution 1:

Your code to generate HTML report will expect the json file: /report/cucumber.json had been exist.

So you need other code to help to generate the json file during test running, I will give code used in my project for your reference.

Note: below code can only work on Cucumber 1, can't work on Cucumver 2, below is the version I used:

"dependencies":{"cucumber":"1.2.1","cucumber-html-reporter":"0.2.6",

1) cucumber-json-report.js to generate Cucumber JSON report during running.

var fs = require('fs-extra');
var path = require('path');
var moment = require('moment');
varCucumber = require('cucumber');

module.exports = function() {

  varJsonFormatter = Cucumber.Listener.JsonFormatter();

  JsonFormatter.log = function(string) {

    var outputDir = './reports';
    var targetJson = outputDir + '/cucumber_report.json';

    if (fs.existsSync(outputDir)) {
      fs.moveSync(outputDir, outputDir + '_' + moment().format('YYYYMMDD_HHmmss') + "_" + Math.floor(Math.random() * 10000), {
        overwrite: true
      });
    }
    fs.mkdirSync(outputDir);
    fs.writeFileSync(targetJson, string);
  };

  this.registerListener(JsonFormatter);
};

2) screenshot.js to take screenshot when failure

module.exports = function() {

  this.After(function(scenario, callback) {
    if (scenario.isFailed()) {
      browser.takeScreenshot().then(function(buffer) {
        var decodedImage = newBuffer(buffer, 'base64');
        scenario.attach(decodedImage, 'image/png');
        callback();
      }, function(err) {
        callback(err);
      });
    } else {
      callback();
    }
  });
};

3) cucumber-html-report.js to generate Cucumber HTML report after all features running end.

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

    module.exports = function() {

      this.AfterFeatures(function(features, callback) {
        var options = {
          theme: 'bootstrap',
          jsonFile: 'reports/cucumber_report.json',
          output: 'reports/cucumber_report.html',
          reportSuiteAsScenarios: true
        };

        reporter.generate(options);
        callback();
      });
};

4) Protractor conf.js to include above three files in cucumberOpts.require

cucumberOpts: {
    monochrome: true,
    strict: true,
    plugin: ["pretty"],
    require:[
        './step_definitions/*step.js',
        './support/screenshot.js',
        './support/cucumber-json-report.js',
        './support/cucumber-html-report.js'
    ],
    tags: '',
},