There are a lot of ways you can create HTML reports in Nightwatch JS, but the one I liked the most is Nightwatch HTML Reporter by Denis Denisov because it is very simple to implement and is also highly customizable.

Step 1: Install the package Handlebars

1
npm install handlebars -D

 
Step 2: Install the package fs

1
npm install fs -D

 
Step 3: Install the package path

1
npm install path -D

 
Once all these packages are successfully installed, your package.json should look like this:

nightwatch package json
 
Step 4: Create a file html-reporter.hbs in the root folder and copy this content from here

Step 5: Create a file html-reporter.js in the root folder and copy this content from here

Once these two files are created, your project folder structure should look something like this:

Nightwatch JS project folder structure with html report

Next, we will execute the tests and see whether our reports are being generated or not. You can run all your tests or any single test and the corresponding HTML report will be generated in the tests_output folder.

For this example we would be executing all tests by using the command:

1
npx nightwatch tests --reporter html-reporter.js

 
Once the execution is completed, you should find the HTML file under tests_output folder.

Nightwatch js generated html report
 
The generated HTML report will look like this:

Nightwatch JS html report content
 
In case if you want to customize the look and feel of the report, you can do that by editing the html-reporter.hbs file.
 
 
Update(15 Apr 2021): As pointed out by Vladi (in the comments), The Tests count in the HTML file is coming as 0. To fix this, you have to do two things:

1. Go to html-reporter.js file and add totalTests: results.passed + results.failed + results.errors as shown below in the image:

updated htm-reporter js with tests count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
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(' '),
        totalTests: results.passed + results.failed + results.errors
      });

      // write the html to a file
      fs.writeFile(reportFilePath, html, function (err) {
        if (err) throw err;
        console.log('Report generated: ' + reportFilePath);
        done();
      });
    });
  }
};

 
2. Go to html-reporter.hbs file and search for the text Tests: and replace the value results.tests with totalTests as shown below in the image:

updated html-reporter hbs file with correct total tests count
 
Once you have done the changes run the tests and you can see the HTML report with the correct Tests count.

Do check out 🙂

Github: https://github.com/alapanme/NightwatchJS
All Nightwatch JS Articles: https://testersdock.com/nightwatch-js-tutorial/