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.