Setting up Screenshot Reporter for Protractor

Question

Since I'm a newbie with automated tests and protractor, I'm having some trouble setting this up in my tests.

According to the guide, every time that I create a new instance of screenshot reporter, I have to pass a directory path. Right, this means that every time I create a new instance in my spec file?

Also, there are functions to take screenshots of my skipped and my failed tests. Where i supposed to use takeScreenShotsForSkippedSpecs and takeScreenShotsOnlyForFailedSpecs? In my config file?

This is my onPrepare:

onPrepare: function () {
        browser.driver.manage().window().maximize();
        global.dvr = browser.driver;
        global.isAngularSite = function (flag) {
            browser.ignoreSynchronization = !flag;
        }
        jasmine.getEnv().addReporter(new ScreenShotReporter({
            baseDirectory: '/tmp/screenshots',
            takeScreenShotsForSkippedSpecs: true,
            takeScreenShotsOnlyForFailedSpecs: true
        }));

Answer 1

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.

Answer 2

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.

Answer 3

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.