Integrating Allure Report with Playwright (Step-by-Step Guide)

by

Allure Report is one of the most popular reporting tools for Playwright automation projects. It provides interactive HTML reports with test execution history, screenshots, attachments, environment information, categories, and detailed execution steps.

This guide explains how to integrate Allure Report into a Playwright project from scratch, based on your project configuration.

What is Allure Report?

Allure Report is an advanced test reporting framework that provides:

  • Beautiful HTML reports
  • Test execution history
  • Test retries
  • Screenshots
  • Videos
  • Trace attachments
  • Execution duration
  • Environment information
  • Categories of failures
  • Test hierarchy
  • Dashboard and statistics

Example Report Structure

Dashboard
│
├── Overview
├── Behaviors
├── Suites
├── Graphs
├── Timeline
├── Categories
└── Packages

Prerequisites

Before integrating Allure, make sure you have:

  • Node.js installed
  • Playwright project already created
  • npm installed

Verify versions

node -v
npm -v
npx playwright --version

Step 1: Install Required Packages

Install the Allure reporter and command-line utility.

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

These packages serve different purposes:

PackagePurpose
allure-playwrightGenerates Allure result files during test execution
allure-commandlineConverts result files into an interactive HTML report

This is the first step required to enable Allure reporting.

Step 2: Configure Playwright Reporter

Open:

playwright.config.ts

Update the reporter section:

reporter: [
  ['list'],
  ['html', { open: 'never', outputFolder: 'playwright-report' }],
  ['allure-playwright', {
      outputFolder: 'allure-results',
      suiteTitle: false
  }]
]

Explanation:

List Reporter

['list']

Displays test execution in the terminal.

Example

✓ Login Test
✓ Logout Test
✓ Search Product

HTML Reporter

['html', {
    open: 'never',
    outputFolder: 'playwright-report'
}]

Generates Playwright’s built-in HTML report.

Output folder:

playwright-report/

Allure Reporter

['allure-playwright', {
    outputFolder: 'allure-results',
    suiteTitle: false
}]

This reporter creates raw execution data.

Output folder:

allure-results/

These settings match the Playwright configuration used in your project.

Step 3: Add npm Scripts

Open

package.json

Add:

{
  "scripts": {
    "test": "playwright test",
    "test:allure": "playwright test --reporter=list,allure-playwright",
    "allure:generate": "allure generate allure-results -o allure-report --clean",
    "allure:open": "allure open allure-report"
  }
}

Meaning of each script:

Run tests with Allure

npm run test:allure

Generates:

allure-results/

Generate HTML Report

npm run allure:generate

Creates:

allure-report/

Open Report

npm run allure:open

Starts a local web server and opens the report in your default browser.

These scripts are defined in your project’s package.json.

Step 4: Execute Playwright Tests

Run:

npm run test:allure

Example output:

Running 10 tests

✓ Login Test
✓ Logout Test
✓ Add Product
✓ Delete Product

10 passed

After execution, a new folder is created:

allure-results/

This folder contains files such as:

allure-results
│
├── *.json
├── *.txt
├── attachments
└── executor.json

These are the raw files used to build the final report.

Step 5: Generate the HTML Report

Run:

npm run allure:generate

Expected output:

Report successfully generated.

A new directory is created:

allure-report/

Inside:

allure-report
│
├── index.html
├── app.js
├── plugins
├── widgets
└── history

The report generation command produces the allure-report folder.

Step 6: Open the Report

Run:

npm run allure:open

Allure starts a local server:

http://127.0.0.1:5050

The report opens automatically in your default browser, allowing you to explore dashboards, suites, graphs, and test details.

Project Folder Structure

Playwright Project
│
├── tests
├── node_modules
├── playwright.config.ts
├── package.json
│
├── allure-results
│     ├── *.json
│     └── attachments
│
├── allure-report
│     ├── index.html
│     └── widgets
│
└── playwright-report

What Information Does Allure Capture?

By default, Allure records:

  • Test name
  • Execution status
  • Duration
  • Start and end time
  • Test suite
  • Error messages
  • Stack trace
  • Retries
  • Execution timeline

You can also enhance reports with:

  • Screenshots
  • Videos
  • Trace files
  • Environment details
  • Custom labels
  • Custom steps
  • Links to requirements or test cases

Common Commands

CommandPurpose
npm run test:allureExecute tests and generate Allure result files
npm run allure:generateBuild the HTML report
npm run allure:openOpen the generated report
npx playwright testRun Playwright tests only
npx playwright show-reportOpen Playwright’s built-in HTML report

Troubleshooting

Report is Empty

Possible causes:

  • Tests were not executed.
  • allure-results folder is empty.
  • Reporter is not configured correctly.

Solution:

npm run test:allure
npm run allure:generate

allure Command Not Found

Cause: allure-commandline is missing or not installed correctly.

Solution:

npm install --save-dev allure-commandline

Or run via:

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

Report Not Updating

Clean previous reports before regenerating:

rm -rf allure-results
rm -rf allure-report

Run the tests again and regenerate the report.

Best Practices

  • Keep both Playwright HTML and Allure reports enabled for different reporting needs.
  • Exclude allure-results and allure-report from version control to avoid committing generated artifacts.
  • Add screenshots and trace files for failed tests to improve debugging.
  • Generate a fresh report after every test execution.
  • Publish the allure-report folder as a CI/CD artifact in Jenkins or GitHub Actions for easy access.

Conclusion

Integrating Allure with Playwright provides a professional and feature-rich reporting solution that goes far beyond the default Playwright HTML report. By installing the required packages, configuring the Playwright reporter, adding npm scripts, executing tests, generating the report, and opening it locally, you can produce interactive reports that simplify debugging, improve test visibility, and make automation results easier to share with teams and stakeholders.

Leave a Comment