Playwright + Allure: Generate Rich Test Reports (2026)

Playwright and Allure are a killer combo for generating super-rich, interactive test reports that go way beyond basic pass/fail.

Here’s a Playwright test written in TypeScript:

import { test, expect } from '@playwright/test';

test('should navigate to Playwright website and verify title', async ({ page }) => {
  await test.step('Navigate to Playwright website', async () => {
    await page.goto('https://playwright.dev/');
  });

  await test.step('Verify page title', async () => {
    await expect(page).toHaveTitle(/Playwright/);
  });

  await test.step('Click on Get Started link', async () => {
    await page.getByRole('link', { name: 'Get started' }).click();
    await expect(page).toHaveURL(/.*Getting started/);
  });
});

test('should display a warning message on invalid login', async ({ page }) => {
  await test.step('Navigate to login page', async () => {
    await page.goto('https://practicetestautomation.com/practice-test-login/');
  });

  await test.step('Enter invalid credentials', async () => {
    await page.locator('#username').fill('invaliduser');
    await page.locator('#password').fill('wrongpassword');
    await page.locator('#submit').click();
  });

  await test.step('Verify error message', async () => {
    const errorMessage = await page.locator('.error-message').textContent();
    expect(errorMessage).toContain('Your username is invalid!');
  });
});

When you run these tests with Playwright’s --reporter=allure-playwright flag, Playwright captures detailed information, including steps, assertions, and even screenshots on failure. Allure then consumes this data to build its interactive reports.

The real magic happens when you look at the generated Allure report. You’ll see each test broken down into its individual test.step calls. For each step, Allure shows you the action taken (e.g., page.goto(...), locator.fill(...)), the outcome (pass/fail), and if it failed, you get a screenshot of the page at that exact moment. It’s like having a time-traveling debugger for your tests.

Here’s how you typically set it up:

Install dependencies:

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

Configure Playwright: In your playwright.config.ts (or .js), add the Allure reporter:

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  // ... other configurations
  reporter: [
    ['allure-playwright'],
    ['list'] // Keep the default list reporter for console output
  ],
  // ...
});

Run tests and generate report:
```
npx playwright test
npx playwright show-report
```
The first command runs your tests and generates the Allure results in a directory (usually allure-results by default). The second command launches a local web server to display the interactive report.

The fundamental problem Allure solves is making test results understandable and actionable. Instead of just seeing a red X, you see why it’s red, when it turned red, and what the system looked like when it happened. This dramatically speeds up debugging. You can filter tests by status, severity, tag, or even search for specific steps. Allure also allows you to attach custom data to your tests, like API responses, logs, or even videos of the test run, making the reports incredibly rich.

The one thing that trips most people up is understanding how Allure maps Playwright’s execution flow to its own reporting structure. Playwright’s test.step calls are directly translated into Allure’s "steps." The await expect(...) assertions become the outcome of the last step they are part of. If an assertion fails within a step, that step is marked as failed, and Allure captures the state of the page at that precise moment, including any relevant error messages.

Beyond basic reporting, you can also add custom metadata like severity levels (test.info().annotations.push({ type: 'severity', description: 'critical' });) or test suite names using test.describe.configure({ tag: '@smoke' }) which then become filterable categories in the Allure UI.

The next step is exploring how to integrate custom attachments and data into your Allure reports to provide even deeper context for failures.