Select Page
QA Automation

Protractor Cucumber HTML Report

In this blog post, we will show you how to generate HTML report using Protractor and Cucumber.

Protractor Cucumber HTML Report

Behavior-Driven Development helps us to test behaviors instead of implementations. We can use any BDD framework to follow Behavior-Driven Development. Generating HTML report after BDD scenarios execution is an important feature, and it helps to publish BDD result in a readable format.

In this blog post, we will show you how to generate HTML report using Protractor and Cucumber.

Configure Cucumber JSON format in conf.js

Protractor Configuration File

exports.config = {
  getPageTimeout: 60000,
  allScriptsTimeout: 500000,
  framework: 'custom',
  frameworkPath: require.resolve('protractor-cucumber-framework'),
  capabilities: {
    'browserName': 'chrome'

  specs: [

  baseURL: '',

  cucumberOpts: {
    format: ['json:reports/results.json', 'pretty'],
    require: ['features/*/*/steps.js','features/support/*.js'],
    tags: true,
    profile: false,
    'no-source': true

Installing grunt-protractor-cucumber-html-report plugin

Install grunt-protractor-cucumber-HTML-report plugin locally using the below command.

npm install grunt-protractor-cucumber-html-report --save-dev  

Create protractor-cucumber-html-report task in Gruntfile.js

Sample Gruntfile.js with grunt-protractor-runner and protractor-cucumber-html-report tasks

module.exports = function(grunt) {
    protractor: {
      options: {
        configFile: "conf.js",
        keepAlive: true,
        noColor: false,
        args: {

      your_target: {
        options: {
          configFile: "conf.js",
          keepAlive: true,
          args: {
            seleniumServerJar: 'node_modules/webdriver-manager/selenium/selenium-server-standalone-2.53.1.jar',
            chromeDriver: 'node_modules/webdriver-manager/selenium/chromedriver_2.22'

  'protractor-cucumber-html-report': {
    default_options: {
      options: {
        dest: 'reports',//Where you want to generate the HTML report.
        output: 'report.html',//File Name
        testJSONDirectory: 'reports'//Mention where you have generated JSON format.



grunt.registerTask('default', ['protractor:your_target','protractor-cucumber-html-report']);

Run registered Grunt tasks

This command executes the default tasks which are registered in Gruntfile.js

grunt default --cucumberOpts={"tags":"@smoke"}  

View your report

Once the Grunt tasks complete, you can see the HTML report in reports folder as mentioned in Gruntfile.js

Folder Structure
Protractorc Cucumber Project Structure

Protractorc Cucumber HTML Report


Submit a Comment

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

Talk to our Experts

Amazing clients who
trust us