Protractor screenshot reporter for Jasmine2

Reporter for Protractor that will capture a screenshot after each executed test case and store the results in a HTML report. (supports jasmine2)

Usage

The protractor-jasmine2-screenshot-reporter is available via npm:

$ npm install protractor-jasmine2-screenshot-reporter --save-dev

In your Protractor configuration file, register protractor-jasmine2-screenshot-reporter in jasmine:

var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');

var reporter = new HtmlScreenshotReporter({
  dest: 'target/screenshots',
  filename: 'my-report.html'
});

exports.config = {
  // ...

  // Setup the report before any tests start
  beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },

  // Assign the test reporter to each running instance
  onPrepare: function() {
    jasmine.getEnv().addReporter(reporter);
  },

  // Close the report after all tests finish
  afterLaunch: function(exitCode) {
    return new Promise(function(resolve){
      reporter.afterLaunch(resolve.bind(this, exitCode));
    });
  }
}

Options

Destination directory

Output directory for created files. All screenshots and reports will be stored here.

If the directory doesn't exist, it will be created automatically or otherwise cleaned before running the test suite.

var reporter = new HtmlScreenshotReporter({
  dest: '/project/test/screenshots'
});

Clean destination directory (optional)

This option is enabled by default. Toggle whether or not to remove and rebuild destination when jasmine starts.

This is useful when you are running protractor tests in parallel, and wish all of the processes to report to the same directory.

When cleanDestination is set to true, it is recommended that you disabled showSummary and showConfiguration, and set reportTitle to null. If you do not, the report will be pretty cluttered.

var reporter = new HtmlScreenshotReporter({
  cleanDestination: false,
  showSummary: false,
  showConfiguration: false,
  reportTitle: null
});

Filename (optional)

Filename for html report.

var reporter = new HtmlScreenshotReporter({
  filename: 'my-report.html'
});

Default is report.html

Use External CSS (optional)

Array of filenames that specifies extra css files to include in the html report. You can find the classnames and element IDs used either from browsers dev tools or in example stylesheet.

var reporter = new HtmlScreenshotReporter({
  userCss: 'my-report-styles.css'
});

Use External JS (optional)

A string or an array of javascript filenames that should be loaded in the html test report.

var reporter = new HtmlScreenshotReporter({
  userJs: [ 'script.js', 'other-script.js' ]
  // Or
  userJs: 'script.js
});

Ignore pending specs (optional)

When this option is enabled, reporter will not create screenshots for pending / disabled specs. Only executed specs will be captured.

var reporter = new HtmlScreenshotReporter({
  ignoreSkippedSpecs: true
});

Default is false

Capture only failed specs (optional)

When this option is enabled, reporter will create screenshots only for specs that have failed their expectations.

var reporter = new HtmlScreenshotReporter({
  captureOnlyFailedSpecs: true
});

Default is false

Report only failed specs (optional)

This option is enabled by default - in combination with captureOnlyFailedSpecs, it will capture and report screenshots only for failed specs. Turning this option off will cause the report to contain all specs, but screenshots will be captured only for failed specs.

var reporter = new HtmlScreenshotReporter({
  reportOnlyFailedSpecs: false,
  captureOnlyFailedSpecs: true
});

Display summary in report (optional)

This option is enabled by default - it will display the total number of specs and the number of failed specs in a short summary at the beginnning of the report.

var reporter = new HtmlScreenshotReporter({
  showSummary: true
});

Default is true

Display links to failed specs in report summary (optional)

If this option is enabled with the report summary, it will display a link to each failed spec as a part of the short summary at the beginnning of the report.

var reporter = new HtmlScreenshotReporter({
  showSummary: true,
  showQuickLinks: true
});

Default is false

Display configuration summary in report (optional)

This option is enabled by default - it will display a summary of the test configuration details at the end of the report.

var reporter = new HtmlScreenshotReporter({
  showConfiguration: true
});

Default is true

Report title (optional)

This option will add a title to the report.

var reporter = new HtmlScreenshotReporter({
  reportTitle: "Report Title"
});

Default is 'Report'

Report failedAt url (optional)

When a spec fails, include the current url in the report.

var reporter = new HtmlScreenshotReporter({
  reportFailedUrl: true
});

Default is false

Extra configuration summary items (optional)

The user may specify a set of key/value pairs that are appended to the configuration report.

var reporter = new HtmlScreenshotReporter({
  configurationStrings: {
    "My 1st Param": firstParam,
    "My 2nd Param": secondParam
  }
});

Path Builder (optional)

Function used to build custom paths for screenshots. For example:

var reporter = new HtmlScreenshotReporter({
  pathBuilder: function(currentSpec, suites, browserCapabilities) {
    // will return chrome/your-spec-name.png
    return browserCapabilities.get('browserName') + '/' + currentSpec.fullName;
  }
});

By default, the path builder will generate a random ID for each spec.

Metadata Builder (optional)

Function used to build custom metadata objects for each spec. Files (json) will use the same filename and path as created by Path Builder. For example:

var reporter = new ScreenShotReporter({
  metadataBuilder: function(currentSpec, suites, browserCapabilities) {
    return { id: currentSpec.id, os: browserCapabilities.get('browserName') };
  }
});

By default, the runner builder will not save any metadata except the actual html report.

Preserve Directory (optional)

This option is disabled by default. When this option is enabled, than for each report will be created separate directory with unique name. Directory unique name will be generated randomly.

var reporter = new HtmlScreenshotReporter({
  preserveDirectory: true
});

Inline Images (optional)

Produce images inline in the report instead of links.

var reporter = new HtmlScreenshotReporter({
  inlineImages: true
});

Default is false

Forked browser instances

The reporter can take screenshots also from instances forked off the main browser. All you need to do is just register the instance in the begining of your suite / spec, e.g. like so:

beforeAll(function () {
  browser.forkedInstances['secondBrowser'] = browser.forkNewDriverInstance();
});

Remember to unregister the instance once you're done with it:

afterAll(function () {
  browser.forkedInstances['secondBrowser'] = null;
});

Tests

Automated unit tests for Protractor screenshot reporter for Jasmine2 are run by Mocha (Yes, we know that it is funny). In order to run it, you can use either npm test or by gulp by using gulp test.

Coverage report

Coverage is being generated by Istanbul. You can generate the HTML report by using either npm run coverage or by gulp test.

Coding style

Coding style tests are being done by jshint. You can find the code guide in .jshintrc file. Run jshint by gulp lint or npm lint.

Tips & tricks

By default, no report is generated if an exception is thrown from within the test run. You can however catch these errors and make jasmine report current spec explicitly by adding following to your protractor.conf / beforeLaunch method:

process.on('uncaughtException', function () {
    reporter.jasmineDone();
    reporter.afterLaunch();
});