Playwright Test Reports: Built-in HTML vs Allure

Playwright's HTML reporter attaches screenshots and traces to every failure with zero configuration, but generates a new standalone report per run with no history. Allure adds trend charts across runs, test-level step breakdowns, and severity filtering, but requires a separate generate step after tests finish. This article covers configuring both reporters, the annotations that make Allure worth the extra setup, GitHub Actions integration for each, and the criteria for choosing between them.

The built-in HTML reporter

Playwright ships with an HTML reporter that requires zero configuration. To enable it:

// playwright.config.ts
reporter: [['html', { open: 'never' }]],

After a test run, open playwright-report/index.html. You get:

• A summary of passed, failed, skipped, and flaky tests
• Full test hierarchy (file → describe → test)
• Duration for every test
• Error messages with stack traces
• Screenshots and traces attached inline for failed tests
• Filter by status (click "Failed" to see only failures)

The open: 'never' option stops the reporter from launching a browser automatically after every run, which you want locally but not in CI.

For CI, upload the report folder as an artifact:

- uses: actions/upload-artifact@v4
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

The if: always() ensures the artifact uploads even when tests fail (which is exactly when you need it).

Running multiple reporters

You can run more than one reporter at the same time:

reporter: [
  ['html', { open: 'never' }],
  ['list'],
  ['junit', { outputFile: 'results.xml' }],
],

For CI, list + HTML + JUnit is a common combination: list for log visibility, HTML for humans, JUnit for CI tooling.

Allure reporter

The built-in HTML reporter is fine. Allure is better: it gives you trend charts across runs, severity filtering, test history, and a more polished UI. It requires more setup.

Install

npm install -D allure-playwright allure-commandline

Configure

reporter: [
  ['allure-playwright'],
  ['list'],
],

Generate and open the report

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

The first command generates the HTML from the raw results. The second opens it in a browser. In CI, generate the report in a separate step after tests run.

Allure annotations

Allure becomes powerful when you annotate your tests:

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

test('user can place an order', async ({ page }) => {
  allure.label('severity', 'critical');
  allure.story('Order placement');
  allure.description('Verifies end-to-end order flow from cart to confirmation.');

  // test steps...
  await allure.step('Navigate to product page', async () => {
    await page.goto('/products/laptop');
  });

  await allure.step('Add to cart', async () => {
    await page.getByRole('button', { name: 'Add to cart' }).click();
  });

  await allure.step('Complete checkout', async () => {
    await page.getByRole('link', { name: 'Checkout' }).click();
    // ...
  });
});

Steps appear as collapsible sections in the report: you see the exact step that failed, not just the test name.

Allure in GitHub Actions

- name: Run tests
  run: npx playwright test

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

- name: Upload Allure report
  if: always()
  uses: actions/upload-artifact@v4
  with:
    name: allure-report
    path: allure-report/
    retention-days: 30

For persistent Allure hosting with history tracking, deploy to GitHub Pages or Allure TestOps (their paid service). The open-source option is self-hosting the report on GitHub Pages via a separate workflow.

Choosing between HTML and Allure

| Feature | Playwright HTML | Allure |

|---|---|---|

| Setup | Zero config | npm install + generate command |

| Trace viewer integration | Built-in | Manual attachment |

| Test history / trends | No | Yes |

| Annotations (severity, story, steps) | No | Yes |

| CI artifact size | Small | Larger |

| Team access | Download artifact | Can host persistently |

Use the built-in HTML reporter when:

• You're working alone or with a small team
• The project is new and you're still establishing testing practices
• You want zero maintenance overhead

Use Allure when:

• You have stakeholders who need to read reports but don't have GitHub access
• You want to track test stability trends over time
• Your test suite is large enough that per-test history matters
• You need severity classification for priority triage

Adding test annotations without Allure

If you want lightweight categorization without Allure, Playwright supports built-in annotations:

test('checkout fails gracefully on network error', {
  tag: '@regression',
  annotation: { type: 'issue', description: 'https://github.com/org/repo/issues/123' },
}, async ({ page }) => {
  // test body
});

Tags appear in the HTML reporter and can be used to filter which tests run:

npx playwright test --grep @regression

This is enough for most teams that don't need full Allure reporting.