一般的来说我们在使用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文件,并在测试结束之后自动打开,显示我们的测试的状况,可以说还是很简单的;
当然我们也可以在上面的代码中添加一些新的配置
{ //布尔值,如果为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文件夹下使我们的测试的代码文件
在进行上面的操作之后如果我们成功开了浏览器,显示了测试的结果则说明,我们的搭建是成功的;
参考文档: