Allure Playwright

Generate beautiful HTML reports using Allure Report and your Playwright tests.

Allure Report Playwright Example

Check out the example project at github.com/vovsemenv/pw-primer to see Allure Playwright in action.

How to start

1. Prepare your project

These instructions depend on whether you have some Playwright tests already or you're just starting a project.

Adding Allure Playwright to an existing project

If you have some Playwright tests, and you want to be able to use Allure Report with them:

Open a terminal and go to the project directory. For example:
```
Bash
cd /home/user/myproject
```
Install the Allure Report command-line tool, if it is not yet installed in your operating system. Note that Allure Report requires Java, see the installation instructions.
```
Bash
npm install --save-dev allure-commandline
```
```
Bash
yarn add --dev allure-commandline
```
```
Bash
pnpm install --dev allure-commandline
```

Install the Allure Playwright adapter.

Bash
npm install --save-dev allure-playwright

Bash
yarn add --dev allure-playwright

Bash
pnpm install --dev allure-playwright

In the playwright.config.ts file:

use Allure Playwright's testPlanFilter() to determine the grep parameter,
add Allure Playwright as a reporter.

TypeScript
import { testPlanFilter } from "allure-playwright/dist/testplan";

export default defineConfig({
  // ...
  grep: testPlanFilter(),
  reporter: [["line"], ["allure-playwright"]],
});

Some additional options can also be defined here, see Configuration.

Starting a new project with Allure Playwright

If you are starting a new project which will contain Playwright tests:

Create a directory for the project.
Open a terminal and go to the project directory. For example:
```
Bash
cd /home/user/myproject
```
Install the Allure Report command-line tool, if it is not yet installed in your operating system. Note that Allure Report requires Java, see the installation instructions.
```
Bash
npm install --save-dev allure-commandline
```
```
Bash
yarn add --dev allure-commandline
```
```
Bash
pnpm install --dev allure-commandline
```

Install both the Playwright test framework and the Allure Playwright adapter.

Bash
npm install --save-dev @playwright/test allure-playwright

Bash
yarn add --dev @playwright/test allure-playwright

Bash
pnpm install --dev @playwright/test allure-playwright

Install modified copies of web browsers for running Playwright. For example:

Bash
npx playwright install chromium
npx playwright install msedge

Bash
yarn dlx playwright install chromium
yarn dlx playwright install msedge

Bash
pnpx playwright install chromium
pnpx playwright install msedge

In the playwright.config.ts file:

specify which browsers to use (see the Projects section in the Playwright documentation),
use Allure Playwright's testPlanFilter() to determine the grep parameter,
add Allure Playwright as a reporter.

Some additional options can also be defined here, see Configuration.

TypeScript
import { testPlanFilter } from "allure-playwright/dist/testplan";

export default defineConfig({
  // ...
  projects: [
    {
      name: "Chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "Firefox",
      use: { ...devices["Desktop Firefox"] },
    },
  ],
  grep: testPlanFilter(),
  reporter: [["line"], ["allure-playwright"]],
});

TypeScript
import { testPlanFilter } from "allure-playwright/dist/testplan";

export default defineConfig({
  // ...
  projects: [
    {
      name: "Chromium",
      use: { ...devices["Desktop Chrome"] },
    },
    {
      name: "Firefox",
      use: { ...devices["Desktop Firefox"] },
    },
  ],
  grep: testPlanFilter(),
  reporter: [
    ["line"],
    [
      "allure-playwright",
      {
        outputFolder: "allure-results",
        suiteTitle: true,
        detail: true,
        environmentInfo: {},
      },
    ],
  ],
});

Write your tests, following the official Playwright documentation and, optionally, using some extended features provided by Allure Playwright, see Writing tests.

2. Run tests

Run your Playwright tests the same way as you would run them usually. For example:

Bash
npx playwright test

Bash
yarn dlx playwright test

Bash
pnpx playwright test

This will save necessary data into allure-results or other directory, according to the settings, see 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, run Allure to convert the test results into an HTML report. This will automatically open your browser to view the report.

Bash
npx allure serve allure-results

Bash
yarn dlx allure serve allure-results

Bash
pnpx allure serve allure-results

Replace allure-results with the path to the directory specified in the outputFolder setting of the reporter, see Configuration.

There are some options that can affect how the report is generated. Run allure --help for the full list of options.

Writing tests

The Allure Playwright adapter not only collects the data provided by Playwright's standard features, but also provides additional features for writing even better tests. This section lists the most notable ways to improve your tests, using both Playwright's and Allure Playwright's features.

With Allure Playwright, you can:

provide description, links and other metadata,
organize tests into hierarchies,
divide the test into smaller, easier-to-read test steps,
describe parameters used when running parametrized tests,
make the test save screenshots and other files during execution,
select which tests to run via a test plan file,
provide arbitrary environment information for the whole test report.

