Setting up Screenshot Reporter for Protractor

Note: If you are using jasmine2, use protractor-jasmine2-screenshot-reporter.

For jasmine1:

I've been using successfully using protractor-html-screenshot-reporterpackage. It is based on protractor-screenshot-reporter, but also provides a nice HTML report.

Here is what I have in the protractor config:

var HtmlReporter = require("protractor-html-screenshot-reporter");exports.config = {    ...    onPrepare: function () {        // screenshot reporter        jasmine.getEnv().addReporter(new HtmlReporter({            baseDirectory: "test-results/screenshots"        }));    },    ...} 

After running tests, you would get an HTML file containing (example):

You can click "view" to see the test-case specific screenshot in the browser.

The readme in the library is pretty self explanatory. After installing the library, add it onto protractor's onPrepare in your protractor config file.

i.e. protractorConf.js:

var ScreenShotReporter = require('protractor-screenshot-reporter');exports.config = {   // your config here ...   onPrepare: function() {      // Add a screenshot reporter and store screenshots to `/tmp/screnshots`:      jasmine.getEnv().addReporter(new ScreenShotReporter({         baseDirectory: '/tmp/screenshots',         takeScreenShotsForSkippedSpecs: true      }));   }}

then protractor protractorConf.js to run protractor.

Just recently I published a brand new plugin called protractor-screenshoter-plugin that captures for each browser instance a screenshot and console logs. The snapshot is made optionally for each expect or spec. It comes with a beautiful angular and bootstrap based analytics tool to visually check and fix tests results.

Check it out at https://github.com/azachar/protractor-screenshoter-plugin.

Also, I created a list of all available alternatives, so if you find something else, please do not hesitate to add it there.