A reporter for webdriver.io which generates a nice HTML report.
The name is silly but provides integration with webdriverio
Compatible with webdriverio version 7.7
Bugfix: fix start time setting
Totally rewritten in typescript.
No more jquery, uses only vanilla js
No more moment.js dependency
use 'html-nice' for reporter definition
Removed need for global scope reportAggregator in client code
Add collapseTests and collapseSuites options,default to false
sort suites by time order
display spec file in suite header
This project is a rewrite of @rpii/wdio-html-reporter It is written in typescript with many enhancements.
The following code shows the default wdio test runner configuration. Just add an HtmlReporter object as another reporter to the reporters array:
A functioning wdio.config.ts is provided in the /samples/wdio.config.ts
below are snippets from that file
// wdio.config.ts
import {ReportAggregator, HtmlReporter} from '@wdio/html-reporter';
let reportAggregator: ReportAggregator;
const BaseConfig: WebdriverIO.Config = {
reporters: ['spec',
["html-nice", {
outputDir: './reports/html-reports/',
filename: 'report.html',
reportTitle: 'Test Report Title',
//to show the report in a browser when done
showInBrowser: true,
collapseTests: false,
//to turn on screenshots after every test
useOnAfterCommandForScreenshot: false,
// to use the template override option, can point to your own file in the test project:
// templateFilename: path.resolve(__dirname, '../template/wdio-html-reporter-alt-template.hbs'),
// to add custom template functions for your custom template:
// templateFuncs: {
// addOne: (v) => {
// return v+1;
// },
// },
//to initialize the logger
LOG: log4j.getLogger("default")
}
]
]
};
webdriver.io will call the reporter for each test suite. It does not aggregate the reports. To do this, add the following event handlers to your wdio.config.js
onPrepare: function (config, capabilities) {
reportAggregator = new ReportAggregator({
outputDir: './reports/html-reports/',
filename: 'master-report.html',
reportTitle: 'Master Report',
browserName : capabilities.browserName,
collapseTests: true
});
reportAggregator.clean() ;
},
onComplete: function(exitCode, config, capabilities, results) {
(async () => {
await reportAggregator.createReport();
})();
},
A new feature for developers is to add a log4js logger to see detailed debug output. See the test/reporter.spec.js for configuration options. If you dont want to use the logging, include in your project @log4js-node/log4js-api and you can quiet all debugging. via:
const log4js = require('@log4js-node/log4js-api');
const logger = log4js.getLogger(this.options.debug ? 'debug' : 'default');
Uncomment the templateFilename above, and in the ReportAggregator. You must provide an absolute path to the file you can modify the alt-template above if you wish The template must support all the constructs in the default template. You may add more or just change the formatting and css.
Requires an additional plugin to keep the support lightweight for those that dont want it. see @rpii/wdio-html-reporter-pdf
This must be set manually. Its not available at config time since the browser object doesnt exist until you start a session.
Add to browser config object:
let baseConfig = require('./base.config') ;
exports.config = Object.assign({}, baseConfig.config, {
path: '/',
capabilities: [
{
// Set maxInstances to 1 if screen recordings are enabled:
// maxInstances: 1,
browserName: 'chrome',
'goog:chromeOptions': {
args: [process.env.CHROME_ARGS]
}
}
],
port: 9515, // default for ChromeDriver
services: ['chromedriver'],
chromeDriverLogs: './logs'
});
Add to onPrepare:
onPrepare: function (config, capabilities) {
reportAggregator = new ReportAggregator({
outputDir: './reports/html-reports/',
filename: 'master-report.html',
reportTitle: 'Master Report',
LOG: logger,
showInBrowser: true,
collapseTests: true,
browserName : capabilities.browserName,
});
reportAggregator.clean() ;
reportAggregator = reportAggregator;
},