Adding Allure Reporting to Playwright — Beautiful, Actionable Test Reports

The default Playwright HTML report is useful during development. But for teams and stakeholders, you need something richer — something that tells the story of a test run, not just its outcome. Allure delivers that.

Installation

npm install -D allure-playwright allure-commandline

Add to playwright.config.ts:

reporter: [
  ['line'],
  ['allure-playwright', { outputFolder: 'allure-results' }]
],

Generating the Report

npx playwright test
npx allure generate allure-results --clean -o allure-report
npx allure open allure-report

What Allure Adds

Step-level breakdown — Each test step is visible with timing. When a test fails, you see exactly which step failed and why.

Automatic attachments — Screenshots on failure, traces, and videos are embedded directly in the test result.

Categorised failures — Allure distinguishes between product bugs, test bugs, and broken tests. This is critical for understanding whether failures are in your code or your tests.

History and trends — Running Allure over time shows flakiness trends, duration trends, and failure patterns.

Adding Custom Steps

import { allure } from 'allure-playwright';

test('user can checkout', async ({ page }) => {
  await allure.step('Navigate to cart', async () => {
    await page.goto('/cart');
  });
  await allure.step('Complete checkout', async () => {
    await page.getByTestId('checkout-btn').click();
  });
});

CI Integration

Publish the report as a CI artifact:

- name: Generate Allure Report
  run: npx allure generate allure-results --clean -o allure-report
  if: always()

- uses: actions/upload-artifact@v3
  with:
    name: allure-report
    path: allure-report/
  if: always()

Conclusion

Allure transforms test results from a pass/fail summary into an actionable diagnostic tool. Once your team experiences step-level failure context with embedded traces, going back to basic reporters feels like a downgrade.