protractor, reports, Selenium

Reporting in protractor based automation framework

Reporting is one of the major features which completes the framework. This is something which impacts the stakeholder and gives them the real picture as a whole without looking into the nitty-gritty.

I have tried integrating a couple of reports in a protractor based automation framework which I have prepared for an Aurelia based application.  In this post, I will share the one which I finally implemented and works for me.

Options I explored:-

  1. Allure reports
  2. HTML Spec reporter-protractor-beautiful-reporter
  3. Jasmine Spec Reporter- jasmine-spec-reporter

In this post I will discuss about protractor-jasmine2-html-reporter

Few reasons why I have opted this among-st multiple options available in the market is the all-in-one ability. It will work on all the browsers, unlike Allure.  Reports show the browser console logs which is a unique feature I see in this. It does not need any pom or external command to run for HTML Creation of reports, unlike Allure reports.

How to configure protractor-jasmine2-html-reporter?

You will find this as an easily available via npm. It is a plugin to generate protractor-jasmine2-html-reporter out of Jasmine tests.

npm install protractor-jasmine2-html-reporter –save-dev

One just needs to add it as a dev dependencies into package.json.

By simple configurations just map this with the command:- npm test.

And as you run the code with npm test the reports will generate on the function added as I did it in onPrepare().

The execution of the code will start from protractorConf.js file so I have placed the same code in the configuration file just to make sure it should run together with the specs.

You can add multiple other parameters which can customize the report for you. Here is the one which I have used.

onPrepare: () => {

var HtmlReporter = require(‘protractor-beautiful-reporter’);
jasmine.getEnv().addReporter(new HtmlReporter({
displayFailuresSummary: true,
displayFailuredSpec: true,
displaySuiteNumber: true,
displaySpecDuration: true,
baseDirectory: ‘Reports/AutomationReport’, // for custom name of the Reports folder
screenshotsSubfolder: ‘Screenshots’,
takeScreenShotsOnlyForFailedSpecs: false, //For adding screenshot when required
docTitle: ‘ORBCR Automation Report’, // For updating name of the report
preserveDirectory: false, // for not maintaining the reports archive
jsonsSubfolder: ‘jsons’

Once the code will be executed the reports will look like this:-



Failing Specs


The best part of these reports are you can check the browser console logs from the reports


Passed Test Case


Above are the filter, so you can set if you want to see the Time, Screenshots, OS, etc.

Surely, there are other options available which can work in similar way but for this project, I found it a nice addition. As it was giving me all the features and view  which I was looking for.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s