andrepm andrepm - 11 months ago 119
Javascript Question

Setting up Screenshot Reporter for Protractor

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

According the guide, everytime that i create a new instance of screenshot reporter, i have to pass a directory path. Right, this means that everytime 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

? In my config file?

This is my onPrepare:

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

Answer Source

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):

enter image description here

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