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.
