Allure Reports for Playwright: Rich Test Reporting Setup

Playwright's built-in HTML reporter has no step-by-step breakdown, no trend history across CI runs, and no way to link failures to a bug tracker. Allure adds all three through the allure-playwright adapter, which writes raw results that you then compile into an interactive report with trend charts and failure categories. This guide covers installation, configuration in playwright.config.ts, local report generation, and GitHub Actions integration.

What Allure Gives You

Test suites organized by file, describe block, and test name
Timeline showing parallel test execution
Step-by-step breakdown of what happened in each test
Attachments — screenshots, videos, console logs inline in the report
Trends — pass/fail rates across multiple test runs
Environment info — which browser, OS, app version was tested
Categories — group failures by type (product bugs, test bugs, flaky)

Installation

# Install the Allure Playwright adapter
npm install -D allure-playwright

# Install Allure CLI to generate and open reports
npm install -D allure-commandline

Or install Allure CLI globally:

npm install -g allure-commandline

Configuration

Add Allure as a reporter in playwright.config.ts:

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

export default defineConfig({
  reporter: [
    ['list'],           // Console output during run
    ['allure-playwright'],  // Allure report generation
  ],
  
  // Optional: configure Allure specifically
  // reporter: [
  //   ['allure-playwright', {
  //     detail: true,
  //     outputFolder: 'allure-results',
  //     suiteTitle: false,
  //   }],
  // ],
});

The reporter writes raw results to allure-results/ during the test run. You then generate the HTML report from those results.

Running and Viewing Reports

# Run tests (writes to allure-results/)
npx playwright test

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

# Open in browser
npx allure open allure-report

Or combine generate and open:

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

Add to package.json for convenience:

{
  "scripts": {
    "test": "npx playwright test",
    "report": "npx allure generate allure-results --clean -o allure-report && npx allure open allure-report"
  }
}

Then: npm test && npm run report

Adding Steps to Tests

Allure can show step-by-step breakdowns if you annotate your code:

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

test('successful login', async ({ page }) => {
  await allure.step('Navigate to login page', async () => {
    await page.goto('/login');
  });
  
  await allure.step('Enter credentials', async () => {
    await page.fill('[data-testid="email"]', 'user@test.com');
    await page.fill('[data-testid="password"]', 'ValidPass1');
  });
  
  await allure.step('Submit login form', async () => {
    await page.click('[data-testid="submit"]');
  });
  
  await allure.step('Verify redirect to dashboard', async () => {
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByTestId('welcome')).toBeVisible();
  });
});

In the Allure report, each step shows separately with pass/fail status.

Adding Metadata

Annotate tests with metadata for better organization and filtering:

test('payment with valid card', async ({ page }) => {
  // Labels for filtering and grouping
  allure.label('feature', 'Checkout');
  allure.label('story', 'Credit card payment');
  allure.severity('critical');  // 'blocker' | 'critical' | 'normal' | 'minor' | 'trivial'
  allure.owner('qa-team');
  
  // Link to issues and test cases
  allure.issue('PROJ-123', 'https://jira.mycompany.com/PROJ-123');
  allure.tmsLink('TC-456', 'https://testrail.mycompany.com/TC-456');
  
  // Description
  allure.description('Verify that valid Stripe test card completes purchase');
  
  // Tags
  allure.tag('smoke');
  allure.tag('payment');
  
  // ... test code
});

Attaching Screenshots and Files

import { allure } from 'allure-playwright';
import * as fs from 'fs';

test('verifies page layout', async ({ page }) => {
  await page.goto('/dashboard');
  
  // Attach a screenshot manually
  const screenshot = await page.screenshot();
  await allure.attachment('Dashboard screenshot', screenshot, 'image/png');
  
  // Attach a text file
  const logContent = 'Test started at: ' + new Date().toISOString();
  await allure.attachment('Test log', Buffer.from(logContent), 'text/plain');
  
  // Attach JSON data
  const apiResponse = { status: 'ok', users: 42 };
  await allure.attachment(
    'API response',
    Buffer.from(JSON.stringify(apiResponse, null, 2)),
    'application/json'
  );
});

Screenshots on failure are attached automatically if you configure them in playwright.config.ts:

use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

Environment Information

Add environment details so the report shows what was tested:

// In playwright.config.ts or global setup
// Create an allure-results/environment.properties file

// global-setup.ts
import * as fs from 'fs';
import * as path from 'path';

export default async function globalSetup() {
  const envProps = [
    `BASE_URL=${process.env.BASE_URL || 'http://localhost:3000'}`,
    `ENV=${process.env.TEST_ENV || 'local'}`,
    `BROWSER=chromium`,
    `APP_VERSION=${process.env.APP_VERSION || 'unknown'}`,
  ].join('\n');
  
  fs.mkdirSync('allure-results', { recursive: true });
  fs.writeFileSync(path.join('allure-results', 'environment.properties'), envProps);
}

This appears in the Allure report's Environment section.

Categories Configuration

Categories group test failures by type. Create allure-results/categories.json:

[
  {
    "name": "Product Bugs",
    "messageRegex": ".*Expected.*",
    "matchedStatuses": ["failed"]
  },
  {
    "name": "Test Infrastructure Issues",
    "messageRegex": ".*net::ERR.*|.*Navigation timeout.*|.*Connection refused.*",
    "matchedStatuses": ["failed", "broken"]
  },
  {
    "name": "Test Flakiness",
    "matchedStatuses": ["flaky"]
  }
]

Allure automatically categorizes failures based on error message patterns.

CI/CD Integration

GitHub Actions

- name: Run Playwright 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
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-report
    path: allure-report/
    retention-days: 30

- name: Upload raw results (for trend data)
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-results
    path: allure-results/

Allure TestOps (cloud version)

For persistent trend history across CI runs, Allure TestOps (paid service) stores results centrally. Free alternative: download allure-results artifacts from previous runs and include them in the next allure generate command.

Playwright Report vs Allure Report

| Feature | Playwright HTML | Allure |

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

| Setup required | None | Install + generate step |

| Steps breakdown | No | Yes (with annotations) |

| Trend history | No | Yes |

| Categories | No | Yes (configurable) |

| External tool links | No | Yes (Jira, TestRail) |

| Best for | Quick daily use | Stakeholder reports, CI history |

Use Playwright's built-in report locally for fast feedback. Use Allure in CI for persistent history and stakeholder reporting.

Summary

# Install
npm install -D allure-playwright allure-commandline

# Configure in playwright.config.ts
reporter: [['allure-playwright']]

# Run → generate → view
npx playwright test
npx allure generate allure-results --clean
npx allure open allure-report

Key features to use:

allure.step() for readable test breakdown
allure.severity() and labels for filtering
allure.issue() to link failures to bug tracker
Environment properties to document what was tested

Allure is most valuable when you share test results with developers and product managers who need to understand what failed and why — the visual format communicates more than a list of test names.