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.