@wdio/allure-reporter

What is @wdio/allure-reporter?

@wdio/allure-reporter is a WebdriverIO plugin that allows you to generate Allure Test Reports. Allure is a flexible, lightweight multi-language test report tool that not only shows a very concise representation of what has been tested in a neat web report form but also allows everyone participating in the development process to extract maximum of useful information from everyday execution of tests.

What are @wdio/allure-reporter's main functionalities?

Adding Labels

This feature allows you to add custom labels to your tests. Labels can be used to categorize and filter tests in the Allure report.

const { addLabel } = require('@wdio/allure-reporter').default;

addLabel('feature', 'Login');

Adding Steps

This feature allows you to add steps to your tests. Steps provide a detailed breakdown of the actions performed during the test execution.

const { addStep } = require('@wdio/allure-reporter').default;

addStep('Open login page');

Adding Attachments

This feature allows you to add attachments to your tests. Attachments can include screenshots, logs, or any other relevant files.

const { addAttachment } = require('@wdio/allure-reporter').default;

addAttachment('Screenshot', Buffer.from('...'), 'image/png');

Adding Test Case ID

This feature allows you to link your tests to external test case management systems by adding a test case ID.

const { addTestId } = require('@wdio/allure-reporter').default;

addTestId('TC-1234');

Adding Severity

This feature allows you to specify the severity of a test case, which can be useful for prioritizing test results.

const { addSeverity } = require('@wdio/allure-reporter').default;

addSeverity('critical');

Other packages similar to @wdio/allure-reporter

mochawesome

Mochawesome is a custom reporter for the Mocha JavaScript test framework that generates a visually appealing HTML/CSS report. It provides similar functionalities to @wdio/allure-reporter, such as detailed test reports and the ability to include screenshots and other attachments.

jest-html-reporter

jest-html-reporter is a Jest test results processor that creates a simple HTML report. While it does not offer as many customization options as @wdio/allure-reporter, it provides a straightforward way to generate test reports for Jest.

cucumber-html-reporter

cucumber-html-reporter is a Cucumber.js reporter that generates a beautiful HTML report. It is similar to @wdio/allure-reporter in that it provides detailed test reports, but it is specifically designed for use with Cucumber.js.

README

WDIO Allure Reporter

A WebdriverIO reporter plugin to create Allure Test Reports.

Installation

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

{
  "devDependencies": {
    "@wdio/allure-reporter": "^5.0.0"
  }
}

You can simple do it by:

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

Configuration

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

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

• 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.
• disableWebdriverStepsReporting - optional parameter(false by default), in order to log only custom steps to the reporter.
• disableWebdriverScreenshotsReporting - optional parameter(false by default), in order to not attach screenshots to the reporter.
• useCucumberStepReporter - optional parameter (false by default), set it to true in order to change the report hierarchy when using cucumber. Try it for yourself and see how it looks.
• disableMochaHooks - optional parameter (false by default), set it to true in order to not fetch the before/after stacktrace/screenshot/result hooks into the Allure Reporter.

Supported Allure API

• addLabel(name, value) - assign a custom label to test
• addFeature(featureName) – assign feature to test
• addStory(storyName) – assign user story to test
• addSeverity(value) – assign severity to test
• addIssue(value) – assign issue id to test
• addTestId(value) – assign TMS test id to test
• addEnvironment(name, value) – save environment value
• addAttachment(name, content, [type]) – save attachment to test.
  • name (String) - attachment name.
  • content – attachment content.
  • type (String, optional) – attachment MIME-type, text/plain by default
• addArgument(name, value) - add additional argument to test
• addDescription(description, [type]) – add description to test.
  • description (String) - description of the test.
  • type (String, optional) – description type, text by default. Values ['text', 'html','markdown']
• addStep(title, [{content, name = 'attachment'}], [status]) - add step to test.
  • title (String) - name of the step.
  • content (String, optional) - step attachment
  • name (String, optional) - step attachment name, attachment by default.
  • status (String, optional) - step status, passed by default. Must be "failed", "passed" or "broken"

Usage

Allure Api can be accessed using:

ES5

const { addFeature } = require('@wdio/allure-reporter').default

ES6

import allureReporter from '@wdio/allure-reporter'

Mocha example

describe('Suite', () => {
    it('Case', () => {
        allureReporter.addFeature('Feature')
    })
})

Displaying the report

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

Command-line

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

allure generate [allure_output_dir] && allure open

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

Jenkins

Install and configure the Allure Jenkins plugin

Add Screenshots

Screenshots can be attached to the report by using the takeScreenshot function from WebDriverIO in afterStep hook. First set disableWebdriverScreenshotsReporting: false in reporter options, then add in afterStep hook

afterTest: function(test) {
    if (test.error !== undefined) {
      browser.takeScreenshot();
    }
  }

As shown in the example above, when this function is called, a screenshot image will be attached to the allure report.