Specify description, links and other metadata

There is a lot of metadata you can add to each test so that it would appear in the report. See the reference for more details.

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.

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";
import { Severity } from "allure-js-commons";

test("Test Authentication", async ({ page }, testInfo) => {
  await allure.description(
    "This test attempts to log into the website using a login and a password. Fails if any error happens.\n\nNote that this test does not test 2-Factor Authentication.",
  );
  await allure.owner("John Doe");
  await allure.tags("NewUI", "Essentials", "Authentication");
  await allure.severity(Severity.CRITICAL);
  await allure.link("https://example.com/docs", "Related Documentation");
  await allure.issue("AUTH-123", "https://example.com/issues/AUTH-123");
  await allure.tms("TMS-456", "https://example.com/tms/TMS-456");
  // ...
});

Organize tests

As described in Improving navigation in your test report, Allure supports multiple ways to organize tests into hierarchical structures.

To specify a test's location in the behavior-based hierarchy:

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

test("Log in with username and password", async () => {
  await allure.epic("Web interface");
  await allure.feature("Essential features");
  await allure.story("Authentication");
  // ...
});

To specify a test's location in the suite-based hierarchy:

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

test("Log in with username and password", async () => {
  await allure.parentSuite("Web interface");
  await allure.suite("Essential features");
  await allure.subSuite("Authentication");
  // ...
});

To specify a test's location in the package-based hierarchy:

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

test("Log in with username and password", async () => {
  await allure.label({
    name: "package",
    value: "com.example.web.essentials.authentication",
  });
  // ...
});

Divide a test into steps

Allure Playwright fully supports Playwright's built-in test.step() method which allows to divide a large test into easy-to-read portions. Although, we recommend using allure.step method for convenience.

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

test("Some test", async ({ page }) => {
  await allure.step("Step 1", async () => {
    // step without the body
    await allure.logStep("Log step");
    await allure.step("Sub-step 1", async () => {
      // ...
    });
    await allure.step("Sub-step 2", async () => {
      // ...
    });
  });
  await allure.step("Step 2", async () => {
    await allure.step("Sub-step 1", async () => {
      // ...
    });
    await allure.step("Sub-step 2", async () => {
      // ...
    });
  });
});

Note that by default Allure displays automatically generated steps in the list, too, including those defined using Playwright's beforeAll(), beforeEach(), afterEach(), and afterAll() functions. This can be disabled using the detail setting.

Allure Report Playwright Hooks

Describe parametrized tests

Since tests in Playwright, unlike in some other frameworks, are written as anonymous functions, it is very easy to implement the 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 parameter() function.

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

for (const login of ["johndoe", "[email protected]"]) {
  test("Some test", async ({ page }) => {
    await allure.parameter("login", login);
    await allure.parameter("auth_method", "password");
    // ...
  });
}

test("Test Authentication With Empty Login", async ({ page }) => {
  await allure.parameter("login", "");
  await allure.parameter("auth_method", "password");
  // ...
});

Attach screenshots and other files

Reports generated by Allure can include any files attached to the test using allure.attachment method. Playwright's built-in TestInfo.attach() method is supported as well, but we suggest our users to use allure.attachment since it will render attachments in steps. In contrast, TestInfo.attach() only adds attachments to the test.

For example, a popular way to make a report easier to understand is to attach a screenshot of the opened web page. See Attachments.

TypeScript
import { test } from "@playwright/test";
import { allure } from "allure-playwright";

test("Some test", async ({ page }) => {
  // ...
  await allure.attachment("search-results.png", await page.screenshot(), {
    contentType: "image/png",
  });
});

Select tests via a test plan file

If the ALLURE_TESTPLAN_PATH environment variable is defined and points to an existing file, Playwright will only run tests listed in this file.

Here's an example of running tests according to a file named testplan.json (assuming you use the npm package manager):

Bash
export ALLURE_TESTPLAN_PATH=testplan.json
npx playwright test

PowerShell
$Env:ALLURE_TESTPLAN_PATH = "testplan.json"
npx playwright test

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 and process objects. This may help the future reader investigate bugs that are reproducible only in some environments.

Allure Report Environments Widget

TypeScript
import * as os from "os";

export default defineConfig({
  // ...
  reporter: [
    ["list"],
    [
      "allure-playwright",
      {
        detail: true,
        suiteTitle: false,
        environmentInfo: {
          os_platform: os.platform(),
          os_release: os.release(),
          os_version: os.version(),
          node_version: process.version,
        },
      },
    ],
  ],
});

Note that if your launch includes multiple Playwright runs (see How it works), Allure Playwright will only save the environment information from the latest run.