Generate Reports using Protractor Beautiful Reporter

In this article, we see one of the popular Protractor Reporting Tools (Protractor Beautiful Reporter). Protractor Results can be seen using different Protractor Reporting tools. Some of the Protractor Reporting tools are as follows.

Jasmine Reports
Protractor Beautiful Reporter

Related Posts:

Let’s see how to generate Protractor Beautiful Reporter in our Protractor Test Automation Framework.

We know that reporting in software testing plays vital role. This Protractor Beautiful Reporter generate a beautiful report for your protractor tests.

First, let’s see the features of Protractor Beautiful Reporter

Features of Protractor Beautiful Reporter

Browser’s Logs (only for Chrome)
Stack Trace (with suspected line highlight)
Screenshot
Screenshot only on failed spec
Search
Filters (can display only Passed/Failed/Pending/Has Browser Logs)
Inline Screenshots
Details (Browser/Session ID/OS)
Duration time for test cases (only Jasmine2)

Note:

Jasmine 1 is no longer supported
If you get Error: TypeError: Cannot set property ‘searchSettings’ of undefined use at least version 1.2.7, where this bug has been fixed

Steps to generate Protractor Beautiful Reporter:

Step 1: Open command prompt and type the following code

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

Step 2: Open protractor conf.js file

var HtmlReporter = require('protractor-beautiful-reporter');
exports.config = {
	// your config here
	framework: 'jasmine', 
		seleniumAddress: 'http://localhost:4444/wd/hub', 
		capabilities: { 
		browserName: 'chrome', 
		}, 
		specs: ['spec.js'],
	onPrepare: function() {
	// Add a screenshot reporter and store screenshots to `/Reports/screenshots`:
		jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: 'Reports/screenshots'
      }).getJasmine2Reporter());
   }
}

For your reference: My spec.js file

describe('Protractor Demo Application', function() { 
it('should multiply two integers', function() { 
browser.get('http://juliemr.github.io/protractor-demo/'); 
element(by.model('first')).sendKeys(2); 
element(by.model('second')).sendKeys(7); 
element(by.model('operator')).click(); 
element(by.xpath(".//option[@value= 'MULTIPLICATION']")).click(); 
element(by.id('gobutton')).click(); 
//expect(element(by.binding('latest')).getText()).toEqual('21'); 
//Incorrect expectation //
expect(element(by.binding('latest')).getText()).toEqual('14'); 
//Correct expectation 
}); 
});

As per the above code, screenshots will be generated in /Reports/screenshots directory.

There is an option to store screenshot in a subfolder.

You can store all images in a subfolder by using screenshotsSubfolder option:

new HtmlReporter({
   baseDirectory: 'Reports/screenshots'
   , screenshotsSubfolder: 'images'
});

Step 3: Run your Protractor tests with the above config

Protractor conf.js

After execution, the screenshot reporter will generate JSON and PNG files for each test. Open the file name report.html which is under Report/screenshots folder to view the report.