A WebdriverIO reporter plugin to create Allure Test Reports.

The easiest way is to keep wdio-allure-reporter as a devDependency in your package.json.

{
  "devDependencies": {
    "wdio-allure-reporter": "~0.0.2"
  }
}

You can simple do it by:

npm install wdio-allure-reporter --save-dev

Instructions on how to install WebdriverIO can be found here.

Configure the output directory in your wdio.conf.js file:

exports.config = {
    // ...
    reporters: ['allure'],
    reporterOptions: {
		allure: {
			outputDir: 'allure-results'
		}
	},
	// ...
}

outputDir defaults to ./allure-results. After a test run is complete, you will find that this directory has been populated with an .xml file for each spec, plus a number of .txt and .png files and other attachments.

You can save custom attachments to tests/steps by calling process.send to allure:attachment within your hook:

afterStep: function (step) {
    var serverLogs = getServerLogsSomehow();
    
    process.send({
        event: 'allure:attachment',
        test: step.getStep().getName(), // The name of the test to attach this to
        name: 'Server logs', // The name that this attachment should get in the report
        content: '<pre style="font-family: SFMono-Regular, Consolas, ' +
            '\'Liberation Mono\', Menlo, Courier, monospace; font-size: 12px">' +
            serverLogs.replace(/\n/g, '<br>') + '</pre>',
        mimeType: 'text/html',
    });
}

Until webdriverio/webdriverio#1893 lands, there is no certain way to connect your hook with the specific Allure report being assembled for that test run; for now, we check the current open Allure reports for the one that has the most recent test with the name you send here via the test property, and this attachment is added to that test. If by coincidence there are two in-progress Allure reports that both have a most-recent test with the same name, the attachment will only be added to the first one.

If you send HTML, Allure will display it as rich HTML—even with images, if you include an img src with a base64-encoded data URI. This is another way to include custom images in your output:

afterStep: function (step) {
    var image = new Buffer(require('fs').readFileSync('download.png')).toString('base64');
    
    process.send({
        event: 'allure:attachment',
        test: step.getStep().getName(),
        name: 'Downloaded image',
        content: '<img src="data:image/png;base64,' + image + '">',
        mimeType: 'text/html',
    });
}

If you leave out mimeType, plain text is assumed. If you send application/json, the JSON will be pretty-printed with four spaces.

The results can be consumed by any of the reporting tools offered by Allure. For example:

Install the Allure Jenkins plugin, and configure it to read from the correct directory:

Jenkins will then offer a link to the results from the build status page:

If you open a report at the first time you probably will notice that Jenkins won't serve the assets due to security restrictions. If that is the case go to Jenkins script console (http://<your_jenkins_instance>/script) and put in these security settings:

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';")
System.setProperty("jenkins.model.DirectoryBrowserSupport.CSP", "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline';")

Apply and restart the Jenkins server. All assets should now be served correctly.

Install the Allure command-line tool, and process the results directory:

allure generate [allure_output_dir] && allure report open

This will generate a report (by default in ./allure-report), and open it in your browser:

For more information on WebdriverIO see the homepage.

Integration Tests are running webdriverio multiple times using the wdio-allure-reporter and verifying the output.

npm test