Powered By Blogger

Search Here!

Monday, March 31, 2014

Adding the HTML Reporter in Protractor JS !

When we run the tests, we can see that tests are passing or failing in the command console. What if we have hundreds of tests and also want to keep a record of the test results  whenever we run the tests? We need test reporters for that.

Protractor gives the options to add onPrepare function property on its configuration file. This onPrepare function will be called before each tests. Jasmine test framework(which we are using inside protractor) provides the option to add test reporter. We will get the metadata about each test by using these two configurations.

There is a node module available for generating screenshots for each tests. protractor-screenshot-reporter. However this doesn't process the meta data and gives us the result in a readable format.

I couldn't find a node module doing this for protractor. So, I created a module for generating this HTML report, on top of protractor-screenshot reporter, protractor-html-screenshot-reporter. What it does is generate an HTML report with all the details of the test like status, browser used, message, link to screenshot etc. (If you are finding some other modules which are doing the same, please add in the comments. )

Let’s install protractor-html-screenshot-reporter module in our project.
$ npm install protractor-angular-screenshot-reporter --save-dev
We need to add this reporter in the Protractor configuration file.
1. Require the protractor-html-screenshot-reporter module and assign to a variable.
var reporter = new HtmlReporter({
   baseDirectory: '/tmp/screenshots'
});
2. Add this reporter on the onPrepare function.
var HtmlReporter = require('protractor-angular-screenshot-reporter');

exports.config = {
   // your config here 
   onPrepare: function() {
      // Add a screenshot reporter and store screenshots to `/tmp/screenshots`:
      jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: '/tmp/screenshots'
      }));
   }
}
3. Run the test using command line.
$ protractor protractor.conf.js
We can see that the tests are passing. Let’s see if the reports are generated.
Screenshots folder is created.


Inside the screenshots folder, one json and png with a guid filename is available. This is the metadata and screenshot respectively for the single test. There is also a combined.json which combines all the metadata into a single file and a reporter.html file which shows all the test reports.

Opening the reporter.html looks like below.

So, now you have an html reporter ready. But, there is one issue though. Whenever you run the tests, the reporter files are getting overridden. If I want to keep a track of tests, this is not going to help.

Protractor-html-screenshot-reporter provides the option of pathBuilder function property to give your own dynamic paths. We will add this in Protractor configuration file.

I am just using a basic function to give the folder name as the current date and time and browser.
Note that I am using the path module for creating the file path (path is a native node module for handling and transforming file paths. ). Make sure that, you have required the path and assigned to a variable.

14 comments:

  1. can i save the console errors using html reporter ? or is there any other way ?

    ReplyDelete
  2. For some reason I am only getting the result from the last test in the report. Is this happening for anyone else?

    ReplyDelete
    Replies
    1. yes also happening for me. How did you fix this?

      Delete
  3. Hello Manish can you please share a sample project for this ? i have tried with this but end with list of errors

    ReplyDelete
  4. Yes, same here. This needs to be fixed. Only displays the last test result

    -Chandan

    ReplyDelete
  5. Great Post. Worked like a charm!!!. Thanks

    ReplyDelete
  6. But why is the OS id displayed as XP?

    ReplyDelete
  7. what if I want to take a screen shot at every step?

    ReplyDelete
  8. I solved the problem of it always deleting prior results each run by going to this file:
    ...\node_modules\protractor-html-screenshot-reporter\index.js

    and commenting out line 119:
    "util.removeDirectory(this.finalOptions.baseDirectory);

    I'm sure there is a config for this somewhere, but this worked for me as a "brute force" method of making sure my prior results were not deleted.

    ReplyDelete
  9. I did not, originally, see your helper function to get the current date and time. So, I built this one:
    // Build this format: YYYY-MMM-DD_HH-MM-SS; 2014-Aug-25_16-35-56
    var dt = new Date().toDateString().split(' ');
    var tm = new Date().toTimeString().split(':');
    myDateFormat = dt[3] + '-' + dt[1] + '-' + dt[2] + '_' + tm[0] + '-' + tm[1] + '-' + tm[2];
    return path.join(myDateFormat, capabilities.caps_.browserName, descriptions.join('-'));

    ReplyDelete
  10. yes for me also last result override the previous result

    ReplyDelete
  11. can i save two screenshots with same navegator , chrome, with multiCapabilities

    ReplyDelete
  12. Manish , Plzz post the screenshot, currently un able to view.

    ReplyDelete
  13. U need to add preserveDirectory: true so that your previous reports are not overriden

    ReplyDelete