allure-playwright

allure-playwright

Allure framework integration for Playwright Test framework

• Learn more about Allure Report at https://allurereport.org
• 📚 Documentation – discover official documentation for Allure Report
• ❓ Questions and Support – get help from the team and community
• 📢 Official annoucements – be in touch with the latest updates
• 💬 General Discussion – engage in casual conversations, share insights and ideas with the community

The documentation and examples

The docs for Allure Playwright are available at https://allurereport.org/docs/playwright/.

Also, check out the examples at github.com/allure-examples.

Features

• writes Allure results from Playwright Test runs
• supports steps, traces, screenshots, labels, links, parameters, and runtime API calls through allure-js-commons
• works with Allure Report 2 and Allure Report 3

Installation

Install allure-playwright using a package manager of your choice. For example:

npm install -D allure-playwright

Install Allure Report separately when you want to render the generated allure-results:

• follow the Allure Report 2 installation guide to use the allure CLI
• or install Allure Report 3 with npm install -D allure to use npx allure

Supported versions and platforms

• @playwright/test >= 1.53.0
• Linux, macOS, and Windows wherever Playwright Test supports Node.js
• this repository is validated in CI on Node.js 20 and 22

Usage

Add allure-playwright as the reporter in the Playwright configuration file:

import { defineConfig } from "@playwright/test";

export default defineConfig({
  reporter: "allure-playwright",
});

Or, if you want to use more than one reporter:

import { defineConfig } from "@playwright/test";

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

Or pass the same values via the command line:

npx playwright test --reporter=line,allure-playwright

When the test run completes, the result files will be generated in the ./allure-results directory.

You may select another location, or further customize the reporter's behavior with the configuration options.

View the report

Use Allure Report 2:

allure generate ./allure-results -o ./allure-report
allure open ./allure-report

Or use Allure Report 3:

npx allure generate ./allure-results
npx allure open ./allure-report

Allure API

Enhance the report by utilizing the runtime API:

import { describe, test } from "playwright";
import * as allure from "allure-js-commons";

describe("signing in with a password", () => {
  test("sign in with a valid password", async () => {
    await allure.description("The test checks if an active user with a valid password can sign in to the app.");
    await allure.epic("Signing in");
    await allure.feature("Sign in with a password");
    await allure.story("As an active user, I want to successfully sign in using a valid password");
    await allure.tags("signin", "ui", "positive");
    await allure.issue("https://github.com/allure-framework/allure-js/issues/331", "ISSUE-331");
    await allure.owner("eroshenkoam");
    await allure.parameter("browser", "chrome");

    const user = await allure.step("Prepare the user", async () => {
      return await createAnActiveUserInDb();
    });

    await allure.step("Make a sign-in attempt", async () => {
      await allure.step("Navigate to the sign in page", async () => {
        // ...
      });

      await allure.step("Fill the sign-in form", async (stepContext) => {
        await stepContext.parameter("login", user.login);
        await stepContext.parameter("password", user.password, "masked");

        // ...
      });

      await allure.step("Submit the form", async () => {
        // ...
        // const responseData = ...

        await allure.attachment("response", JSON.stringify(responseData), { contentType: "application/json" });
      });
    });

    await allure.step("Assert the signed-in state", async () => {
      // ...
    });
  });
});

More details about the API are available at https://allurereport.org/docs/playwright-reference/.

Similar packages

Other packages similar to allure-playwright

jest-allure

The jest-allure package integrates Allure reporting with Jest, another popular testing framework. It provides similar functionalities such as generating detailed test reports, attaching screenshots, and adding steps. However, it is specifically designed for use with Jest rather than Playwright.

wdio-allure-reporter

The wdio-allure-reporter package integrates Allure reporting with WebdriverIO, a testing framework for Node.js. It offers similar functionalities such as generating test reports and attaching screenshots, but it is designed for use with WebdriverIO.