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 protractor = require('protractor');        

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

exports.config = {
   // ...

   // Setup the report before any tests start
   beforeLaunch: function() {
      var deferred = protractor.promise.defer();
      reporter.beforeLaunch(function() {
        deferred.fulfill();
      }, 500); 

      return deferred.promise;
   },

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

   // Close the report after all tests finish
   afterLaunch: function(exitCode) {
      var deferred = protractor.promise.defer();
      reporter.afterLaunch(function() {
        deferred.fulfill(exitCode);
      }, 500);

      return deferred.promise;
   }
}

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.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   cleanDestination: false,
   showSummary: false,
   showConfiguration: false,
   reportTitle: null
}));

Filename (optional)

Filename for html report.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   userCss: 'my-report-styles.css'
}));

Ignore pending specs (optional)

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

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   showConfiguration: true
}));

Default is true

Report title (optional)

This option will add a title to the report.

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   reportTitle: "Report Title"
}));

Default is 'Report'

Extra configuration summary items (optional)

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

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   configurationStrings: {
           "My 1st Param": firstParam,
           "My 2nd Param": secondParam
   }
}));

Path Builder (optional)

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

jasmine.getEnv().addReporter(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:

jasmine.getEnv().addReporter(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.

jasmine.getEnv().addReporter(new HtmlScreenshotReporter({
   preserveDirectory: true
}));