Skip to content

Instantly share code, notes, and snippets.

@denji

denji/README.md

Last active February 16, 2022 05:26
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save denji/204690bf21ef65ac7778 to your computer and use it in GitHub Desktop.
Save denji/204690bf21ef65ac7778 to your computer and use it in GitHub Desktop.
Download ZIP
Nightwatch HTML Reporter
Raw
README.md

Image of Nightwatch Owl Nightwatch HTML Reporter

Install

cd /path/to/project
npm install handlebars

Copy html-reporter.js and html-reporter.hbs to your project basedir.

Usage

nightwatch test.js --reporter html-reporter.js

The html report will be generated under your nightwatch reports folder. Edit html-report.hbs to customize the look and feel of the report. See http://handlebarsjs.com for Handlebars syntax.

Raw
html-reporter.hbs
<!DOCTYPE html>
<html>
<head>
<title>Test Results - {{browser}}</title>
<style>
html, body {
font-family: Arial,sans-serif;
margin: 0;
padding: 0;
}
body { padding: 10px 40px; }
table { width: 100%; margin-bottom: 20px; }
td {
padding: 7px;
border-top: none;
border-left: 1px black solid;
border-bottom: 1px black solid;
border-right: none;
}
td.pass { color: #003b07; background: #86e191; }
td.skip { color: #7d3a00; background: #ffd24a; }
td.fail { color: #5e0e00; background: #ff9c8a; }
tr:last-child { border-top: 1px black solid; }
tr:last-child td { border-top: 1px black solid; }
tr:first-child td { border-top: 1px black solid; }
td:last-child { border-right: 1px black solid; }
tr.overview td { padding-bottom: 0px; border-bottom: none; }
tr.overview.last td { padding-bottom: 3px; }
ul.assertions { list-style-type: none; }
span.error { color: #AD2B2B; }
span.success { color: #53891E; }
.stacktrace { display: inline; }
.stacktrace code { display: none; }
#nightwatch-logo {
position: absolute;
top: 20px;
right: 33px;
width: 70px;
height: 75px;
background: transparent url('http://nightwatchjs.org/img/logo-nightwatch.png') no-repeat;
background-size: 70px 75px;
}
</style>
</head>
<body>
<h1>Test Results</h1>
<table border="0" cellpadding="0" cellspacing="0">
<tr class="overview">
<td colspan="3" title="{{browser}}"><strong>Browser:</strong> {{browser}}</td>
</tr>
<tr class="overview">
<td colspan="3"><strong>Timestamp:</strong> {{timestamp}}</td>
</tr>
<tr class="overview last">
<td colspan="3"><strong>Tests:</strong> {{results.tests}}<br></td>
</tr>
<tr>
<td class="pass"><strong>{{results.passed}}</strong> passed</td>
<td class="skip"><strong>{{results.errors}}</strong> errors</td>
<td class="fail"><strong>{{results.failed}}</strong> failures</td>
</tr>
</table>
{{#each results.modules}}
<h2>{{@key}}</h2>
{{#each this.completed}}
<h3>{{@key}}</h3>
<ul class="assertions">
{{#each this.assertions}}
<li>
{{#if failure}}
<span class="error">&#10006;</span>
{{else}}
<span class="success">&#10004;</span>
{{/if}}
{{this.message}}
{{#if this.failure}}
{{this.failure}}
{{/if}}
{{#if this.stacktrace}}
<div class="stacktrace">
<a href="#">view stacktrace</a>
<code><pre>{{this.stacktrace}}</pre></code>
</div>
{{/if}}
</li>
{{/each}}
</ul>
<p>
{{#if this.failed}}
<span class="error"><strong>FAILED:</strong></span>
<span class="error"><strong>{{this.failed}}</strong></span> assertions failed and
<span class="success"><strong>{{this.passed}}</span></strong> passed. ({{this.time}}s)
{{else}}
<span class="success"><strong>OK.</strong></span>
<span class="success"><strong>{{this.passed}}</strong></span> assertions passed. ({{this.time}}s)
{{/if}}
</p>
{{/each}}
{{#if this.skipped}}
<h4>skipped</h4>
<ul>
{{#each this.skipped}}
<li>{{this}}</li>
{{/each}}
</ul>
{{/if}}
<hr>
{{/each}}
<div id="nightwatch-logo"></div>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
$(function() {
$('div.stacktrace').on('click', 'a', function(evt) {
evt.preventDefault();
var $link = $(this);
var $code = $link.parent().find('code');
$code.is(':visible') ? $link.text('hide stacktrace'):
$link.text('view stacktrace');
$code.toggle();
});
});
</script>
</body>
</html>
Raw
html-reporter.js
var fs = require('fs');
var path = require('path');
var handlebars = require('handlebars');
module.exports = {
write : function(results, options, done) {
var reportFilename = options.filename_prefix + (Math.floor(Date.now() / 1000)) + '.html';
var reportFilePath = path.join(__dirname, options.output_folder, reportFilename);
// read the html template
fs.readFile('html-reporter.hbs', function(err, data) {
if (err) throw err;
var template = data.toString();
// merge the template with the test results data
var html = handlebars.compile(template)({
results : results,
options : options,
timestamp : new Date().toString(),
browser : options.filename_prefix.split('_').join(' ')
});
// write the html to a file
fs.writeFile(reportFilePath, html, function(err) {
if (err) throw err;
console.log('Report generated: ' + reportFilePath);
done();
});
});
}
};
@pnulu002
Copy link

pnulu002 commented Jan 9, 2019

@denji: Is there a way to add the Console.log to the HTML report ?

@sagg155
Copy link

sagg155 commented Aug 28, 2019

@denji: In html-reporter.hbs file the jquery code written to toggle stacktrace section is little bit wrong.

$code.is(':visible') ? $link.text('hide stacktrace'):
                             $link.text('view stacktrace');

This above code snippet is wrongly placed and will show wrong text on the anchor tag after its first get clicked.
Shortest possible way to fix this is to add this code in jquery toggle function.
Code will look something like this :-
`code.toggle('fast', function() {

    $code.is(':visible') ? $link.text('hide stacktrace'):
                         $link.text('view stacktrace');

  });`

@GustavoAlef
Copy link

hello, how can I do to add the name of the suite that is being executed in the name of the report, instead of using that random name generated this variable?
var reportFilename = options.filename_prefix + (Math.floor(Date.now() / 1000)) + '.html'; --(line 8)

@Prerit12
Copy link

Hello is there a way to add the screenshots in the report?

@jkretsch
Copy link

@denji: Is there a way to add the Console.log to the HTML report ?

I have the same question. Any answer?

@kretschmannj
Copy link

kretschmannj commented Jan 6, 2021 •
edited

Line #90 in the html-reporter.hbs prints out the 'message' and this message contains color codes. However, rather than converting the color code to an actual color, the output is simply displaying the color code like so ...

Verify HOME_BUTTON is visible �[0;90m(1244ms)�[0m

Is there a fix for this?

@AdamRzymowski
Copy link

AdamRzymowski commented Jan 21, 2021 •
edited

Every time i want to run it i get
''Error: An error occurred while trying to save the report file:
Error: The custom reporter file name "html-reporter.js" cannot be resolved.

And then it goes to my path \AppData\Roaming\npm\node_modules\nightwatch\lib\reporter\global-reporter.js:122:17
and then a bunch of Asyncs

Any idea how i can handle this?

@s-kugan
Copy link

s-kugan commented Feb 7, 2021

hi,
I am able to create this html report successfully however I also want the nigh-watch xml report too.
How can I create both the html report and the nigh-watch xml report on the same test run ?

@kkallu2
Copy link

kkallu2 commented Jan 30, 2022

how to add screenshot to report?

@shahinsfard
Copy link

I have the same question... I'd like to add Screen Shots to the report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment