Protractor is a tool used for testing end-to-end. Protractor tests simulate user interaction in a real browser

Are you looking for testing tools? Protractor is a tool used for testing end-to-end. Protractor tests simulate user interaction in a real browser and compare them against the expected results. We will show you two ways to generate reports on the results of the tests.

Prerequisites

Having our project up and running with Karma and Protractor, it is necessary to install the Jasmine Reporters plugin to add different reporters to our tests. We add the following to the packsage.json:

{
  ...
  "devDependencies": {
    ...
    "jasmine-reporters": "^0.4.1",
    ...
  }
  ..
}

And we add the onPrepare function to the proctractor.conf.fs:

onPrepare: function () {

        'use strict';
        // The require statement must be down here, since jasmine-reporters
        // needs jasmine to be in the global and protractor does not guarantee
        // this until inside the onPrepare function. See previous comment.
        require('jasmine-reporters');

        return;
    },

Junit

Karma Junit Reporter is a plugin for generating reports in Junit format. The advantage of generating reports in this format is that there are many tools that support it and can use them to perform tasks according to their results; for example, Jenkins . To install it, we add the dependency on package.json:

{
  ...
  "devDependencies": {
    ...
    "jasmine-reporters": "^0.4.1",
    "karma-junit-reporter": "^0.2.2",
    ...
  }
  ..
}

And we add it to the reports onto the onPrepare of protractor.conf.js:

onPrepare: function () {
        'use strict';
        // The require statement must be down here, since jasmine-reporters
        // needs jasmine to be in the global and protractor does not guarantee
        // this until inside the onPrepare function. See previous comment.
        require('jasmine-reporters');
        jasmine.getEnv().addReporter(
            new jasmine.JUnitXmlReporter('test-results', true, true, 'e2e-test-results-')
        );
        return;
    },

The first parameter is the directory where we will generate the reports and the last one, the prefix to use for the generated files.

Screenshots

Protractor HTML Screenshot Reporter generates screenshots of each test and displays them in an HTML report. To configure it, add the dependency:

{
  ...
  "devDependencies": {
    ...
    "jasmine-reporters": "^0.4.1",
    "protractor-html-screenshot-reporter": "0.0.16",
    ...
  }
  ..
}

And we add it to the Jasmine’s reporters:

onPrepare: function () {
        'use strict';
        // The require statement must be down here, since jasmine-reporters
        // needs jasmine to be in the global and protractor does not guarantee
        // this until inside the onPrepare function. See previous comment.
        require('jasmine-reporters');
        var HTMLReporter = require('protractor-html-screenshot-reporter');
        jasmine.getEnv().addReporter(
            new HTMLReporter({
                baseDirectory: 'test-results/e2e-screenshots'
            })
        );
        return;
    },

Again, we pass the parameter through the directory where the report and screenshots will generated.

After running the tests, the main HTML remains in test-results / e2e-screenshots / reporter.html.