Generate Test Reports in Protractor

Generate Test Reports in Protractor using protractor-beautiful-reporter?

• There are many libraries we can generate test reports in the protractor framework.

• One of the libraries which are easy to use is protractor-beautiful-reporter

Features providing in protractor-beautiful-reporter:

1. Generates HTML report
2. It will display browser (test case was executed)
3. Version of browser
4. Gather browser console logs
5. Show Pass, fail and skipped test cases
6. It will take screenshots
7. Shows operating system (test case was executed)
8. Search box (to search for your test case)
9. Testcases description
10. Error stack trace (if any test case failed)
11. Show the execution time of each test case
12. Show the execution time of Total test cases
13. Provides filter options to view the HTML report.
14. Generate new report every time you run the test case(s)

Let's see how to configure protractor-beautiful-reporter in protractor framework:

1. Install the library using the command npm i protractor-beautiful-reporter

Protractor generate HTML file

      2. Once installation complete, configure in your conf.js file like below:

var HtmlReporter = require('protractor-beautiful-reporter');
var today = new Date(),
    timeStamp = today.getMonth() + 1 + '-' + today.getDate() + '-' + today.getFullYear() + '-' + today.getHours() + 'h-' + today.getMinutes() + 'm';

exports.config = {
    framework: 'jasmine',
    directConnect:true,
    specs: ['testSpec.js'],
    onPrepare: function() {
        jasmine.getEnv().addReporter(new HtmlReporter({
            baseDirectory: '../Reports/Results' + timeStamp,
            excludeSkippedSpecs: true,
            docName: 'report -' + timeStamp + '.html',
            gatherBrowserLogs: true,
            preserveDirectory: false,
            docTitle: 'Test Reports',
            takeScreenShotsOnlyForFailedSpecs: false,
            clientDefaults: {
                showTotalDurationIn: "footer",
                totalDurationFormat: "h:m:s"            }
        }).getJasmine2Reporter());
    }
}

Here, if you don't want to override previous reports,preserves the old reports and create new report every time make

 preserveDirectory: false ,if its value is true it will override previously generated reports.

3. Run your test case, it will generate reports in HTML fomat including screenshots and other details as well.

Generate html report in protractor

Final project structure:

Protractor generate HTML report

Please comment below to feedback or ask questions.