Similar to Selenium, Protractor does not comes with an inbuilt reporting tool of itself. Although this is counted as one of the draw-backs of frameworks like Selenium, Protractor, but it also gives a chance for the person using this tool to customise the reporting tool as per their choice.

Since Protractor is a Javascript e2e testing library and works with a host of default frameworks like jasmine or mocha or cucumber, so the reporting too is dependent on the framework you’re using. There are a lot of reporting tools available in the npm repository that can be customised and used in your e2e frameworks.

In this blog, we’re going to go through a few of them and see how they work.

Jasmine

If you’re using Jasmine 2.0 as the default framework for running your Protractor tests, then you can use any one of the below given reporting mechanisms

• jasmine-spec-reporter

jasmine-spec-reporter is one of the various npm customisable libraries that can be used to display the contents of the tests that are being run for the spec files that you have.

jasmine-spec-reporter doesn’t gives any HTML formatted report though. It only kind of beautifies the report that you get in the terminal while running the tests.

This is what it looks like to when the jasmine-spec-reporter is added to your tests.

 

 

• Allure reporter

Allure framework is a versatile framework that gives the ability to generate nice HTML reports for a host of test frameworks. It provides a nice open-source way to generate and add HTML reporting in a nice UI that can be easily understood by anyone in the team. Allure reporting gives a nice library for using the jasmine framework, to generate the same kind of reporting – since jasmine is also a xunit based test framework. Read more about the Allure framework here.

The jasmine-allure framework gives the ability to do the same things when you’re using jasmine in your tests. It is a very easily set up and customisable interface that can be modified in n-no of ways to suit your requests.

In your package.json file, add the jasmine-allure-reporter as a dependency – the best way is to  install it after adding a new package.json file so that it can be added automatically.

Your package.jsoncan look like this

Now in your conf.js file, add this in code

var AllureReporter = require('jasmine-allure-reporter');
jasmine.getEnv().addReporter(newAllureReporter({
resultsDir:'allure_results'
}));
jasmine.getEnv().afterEach(function(done){
browser.takeScreenshot().then(function (png) {
allure.createAttachment('Screenshot', function () {
returnnewBuffer(png, 'base64')
}, 'image/png')();
done();
})
});
}

These lines should be added in the onPrepare() method of your conf.js file, something like this

To generate a HTML report out of it, you need to first install maven in your system. See here on how to install maven in your system.

Once you’ve maven installed, copy this pom.xml file from here, and put it in the project’s root directory.

Here in the code above, the resultsDir is the directory where the xml files of the execution is being kept.

In order to convert them to HTML run this command

mvn site -Dallure.results_pattern=allure_results

It will put HTMLs into target/site/allure-maven-plugin folder. To serve them via localhost:1324 use:

mvn jetty:run -Djetty.port=1234

this generates a report like – please ignore the failures – this is just to demonstrate the working

Now, you’ll have to start the jetty server every time you run your tests. In order to overcome this, you can use the allure command line. The configuration is given here.

 

Next, let’s see how mocha can be awesome in this scenario – there are a host of reporters that can be used for reporting in mocha framework – that is why I like it more than jasmine.