Playwright's built-in HTML reporter is great for developers. But when you need to share test results with product managers, stakeholders, or leadership — you need something more readable, more visual, and more insightful. That is where Allure comes in.

What Makes Allure Different

Allure Report transforms raw test results into a rich, interactive dashboard. It shows pass/fail trends over time, groups tests by feature and story, displays step-level breakdowns with screenshots, and highlights the most frequently failing tests. It turns your test suite from a CI log into a quality intelligence tool.

Installation

terminal
npm install --save-dev allure-playwright allure-commandline

Configure Playwright to Use Allure

playwright.config.ts
export default defineConfig({
  reporter: [
    ['list'],
    ['allure-playwright', {
      detail: true,
      outputFolder: 'allure-results',
      suiteTitle: false,
    }],
  ],
});

Enriching Your Tests with Allure Metadata

The real power of Allure is the metadata you can attach to tests — severity, owner, feature grouping, and step-level descriptions:

tests/ui/checkout.spec.ts
import { test, expect } from '@playwright/test'; import { allure } from 'allure-playwright'; test('complete checkout with valid data', async ({ page }) => { await allure.epic('Shopping'); await allure.feature('Checkout'); await allure.story('Happy Path Checkout'); await allure.severity('critical'); await allure.owner('Sudarsh'); await allure.step('Login as standard user', async () => { await page.goto('/'); await page.fill('[data-test="username"]', 'standard_user'); await page.fill('[data-test="password"]', 'secret_sauce'); await page.click('[data-test="login-button"]'); }); await allure.step('Add item to cart and proceed to checkout', async () => { await page.click('[data-test="add-to-cart-sauce-labs-backpack"]'); await page.click('[data-test="shopping-cart-link"]'); await page.click('[data-test="checkout"]'); }); await allure.step('Fill shipping information', async () => { await page.fill('[data-test="firstName"]', 'John'); await page.fill('[data-test="lastName"]', 'Doe'); await page.fill('[data-test="postalCode"]', '12345'); await page.click('[data-test="continue"]'); }); await allure.step('Confirm order and verify success', async () => { await page.click('[data-test="finish"]'); await expect(page.locator('[data-test="complete-header"]')) .toHaveText('Thank you for your order!'); }); });

Generating and Viewing the Report

terminal
# Run tests (generates allure-results/)
npx playwright test

# Generate the HTML report
npx allure generate allure-results --clean -o allure-report

# Open the report in browser
npx allure open allure-report
In CI: Upload the allure-report/ folder as an artifact, or deploy it to GitHub Pages after every test run so the entire team can view results without needing local setup.

// Key Takeaways