Most engineering teams treat Playwright’s built-in HTML report as the default standard because it opens automatically, looks clean, and provides enough context to fix a failing Playwright assertion.
For a long time, I viewed it the same way and assumed reporting was a solved problem. If the report was green, the system was considered stable.
That assumption weakens as the test suite scales. With hundreds or thousands of tests running in parallel, the HTML report turns into a list of disconnected outcomes.
It shows where a failure occurred, but it does not tell me whether the same test failed last week, whether retries are masking instability, or whether failures spike after specific changes.
That changed when I integrated Allure with Playwright. Instead of opening a report only when something failed, I started looking at test behavior over time. I could see which tests were consistently flaky, which failures clustered around specific environments, and which parts of the suite were quietly degrading.
Overview
What is Allure Playwright?
Allure Playwright is a reporter for the Playwright testing framework that generates interactive HTML reports. It captures step-level execution details, screenshots, videos, and trace data, offering deeper visibility than Playwright’s built-in HTML report.
Key Features and Capabilities of Allure Playwright
Once the report is generated, Allure surfaces execution data in ways that are hard to extract from a single Playwright run.
- Execution history: Tracks results across suites, retries, and runs to expose recurring failures and flakiness
- Automatic attachments: Collects screenshots, videos, and traces without additional test code
- Rich annotations: Adds descriptions, links, and metadata using Runtime or Metadata APIs
- Step-level breakdown: Splits tests into clear, navigable actions for faster root-cause analysis
- Environment context: Displays runtime details directly on the report overview page
How to Install and Setup Allure Playwright
Allure integration has two required parts: data capture and report generation.
- Install the Playwright adapter to capture execution data during test runs:
npm install –save-dev @playwright/test allure-playwright
- Install the Allure Command Line to generate HTML reports from captured data:
npm install -D allure-commandline
- Register Allure as a reporter in playwright.config.ts:
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
reporter: [[“line”], [“allure-playwright”]],
});After this, every Playwright run produces raw Allure result files.
Configuration Options for Allure Playwright
Reporter behavior is controlled from playwright.config.ts.
- resultsDir: Directory where Allure stores raw results (default: allure-results)
- detail: Automatically creates steps for Playwright actions
- suiteTitle: Groups tests into suites based on file names
- environmentInfo: Adds environment metadata to the report homepage
Example Configuration with Custom Options
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
reporter: [
[‘allure-playwright’, {
detail: true,
outputFolder: ‘allure-results’,
environmentInfo: {
os: process.platform,
node_version: process.version,
},
}],
],
});
In this article, I will show exactly how I integrated Allure with Playwright, what I configured beyond the defaults, and how those reports started surfacing issues I was missing before.
Prerequisites for Integrating Allure with Playwright
Before integrating Allure, you need a few essentials in place to ensure the reports capture meaningful test insights:
- A functioning Playwright project: Your tests must use @playwright/test with a valid playwright.config.ts, since Allure relies on Playwright’s reporter system.
Also Read: How to install Playwright in 2025
- Node.js installed and configured: Allure’s reporter and CLI run on Node.js. Without it, you cannot install dependencies or generate reports.
- npm or yarn access: You need a package manager to add allure-playwright and allure-commandline as development dependencies.
Read More: How to Update a Specific Package using npm
- Runnable and reliable tests: Tests should execute successfully with npx playwright test before adding Allure. Unstable or failing tests will generate noisy reports that are harder to interpret.
- Access to a local or CI environment: You need permission to generate report files and open them, whether locally or in a continuous integration pipeline. This ensures Allure can process and display test results consistently.
Having these prerequisites ready allows you to integrate Allure smoothly without refactoring your tests or worrying about broken configurations.
How to Install Allure Dependencies for Playwright
Follow these steps to install Allure and prepare your Playwright project for reporting:
Step 1: Install the Playwright reporter
Add allure-playwright as a development dependency. This reporter captures test execution details, including steps, retries, screenshots, and traces.
npm install –save-dev @playwright/test allure-playwright
Step 2: Install the Allure CLI
The CLI generates HTML reports from the raw result files. Without it, you cannot view interactive reports.
npm install -D allure-commandline
Step 3: Verify the installation
Run your Playwright tests as usual with:
npx playwright test
The reporter automatically writes results into the allure-results folder after each run. No changes to your existing tests are required.
How to Configure Allure Reporting in a Playwright Project
Follow these steps to configure Allure and control how your test results are captured and displayed:
Step 1: Add Allure to the reporters array
Open your playwright.config.ts and include allure-playwright in the reporter section. You can keep existing reporters, such as line, for console output:
import { defineConfig } from ‘@playwright/test’;export default defineConfig({
reporter: [[“line”], [“allure-playwright”]],
});Step 2: Customize reporter behavior (optional)
You can configure how Allure captures and structures results:
- resultsDir: Directory where raw results are saved (default: allure-results)
- detail: If true (default), automatically creates step-level events for each test action
- suiteTitle: If true (default), groups tests into suites based on file names
- environmentInfo: Add key-value metadata to display on the report homepage
Here is an example configuration with custom options
import { defineConfig } from ‘@playwright/test’;
export default defineConfig({
reporter: [
[“allure-playwright”, {
detail: true,
resultsDir: “allure-results”,
environmentInfo: {
os: process.platform,
node_version: process.version,
},
}]
],
});Step 3: Save and verify
Run a test with npx playwright test. The allure-results folder should now contain structured data ready for generating reports.
Also Read: How to configure Playwright Tests in 2025
How to Generate Allure Reports from Playwright Test Runs
Once Allure is installed and configured, follow these steps to generate and view interactive reports from your test executions.
Step 1: Run your tests
Execute your Playwright test suite as usual:
npx playwright test
The allure-playwright reporter automatically creates raw result files in the allure-results folder.
Step 2: Generate and open the report immediately
If you want to view the report right after the test run, use:
npx allure serve allure-results
This command generates the HTML report and opens it in your default browser. The report includes all captured steps, attachments, and test metadata.
Also Read: Playwright Test Report: Comprehensive Guide
Step 3: Generate the report separately for later use
To generate the HTML report without opening it immediately:
npx allure generate allure-results –cleannpx allure open
- –clean ensures old results are removed before generating the new report.
- npx allure open launches the report in a browser for detailed inspection.
Step 4: Verify report contents
Check that your report shows:
- Step-level execution breakdowns
- Screenshots and videos for failed steps
- Retry history and test suite grouping
- Environment metadata if configured
How to Add Attachments, Screenshots, and Test Metadata to Allure Reports
Allure can capture rich artifacts and metadata automatically or via explicit steps. Follow these steps to enhance your reports:
Step 1: Capture screenshots on failure
Playwright can take screenshots automatically during tests. Allure attaches them to the report if they are saved in the test context:
test(‘example test’, async ({ page }) => { try {
await page.goto(‘https://example.com’);
await expect(page.locator(‘h1’)).toHaveText(‘Example Domain’);
} catch (error) {
await page.screenshot({ path: ‘screenshots/failure.png’, fullPage: true });
throw error;
}
});Step 2: Add videos and traces
Enable video or trace collection in playwright.config.ts. Allure automatically links them to the corresponding test:
use: { video: ‘on’,
trace: ‘retain-on-failure’,
}Step 3: Annotate tests with metadata
Use Allure annotations to enrich the report with descriptions, links, and labels:
import { test, expect } from ‘@playwright/test’;import { allure } from ‘allure-playwright’;
test(‘annotated test’, async () => {
allure.description(‘This test validates the homepage heading’);
allure.link(‘https://example.com/docs’, { name: ‘Documentation’ });
allure.label(‘priority’, ‘high’);
});
Step 4: Verify attachments and metadata in reports
Run your tests and generate the Allure report. Check that:
- Screenshots and videos are linked to failed steps
- Descriptions and labels appear for each test
- Trace files show step-level execution details
How to Combine Allure Reporting with CI Pipelines
Integrating Allure with your CI pipeline ensures test results and artifacts are automatically collected and accessible after each run.
Step 1: Ensure Allure dependencies are installed in CI
Add allure-playwright and allure-commandline to your CI environment so tests can generate reports. For example, in a Node-based CI pipeline:
npm cinpm install -D allure-commandline
Step 2: Run Playwright tests in the pipeline
Execute tests as usual, ensuring allure-playwright is active. The allure-results folder will be generated after the run:
npx playwright test
Step 3: Generate Allure reports in CI (optional)
You can generate HTML reports directly in the pipeline or archive raw results for later viewing:
npx allure generate allure-results –clean
Step 4: Publish or archive the results
- Archive the allure-results folder as a CI artifact so it can be downloaded or visualized later.
- Some CI systems (Jenkins, GitHub Actions, GitLab) support Allure plugins to render the report directly in the pipeline UI.
Step 5: Validate CI integration
After the pipeline completes, check that:
- Raw results and attachments are available for download
- HTML reports are generated if desired
- Metadata, retries, and artifacts are correctly linked to each test
How Does BrowserStack Improve Test Reporting Compared to Allure?
Allure Reports provide a structured view of Playwright test results, including step-level actions, retries, screenshots, and basic attachments.
However, it stops at static HTML files. It cannot detect flaky tests, identify recurring failures, or consolidate results across multiple runs and environments. It also lacks AI-assisted failure analysis, cross-device insights, and real-time analytics, which makes debugging large test suites slower and less efficient.
Platforms like BrowserStack Test Reporting and Analytics address these gaps by providing end-to-end visibility into test execution. It centralizes results from multiple devices, browsers, and environments, making it easier to understand patterns, track failures, and improve test quality.
Here are the key features that make BrowserStack a powerful alternative:
- Test Reporting: Centralizes results from multiple devices, browsers, and environments for full visibility.
- AI-powered failure analysis: Categorizes failures and accelerates root-cause investigation.
- Test Analytics: Tracks historical trends, automation health, and key metrics across runs.
- Quality Gate: Enforce pass/fail thresholds to prevent low-quality builds from progressing in CI/CD pipelines.
- Test Monitoring: Receive alerts, visualize dashboards, and continuously track automation performance.
Conclusion
Allure enhances Playwright reporting with step-level details, screenshots, videos, and metadata, making debugging and flaky test tracking easier. Still, it remains limited to single-run snapshots and lacks advanced analytics or cross-device insights.
BrowserStack Test Reporting & Analytics goes further by consolidating results across browsers and devices, offering AI-powered failure analysis, dashboards, quality gates, and monitoring. It transforms raw test data into actionable insights, helping teams debug faster, track trends, and release with confidence.
