Allure Playwright

Allure Playwright npm latest version

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:

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

    Bash
    cd /home/user/myproject
  2. Install the Allure Report command-line tool, if it is not yet installed in your operating system. Note that Allure Report requires Java, see Installation.

    Bash
    npm install --save-dev allure-commandline
    Bash
    yarn add --dev allure-commandline
    Bash
    pnpm install --dev allure-commandline
  3. Install the Allure Playwright adapter.

    Bash
    npm install --save-dev allure-playwright
    Bash
    yarn add --dev allure-playwright
    Bash
    pnpm install --dev allure-playwright
  4. 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:

  1. Create a directory for the project.

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

    Bash
    cd /home/user/myproject
  3. Install the Allure Report command-line tool, if it is not yet installed in your operating system. Note that Allure Report requires Java, see Installation.

    Bash
    npm install --save-dev allure-commandline
    Bash
    yarn add --dev allure-commandline
    Bash
    pnpm install --dev allure-commandline
  4. 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
  5. 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
  6. 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: {}, }, ], ], });
  7. 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, see Allure command-line 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:

There is a lot of metadata you can add to each test so that it would appear in the report. See 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, LabelName } from "allure-playwright"; test("Log in with username and password", async () => { await allure.label({ name: LabelName.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 Screenshots and other files.

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.

Powered by
logo

Join our newsletter

Join our community

We aim to make Allure Report as reliable and user-friendly as possible, and together with the community, we're here to help when problems arise.

© 2024 Qameta Software Inc. All rights reserved.