Cucumber HTML report with Protractor

Question

I am using Protractor with Cucumber (js). I would like to generate report files just like with the Cucumber-JVM version. I have seen examples when using Protractor with Jasm

Answer 1

Try below code which is working for me:

You can use below plugin :

https://www.npmjs.com/package/cucumber-html-reporter

In package.json add below dependency as below:

   "cucumber-html-reporter": "^5.0.0"

hit command as below:

npm install

Add below import in your cucumberconfig.ts

import * as reporter from "cucumber-html-reporter"

Now add below key in cucumberconfig.ts

 onComplete: () => {
      //var reporter = require('cucumber-html-reporter');
      var options = {
        theme: 'bootstrap',
        jsonFile: './cucumberreport.json',
        output: './cucumberreportsss.html',
        reportSuiteAsScenarios: 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);
    },

Complete file is look like below:

import {Config} from 'protractor'
import * as reporter from "cucumber-html-reporter"

export let config: Config = {
    directConnect:true,
     // set to "custom" instead of cucumber.
    framework: 'custom',
    // path relative to the current config file
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    seleniumAddress: 'http://localhost:4444/wd/hub',
    // To run script without cucumber use below
    //specs: ['typescriptscript.js'],

    onComplete: () => {
      //var reporter = require('cucumber-html-reporter');
      var options = {
        theme: 'bootstrap',
        jsonFile: './cucumberreport.json',
        output: './cucumberreportsss.html',
        reportSuiteAsScenarios: 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);
    },
    capabilities: {
        'browserName': 'firefox',
        'marionette': true,
        //shardTestFiles: true,
    },
    SELENIUM_PROMISE_MANAGER: false,
    specs: [
        '../Features/*.feature' // accepts a glob
      ],
    // Run feature file for cucumber use below
    cucumberOpts: {
        // require step definitions
        require: [
          './stepDefination/*.js' // accepts a glob
        ],
        format: 'json:cucumberreport.json',

      },

      jasmineNodeOpts: {
        showColors: true,
    },

}; 

To append failed screenshot use below code in hook

  After(function(scenarioResult) {
    let self = this;
    if (scenarioResult.result.status === Status.FAILED) {
    return browser.takeScreenshot()
    .then(function (screenshot) {
        const decodedImage = new Buffer(screenshot.replace(/^data:image\/png;base64,/, ''), 'base64');
        self.attach(decodedImage, 'image/png');
    });
}
});