gulp-protractor-cucumber-html-report

Generate html report from JSON file returned by CucumberJS json formatter

This is a stand-alone fork of grunt-protractor-cucumber-html-report

Getting Started

This plugin requires Gulp ~3.9.0

If you haven't used Gulp before, be sure to check out the Getting Started guide, as it explains how to create a Gulpfile as well as install and use Gulp plugins. Once you're familiar with that process, you may install this plugin with this command:

1npm install gulp-protractor-cucumber-html-report --save-dev

Once the plugin has been installed, it may be enabled inside your Gulpfile with this line of JavaScript:

1var reporter = require('gulp-protractor-cucumber-html-report');

The "protractor-cucumber-html-report" task

Options

options.dest

Type: String Default value: '.'

The output directory for the HTML report relative from the Gulpfile

options.filename

Type: String Default value: 'report.html'

The filename for the HTML report

Usage Examples

Overview

In your project's Gulpfile, you can use the reporter in your pipeline as follows:

1gulp.src('./cucumber-test-results.json')
2    .pipe(protractorReport({
3        dest: 'reports/'
4    }));

Saving CucumberJS JSON to disk when using Protractor

If you're using Protractor in combination with CucumberJS there currently is no way to save the CucumberJS JSON output to a file.

It is however possible to add a listener to the CucumberJS JSON formatter and save it to a file manually. The following hook can be added to your project and included to your Protractor configuration.

I've added 2 different hooks which basically do the same but one of the 2 requires you to add an extra dependency to your package.json. You're free to choose which one you prefer.

Without any extra dependencies

1var Cucumber = require('cucumber'),
2    fs = require('fs');
3    path = require('path');
4
5var JsonFormatter = Cucumber.Listener.JsonFormatter();
6
7var reportDirectory = 'reports/one/two/';
8var reportFileName = 'cucumber-test-results.json';
9
10var reportDirectoryPath = path.join(__dirname, '../../' + reportDirectory);
11var reportFilePath = path.join(reportDirectoryPath + reportFileName);
12
13function mkdirp(path, root) {
14  var dirs = path.split('/'), dir = dirs.shift(), root = (root || '') + dir + '/';
15
16  try {
17    fs.mkdirSync(root);
18  } catch (e) {
19    if(!fs.statSync(root).isDirectory()) throw new Error(e);
20  }
21
22  return !dirs.length || mkdirp(dirs.join('/'), root);
23}
24
25module.exports = function JsonOutputHook() {
26  JsonFormatter.log = function (json) {
27    fs.open(reportFilePath, 'w+', function (err, fd) {
28      if (err) {
29        mkdirp(reportDirectoryPath);
30        fd = fs.openSync(reportFilePath, 'w+');
31      }
32
33      fs.writeSync(fd, json);
34
35      console.log('json file location: ' + reportFilePath);
36    });
37  };
38
39  this.registerListener(JsonFormatter);
40};
41

With the fs-extra dependency

If you're going for this implementation, be sure to add fs-extra(https://www.npmjs.com/package/fs-extra) to your package.json in order for this to work.

1var Cucumber = require('cucumber');
2    fs = require('fs-extra');
3    path = require('path');
4
5var JsonFormatter = Cucumber.Listener.JsonFormatter();
6
7var reportsDir = path.join(__dirname, '../../reports');
8var reportFile = path.join(reportsDir, 'cucumber-test-results.json');
9
10module.exports = function JsonOutputHook() {
11  JsonFormatter.log = function (json) {
12    fs.open(reportFile, 'w+', function (err, fd) {
13      if (err) {
14        fs.mkdirsSync(reportsDir);
15        fd = fs.openSync(reportFile, 'w+');
16      }
17
18      fs.writeSync(fd, json);
19
20      console.log('json file location: ' + reportFile);
21    });
22  };
23
24  this.registerListener(JsonFormatter);
25};

Both 2 snippets above will hook into the CucumberJS JSON formatter and save the JSON to a file called 'cucumber-test-results.json' in the '../../reports' folder (relative from this file's location)

Setting up Protractor, CucumberJS and the JSON listener

In your protractor.conf.js add a reference to the hook listener (as shown above). In this example the file is found in './support'. Also make sure to set the output format to 'json'.

1cucumberOpts: {
2  require: ['steps/*.js', 'support/*.js'],
3  format: 'json'
4},

Screenshot support for failing scenarios

Adding screenshots of failing scenarios to the HTML report requires you to add an After hook. This can be easily achieved by creating a Javascript file with the following content:

1module.exports = function TakeScreenshot() {
2    this.After(function (scenario, callback) {
3        if (scenario.isFailed()) {
4            browser.takeScreenshot().then(function (png) {
5                var decodedImage = new Buffer(png, 'base64').toString('binary');
6                scenario.attach(decodedImage, 'image/png');
7
8                callback();
9            });
10        } else {
11            callback();
12        }
13    });
14};

If you're using the cucumberOpts as shown in Setting up Protractor, CucumberJS and the JSON listener then all you need to do is save this to a Javascript file in the 'support/' folder. Otherwise you have to change the cucumberOpts require property to load your hook.

This is all that's required to add the saved screenshots to the HTML report.

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality.

Contributors

@smuldr @nicolaspayot

Copyright

Copyright for portions of project gulp-protractor-cucumber-html-report are held by Robert Hilscher, 2015 as part of project grunt-protractor-cucumber-html-report. All other copyright for project gulp-protractor-cucumber-html-report are held by Marc Rooding, 2015.

Release History

0.1.2:

• added sample report screenshot Thanks danyc
• prevent "undefined" being displayed in step name Thanks danyc
• ignore empty Before steps Thanks danyc

0.1.1:

• Display data tables in the report. Thanks danyc

0.1.0:

• Added multiple JSON files support. Thanks Bill77!
• The readme example for usage with fs-extra contained a bug in which fs.mkDirSync took an incorrect parameter. Thanks nicolaspayot for fixing this.

0.0.9:

• The readme now contains 2 different ways to use the JSON output hook. One using an external library and one without.

0.0.8:

• Fix for not ignoring the After screenshot step

0.0.7:

• Empty After steps as a result of the screenshot hook will not be added to the HTML report anymore

0.0.6:

• Support for saving screenshots of failed scenarios

0.0.5:

• More robust creation of the output directory thanks smuldr!
• Fixed the HTML reporter when using multiple feature files