How to take screenshot in protractor on failure of test cases

Question

I am new to the protractor and would like to take screenshots of my failed test cases in browsers.

Can you please help me out by advising how should I go about it?

Thank you :)

Answer 1

The code below can be placed within the exports.config block of protractor.conf.js:

const fs = require('fs');
. . . 
exports.config = {
. . . 
onPrepare: function() {
jasmine.getEnv().addReporter({
  specDone: function(result) {
    browser.takeScreenshot().then(function(screenShot) {

      //    Saving File.
      //    Param filePath : where you want to store screenShot
      //    Param screenShot : Screen shot file which you want to store. 

      fs.writeFile(filePath, screenShot, 'base64', function (err) {
      if (err) throw err;
      console.log('File saved.');
      });

    });
  }
});
}

I hope it helps! :)

Reference link

Similarly, if you want it to only take screenshots on failures, you can place the call to takeScreenshot within a conditional matching a result.failedExpectations.length greater than 0:

jasmine.getEnv().addReporter({
  specDone: (result) => {
    if(result.failedExpectations.length > 0) {
      browser.takeScreenshot().then((screenShot) => {
        fs.writeFile('./protractorFailure.png', screenShot, 'base64', (err) => {
          if (err) throw err;
        });
      });
    }
  }
});

Answer 2

protractor-beautiful-reporter is capable of building nice html reports including the screenshots.

Installation:

npm install protractor-beautiful-reporter --save-dev

Configuration in protractor.conf.js:

const HtmlReporter = require('protractor-beautiful-reporter');

exports.config = {
   // your config here ...

   onPrepare: function() {
      jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: 'target/screenshots',
         takeScreenShotsOnlyForFailedSpecs: true
      }).getJasmine2Reporter());
   }
}