Customize protractor-html-screenshot-reporter

Question

I'm generating an HTML report using protractor-html-screenshot-reporter. I get false/true under the Passed column but I want Passed/Failed instead.

Expected - Failed(in red) or Passed(in green)
Actual   - False(in red) or True(in green)

Code Snippet -

function defaultMetaDataBuilder(spec, descriptions, results, capabilities) {
                    var metaData = {
                        description: descriptions.join(' ')
                        , passed: results.passed()
                        , os: capabilities.caps_.platform
                        , browser: {
                            name: capabilities.caps_.browserName
                            , version: capabilities.caps_.version
                        }
                        , message: ''
}

If I replace passed: results.passed() by this code -

passed: results.passed() ? 'Passed' : 'Failed'.

I get Passed/Failed instead of True/False but Failed also comes in Green.

How should I handle this scenario. Any suggestions are always welcome

FCin FCin · Accepted Answer · 2018-04-27T06:59:32

You have to alter how the page is rendered. Looking at source code for protractor-html-screenshot-reporter I can see that the page is fully created in javascript file.

Go to this library source code to jsonparser.js(protractor-html-screenshot-reporter/lib/jsonparser.js) and modify function generateHTML(data). Currently it looks at data.passed to see if this boolean is true or false. Based on that it generates color and prints this value to the column. You want to edit this line to something like this:

str +=  '<td class="status-col" style="color:#fff;background-color: '+ bgColor+'">' + (data.passed ? "Passed" : "Failed") + '</td>';

Personally if you expect to modify this page even more, I would advice you to move this code into html page instead of generating it inside javascript file.

Customize protractor-html-screenshot-reporter

1 Answers