---
title: WebdriverIO
description: Learn how to integrate Allure with WebdriverIO to generate rich, interactive test reports. Follow step-by-step setup, test execution, and report generation guidance.
---

# Getting started with Allure WebdriverIO

[![Allure WebdriverIO npm latest version](https://img.shields.io/npm/v/@wdio/allure-reporter?style=flat "Allure WebdriverIO npm latest version")](https://www.npmjs.com/package/@wdio/allure-reporter)

Generate beautiful HTML reports using [Allure Report](https://allurereport.org/docs/) and your [WebdriverIO](https://webdriver.io/) tests.

## Setting up

### 1. Prepare your project

1. Open a terminal and go to the project directory. For example:

   ```bash
   cd /home/user/myproject
   ```

1. Make sure Allure Report is installed. If it's not, follow the [installation instructions](/docs/v2/install/). Note that Allure Report requires Java.

1. Install the Allure WebdriverIO integration.

   **npm:**
   ```bash
   npm install --save-dev @wdio/allure-reporter
   ```

   **yarn:**
   ```bash
   yarn add --dev @wdio/allure-reporter
   ```

   **pnpm:**
   ```bash
   pnpm install --dev @wdio/allure-reporter
   ```

1. In the `wdio.conf.ts` file, add `['allure', {}]` to the list of reporters. Inside `{}`, you can specify the [Allure WebdriverIO configuration options](/docs/webdriverio-configuration/), if necessary. For example:

   ```ts
   export const config = {
     // ...
     reporters: [
       "spec",
       [
         "allure",
         {
           outputDir: "allure-results",
         },
       ],
     ],
   };
   ```

### 2. Run tests

Run your WebdriverIO tests same way as your would run them usually. For example:

**npm:**
```bash
npm run wdio
```

**yarn:**
```bash
yarn run wdio
```

**pnpm:**
```bash
pnpm run wdio
```

This will save necessary data into `allure-results` or other directory, according to the [Configuration](/docs/webdriverio-configuration/). If the directory already exists, the new files will be added to the existing ones, so that a future report will be based on them all.

### 3. Generate a report

Finally, convert the test results into an HTML report. This can be done by one of two commands:

- `allure generate` processes the test results and saves an HTML report into the `allure-report` directory. To view the report, use the `allure open` command.

- `allure serve` creates the same report as `allure generate`, then automatically opens the main page of the report in a web browser.

## Writing tests

The Allure WebdriverIO integration extends the standard reporting features of WebdriverIO by providing additional capabilities for crafting more informative and structured tests. This section highlights key enhancements that can be utilized:

- **Metadata Annotation**: Enhance test reports with [descriptions, links, and other metadata](#adding-metadata).
- **Test Organization**: Structure your tests into clear hierarchies for better readability and organization [organize tests](#organize-tests).
- **Step Division**: Break down tests into smaller [test steps](#divide-a-test-into-steps) for easier understanding and maintenance.
- **Parametrized Tests**: Clearly describe the parameters for [parametrized tests](#describe-parametrized-tests) to specify different scenarios.
- **Attachments**: Automatically capture [screenshots and other files](#attach-screenshots-and-other-files) during test execution.
- **Environment Details**: Include comprehensive [environment information](#environment-information) to accompany the test report.

### Adding Metadata

Allure allows you to enrich your reports with a variety of [metadata](/docs/v2/readability/#description-links-and-other-metadata). This additional information provides context and details for each test, enhancing the report's usefulness. Refer to the [metadata reference section](/docs/webdriverio-reference/#metadata) for an exhaustive list of what can be added.

To assign a metadata field, call a corresponding method at any point inside a test method's body. Note, however, that it is highly recommended to assign all metadata as early as possible. Otherwise, there is a risk of the test failing before having all metadata set, which is bad for the test report's readability.

```ts
import {
  addDescription,
  addIssue,
  addLink,
  addOwner,
  addSeverity,
  addTestId,
  TYPE,
} from "@wdio/allure-reporter";

it("Test Authentication"), async () => {
  addDescription("Attempt to log into the website.", TYPE.MARKDOWN);
  addSeverity("critical");
  addOwner("John Doe");
  addLink("https://dev.example.com/", "Website");
  addIssue("AUTH-123");
  addTestId("TMS-456");
  // ...
});
```

### Organize tests

As described in [Improving navigation in your test report](/docs/v2/navigation/), Allure supports multiple ways to organize tests into hierarchical structures.

To specify a test's location in the [behavior-based hierarchy](/docs/v2/navigation/#behavior-based-hierarchy):

```ts
import { addEpic, addFeature, addStory } from "@wdio/allure-reporter";

it("Test Authentication"), async () => {
  addEpic("Web interface");
  addFeature("Essential features");
  addStory("Authentication");
  // ...
});
```

To specify a test's location in the [suite-based hierarchy](/docs/v2/navigation/#suite-based-hierarchy):

```ts
import { addParentSuite, addSubSuite, addSuite } from "@wdio/allure-reporter";

it("Test Authentication"), async () => {
  addParentSuite("Tests for web interface");
  addSuite("Tests for essential features");
  addSubSuite("Tests for authentication");
  // ...
});
```

### Divide a test into steps

Allure WebdriverIO provides three ways of [creating steps and sub-steps](/docs/steps/): “lambda steps”, “noop steps”, and “low-level steps”, see the [reference](/docs/webdriverio-reference/#test-steps).

**Lambda steps:**
```ts
import { step } from "@wdio/allure-reporter";

it("Test Authentication"), async () => {
  await step("Step 1", async (step) => {
    await step.step("Step 1.1", async () => {
      // ...
    });

    await step.step("Step 1.2", async () => {
      // ...
    });
  });

  await step("Step 2", async (step) => {
    await step.step("Step 2.1", async () => {
      // ...
    });

    await step.step("Step 2.2", async () => {
      // ...
    });
  });
});
```

**No-op steps:**
```ts
import { addStep } from "@wdio/allure-reporter";
import { Status } from "allure-js-commons";

it("Test Authentication"), async () => {
  addStep("Successful step");

  addStep("Skipped step", undefined, Status.SKIPPED);

  addStep(
    "Skipped step with attachment",
    { content: "This is attachment.", name: "file.txt", type: "text/plain" },
    Status.SKIPPED,
  );
});
```

**Low-level steps:**
```ts
import { endStep, startStep } from "@wdio/allure-reporter";
import { Status } from "allure-js-commons";

it("Test Authentication"), async () => {
  startStep("Step 1");
  try {
    // ...
    endStep();
  } catch {
    endStep(Status.FAILED);
  }

  startStep("Step 2");
  try {
    // ...
    endStep();
  } catch {
    endStep(Status.FAILED);
  }
});
```

### Describe parametrized tests

Since tests in WebdriverIO, unlike in some other frameworks, are written as anonymous functions, it is very easy to implement the [parametrized tests](/docs/v2/readability/#parametrized-tests) pattern, i.e. to run the same test logic with different test data. To do so, just write the test inside a loop and use the variable parameters in both its title and its body.

To display a parameter value in the test report, pass it to the `addArgument()` function.

```ts
import { addArgument } from "@wdio/allure-reporter";

for (const login of ["johndoe", "johndoe@example.com"]) {
  it(`Test Authentication as ${login}`, async () => {
    addArgument("login", login);
    // ...
  });
}
```

### Attach screenshots and other files

In Allure reports, you have the ability to [attach various types of files](/docs/attachments/), which can greatly enhance the comprehensibility of the report. A common practice is to attach screenshots that capture the state of the user interface at specific moments during test execution.

For detailed instructions on how to implement attachments, refer to the [attachments section in the Allure WebdriverIO reference](/docs/webdriverio-reference/#attachments).

```ts
import { addAttachment } from "@wdio/allure-reporter";
import * as fs from "fs";

it("Test Authentication"), async () => {
  // ...
  addAttachment("Text", "This is the file content.", "text/plain");
  addAttachment("Screenshot", fs.readFileSync("/path/to/image.png"), "image/png");
});
```

### Select tests via a test plan file

Danger:
Test plan is currently not supported by the Allure WebdriverIO integration.

### Environment information

For the main page of the report, you can collect various information about the environment in which the tests were executed.

For example, it is a good idea to use this to remember the OS version and Node.js version retrieved from the [`os`](https://nodejs.org/api/os.html) and [`process`](https://nodejs.org/api/process.html) objects. This may help the future reader investigate bugs that are reproducible only in some environments.

Images: /images/js/environment-allure3.png, /images/js/environment-allure2.png

```ts
import * as os from "os";

export const config = {
  // ...
  reporters: [
    "spec",
    [
      "allure",
      {
        reportedEnvironmentVars: {
          os_platform: os.platform(),
          os_release: os.release(),
          os_version: os.version(),
          node_version: process.version,
        },
      },
    ],
  ],
};
```

Note that if your launch includes multiple WebdriverIO runs (see [How it works](/docs/how-it-works/)), Allure WebdriverIO will only save the environment information from the latest run.