How to Set Up Allure Reports with Playwright (Step-by-Step)

Playwright's built-in HTML reports are useful. Allure Reports are professional.

Allure generates interactive test reports that stakeholders actually read:

• Visual test history (pass/fail trends)
• Failure categorization (UI, API, database)
• Detailed failure analysis with screenshots
• Test execution timeline
• Integration with CI/CD dashboards

This guide shows how to integrate Allure with Playwright in 15 minutes.

Table of Contents

1. Installation
2. Configuration
3. Running Tests
4. Viewing Reports
5. Advanced Features
6. CI/CD Integration
7. Troubleshooting

---

Installation

Install Dependencies

# Install Allure CLI
npm install -D @playwright/test allure-playwright allure-commandline

Verify Installation

allure --version
# Output: 2.21.0

---

Configuration

Update playwright.config.ts

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

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,

  // Allure Reporter Configuration
  reporter: [
    ['html'],                          // Built-in HTML reporter
    ['allure-playwright'],             // Allure reporter
  ],

  use: {
    baseURL: 'https://example.com',
    trace: 'on-first-retry',          // Trace on failures
    screenshot: 'only-on-failure',     // Screenshot on failure
    video: 'retain-on-failure',        // Video on failure
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
  ],
});

---

Running Tests

Standard Test Run

# Run tests (generates allure-results folder)
npm test

Playwright automatically generates Allure result files in allure-results/.

View Report

# Serve report on localhost
allure serve allure-results
# Opens http://localhost:4040

Generate Static Report

# Generate HTML report (for sharing)
allure generate allure-results -o allure-report

# View static report
allure open allure-report

---

Advanced Features

Add Test Descriptions

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

test.describe('Login Functionality', () => {
  test('User can login with valid credentials', async ({ page }) => {
    // Arrange
    const loginPage = new LoginPage(page);

    // Act
    await loginPage.navigate();
    await loginPage.login('user@example.com', 'password123');

    // Assert
    expect(page.url()).toContain('/dashboard');
  });
});

Add Test Labels

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

test('Critical payment flow', async ({ page }) => {
  // Label test with priority
  test.slow();
  test.skip();

  // ... test code
});

Attach Screenshots & Videos

Playwright automatically attaches:

• Screenshots (on failure)
• Videos (on failure)
• Traces (on first retry)

View them in Allure report.

Add Custom Attachments

import { test, expect } from '@playwright/test';
const fs = require('fs');

test('Payment processing', async ({ page }) => {
  // ... test code

  // Manually attach data
  const response = await page.request.get('/api/payment-status');
  const data = await response.json();
  
  await test.info().attach('payment-response', {
    body: JSON.stringify(data, null, 2),
    contentType: 'application/json',
  });
});

---

CI/CD Integration

GitHub Actions Workflow

name: Tests with Allure Reports

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    
    steps:
      - uses: actions/checkout@v4
      
      - name: Install dependencies
        run: |
          npm install
          npx playwright install
      
      - name: Run tests
        run: npm test
        continue-on-error: true  # Don't fail if tests fail
      
      - name: Generate Allure report
        if: always()
        run: allure generate allure-results -o allure-report
      
      - name: Upload Allure report
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: allure-report
          path: allure-report/
      
      - name: Comment on PR
        if: always() && github.event_name == 'pull_request'
        uses: actions/github-script@v7
        with:
          script: |
            github.rest.issues.createComment({
              issue_number: context.issue.number,
              owner: context.repo.owner,
              repo: context.repo.repo,
              body: '📊 Test report: https://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}'
            })

---

Report Navigation

Dashboard View

The main dashboard shows:

• Suites: Test structure (describe blocks)
• Tests: Individual test results
• Statistics: Pass/fail counts, duration
• Timeline: When each test ran
• Trends: Historical pass rate

Failure Analysis

For each failed test:

1. Error message: What assertion failed
2. Stack trace: Where in code it failed
3. Screenshot: Visual state when failed
4. Video: Step-by-step recording of test
5. Trace: Playwright trace for debugging

Test Details

Click any test to see:

• Test name and description
• Execution time
• Test parameters
• Attached screenshots/videos
• Full logs

---

Real Example

# Directory structure
project/
├── tests/
│   ├── login.spec.ts
│   ├── checkout.spec.ts
│   └── dashboard.spec.ts
├── allure-results/         (auto-generated, git-ignored)
├── allure-report/          (static report, git-ignored)
├── playwright.config.ts    (has allure reporter)
└── package.json            (has allure dependencies)

# Workflow
1. npm test              # Tests run, create allure-results/
2. allure serve         # Open interactive report at :4040
3. Review failures      # See screenshots, videos, traces
4. Fix bugs
5. Commit & push

---

Troubleshooting

Issue: "allure: command not found"

• Fix: npm install -g allure-commandline

Issue: "No results found" when serving report

• Cause: Tests didn't run or results folder is empty
• Fix: Run npm test first, check allure-results/ exists

Issue: Screenshots not appearing in report

• Cause: screenshot setting may be off
• Fix: Add to playwright.config.ts: screenshot: 'only-on-failure'

Issue: Report doesn't update after running tests

• Fix: Clear results before running tests:

rm -rf allure-results
npm test
allure serve

---

FAQ

Q: Allure or Playwright HTML reports?
A: Use both. Playwright HTML for quick feedback, Allure for team dashboards.

Q: How to share reports with non-technical stakeholders?
A: Generate static HTML (allure generate) and upload to dashboard or share link.

Q: How long are reports kept?
A: Allure keeps all historical data. Store in GitHub Actions artifacts (default 30 days).

Q: Can I view old reports?
A: Yes. Allure tracks trends across runs. Historical data in allure-results/history/.

Q: Playwright vs Allure performance impact?
A: Minimal. Allure adds <5% overhead (JSON writing).