一般的来说我们在使用nightwatch测试得到的测试的报告的文件的格式都是xml的，但是这种文件实际上不适合我们查看展示，所以我们就需要一种新的方法来查看我们的测试的具体的情况；
npm给我们提供了这样的一个工具包：nightwatch-html-reporter，这是一个能把我们的测试输出的文档转换成 html格式的一种工具，经过这样的转换之后我们在查看我们的测试的结果就更加的直观了；
首先我们进行工具的安装：
npm install nightwatch-html-reporter
需要注意的一点是：在安装这个工具的时候应该对应我们的nightwatch的版本，当我们的版本是低于0.6.4的情况下，我们应该进行下面的安装的方式，指定一个明确的版本，这样就避免了一些错误的产生：
npm install [email protected]
当然，因为国内使用npm下载的速度是比较慢的，所以更加推荐使用cnpm进行下载；
至于查看我们当前使用的nightwatch的版本的话，直接在我们的nightwatch文件夹下打开终端输入：
nightwatch -v
这样就可以查看我们当前的nightwatch的版本了；
工具的使用
在我们的测试的根目录，创建一个html-reporter.js文件，当然这个文件的名称并不是固定的，在这个文件中进行一些配置：
var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
openBrowser: true,
reportsDirectory: __dirname + '/reports/'
});
module.exports = {
write : function(results, options, done) {
reporter.fn(results, done);
}
};
实际上在进行上面的配置之后，我们就可以实现上面所说的那样，生成一个html文件，并在测试结束之后自动打开，显示我们的测试的状况，可以说还是很简单的；
扫描二维码关注公众号，回复：
1088103 查看本文章
当然我们也可以在上面的代码中添加一些新的配置
{
//布尔值，如果为true，则生成的html将被打开在测试运行后在您的浏览器中
openBrowser: true,
//生成报告的保存位置
reportsDirectory: __dirname + '/reports',
//html报告将保存为的文件名
reportFilename: 'generatedReport.html',
//如果为true，我们确保生成的报告文件名 通过追加时间戳到最后是唯一的
uniqueFilename: false,
//如果为true，我们将追加最后的套件名称报告文件名。
separateReportPerSuite: false,
//将用于生成html报告的主题
themeName: 'default',
//自定义主题的相对路径。当这个给出时，`themeName`将被忽略
customTheme: 'relative/path/to/theme.pug',
// 如果为true，那么只有错误会显示在报告中
hideSuccess: false,
//如果为true，我们将截图路径从绝对路径转换为相对于输出文件
relativeScreenshots: false
}
在进行一些新的配置之后我们就可以运行我们的测试的过程了：
nightwatch tests --reporter ./html-reporter.js //tests文件夹下使我们的测试的代码文件
在进行上面的操作之后如果我们成功开了浏览器，显示了测试的结果则说明，我们的搭建是成功的；
参考文档：