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
        }));

Solution 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.

Solution 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.

Solution 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.

Comments

[andrepm]

I did this, but why it says to pass a directory everytime thay i create a new instance screenshot reporter? And where i supposed to swith takeScreenShotsForSkippedSpecs and takeScreenShotsOnlyForFailedSpecs to true?

[hankduan]

You only create the instance once, in the protractor config file. updated example to include takeScreenShotsForSkippedSpecs

[andrepm]

Nope, still got nothing. I've updated my question with my onPrepare.

[Nick]

@alecxe, i am trying to send whole path like (c:/x/y/z/protractor-html-screenshot-reporter), is there any other way i can set and send it.

[Zakir Sayed]

@alecxe - do you know if jasmine2 reporters results can be viewed realtime while the tests are running? Our functional tests runs for 30mins and in jasmine2 reporters we need to wait for the entire tests to complete to see the report unlike protractor-html-screenshot-reporter package that allows you see the results of already executed tests.

[alecxe]

@ZakirSayed I am afraid it will only dump the results when jasmine is done executing the tests (github.com/mlison/protractor-jasmine2-screenshot-reporter/b‌​lob/…)..

[Zakir Sayed]

thanks @alecxe. Let's see how critical that becomes and then we can look for some other reporter.

[Martijn Pieters]

Please read How to offer personal open-source libraries? before posting about your personal projects; do please disclose that this is your own project.

[Andrej]

Hey Martijn, thanks for your reply. I thought that I was clear that is my project, by saying I published. Should I say, disclaimer: I am the author of the plugin? Cheers,A.

[Martijn Pieters]

You did disclose it in this post, but you copied the answer to another question with only the first sentence different, and there you didn't disclose. At issue more is the copying and pasting; please don't go hunt for posts where your project may possibly be applicable.

[Andrej]

Ok, I see. Anyway, I just added it to the relevant questions. So if it was too much, sorry for that. Sometimes people ask same questions over and over... So the answer, is also similar...

[Martijn Pieters]

That's what we have duplicate closing for. If the question can be solved by the answers on a similar question, flag it as a duplicate. Don't copy and paste answers there.

[Andrej]

If you need to have your report available immediately while it is still running, try out github.com/azachar/protractor-screenshoter-plugin and specify the option writeReportFreq: 'asap'. (disclaimer: I am the author of the fork)