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.