How to Integrate Allure Report with Playwright

Most engineering teams treat Playwright & # 8217; s built-inHTML storyas the default standard because it opens mechanically, looks light, and provides decent circumstance to fix afailing .

For a long time, I viewed it the same way and assumedreporting was a solved problem. If the report wasgreen, the system was considered stable.

That assumption undermine as the scales. With hundreds or thousands of tests scarper inparallel, the HTML report become into a leaning ofunplug outcomes.

It present where a failure occurred, but it does not state me whether thesame test failed last week, whether retries are mask instability, or whether failuresspike after specific changes.

That changed when Iintegrated Allure withPlaywright. Instead of open a report only when something failed, I depart seem attest behavior over time. I could see which examination wereconsistently flaky, which failures clustered aroundspecific surround, and which parts of the suite werequietly disgrace.

npm install & # 8211; save-dev @ playwright/test allure-playwright

npm install -D allure-commandline

import {defineConfig} from & # 8216; @ playwright/test & # 8217;;
export default defineConfig ({
reporter: [[& # 8220; line & # 8221;], [& # 8220; allure-playwright & # 8221;]],

});

In this article, I will show precisely how I integrate Allure with Playwright, what I configure beyond the defaults, and how those story started surfacing issues I was missing before.

Prerequisites for Integrating Allure with Playwright

Before integrating Allure, you want a few essentials in place to ensure the reports seizure 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.

• instal and configure:Allure & # 8217; s reporter and CLI run on Node.js. Without it, you can not establish dependencies or return report.
• npm or yarn accession:You want a package manager to add allure-playwright and allure-commandline as evolution dependencies.

• Runnable and reliable tests:Tests should execute successfully withnpx playwrighttest before impart Allure. Unstable or failing tests will give noisy reports that are harder to see.
• Access to a local or CI environment:You need permission to return report files and open them, whether locally or in a pipeline. This check Allure can treat and exhibit test results systematically.

Having these prerequisites make allows you to integrate Allure swimmingly without refactoring your tests or worrying about broken contour.

How to Install Allure Dependencies for Playwright

Follow these steps to instal Allure and prepare your Playwright project for reporting:

Step 1: Install the Playwright reporter
Add allure-playwright as a development colony. This newsperson enamor test performance details, including stairs, retries, screenshots, and traces.

For autonomous testing across multiple user personas, check out SUSATest — it explores your app like 10 different real users.

npm install & # 8211; save-dev @ playwright/test allure-playwright

Step 2: Install the Allure CLI
The CLI generates HTML reports from the raw resultant file. Without it, you can not 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 compose results into the allure-results folder after each run. No changes to your existing tryout 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 display:

Step 1: Add Allure to the reporters array
Open your playwright.config.ts and include allure-playwright in the newsman subdivision. You can keep subsist reporters, such as line, for console output:

signification {defineConfig} from & # 8216; @ playwright/test & # 8217;; exportation nonremittal defineConfig ({
reporter: [[& # 8220; line & # 8221;], [& # 8220; allure-playwright & # 8221;]],

});

Step 2: Customize reporter behavior (optional)
You can configure how Allure captures and structures results:

• resultsDir: Directory where raw results are save (default: allure-results)
• detail: If true (default), automatically creates step-level events for each test activity
• suiteTitle: If true (default), groups exam into retinue based on file names
• environmentInfo: Add key-value metadata to display on the report homepage

Here is an instance configuration with custom choice

importation {defineConfig} from & # 8216; @ playwright/test & # 8217;;
export nonpayment defineConfig ({
reporter: [
[& # 8220; allure-playwright & # 8221;, {
detail: true,
resultsDir: & # 8220; allure-results & # 8221;,
environmentInfo: {
os: process.platform,
node_version: process.version,

},

}]

],

});

Step 3: Save and verify
Run a test with npx playwright test. The allure-results pamphlet should now contain integrated data ready for render account.

How to Generate Allure Reports from Playwright Test Runs

Once Allure is establish and configured, follow these steps to render and regard interactive report from your test executions.

Step 1: Run your tests
Execute your Playwright test cortege as usual:

npx playwright test

The allure-playwright newsman automatically creates raw result files in the allure-results pamphlet.

Step 2: Generate and open the report immediately
If you want to see the report right after the tryout run, use:

npx allure serve allure-results

This command render the HTML report and opens it in your default browser. The report includes all captured steps, attachments, and test metadata.

Step 3: Generate the account separately for later use
To generate the HTML study without opening it forthwith:

npx allure generate allure-results & # 8211; cleannpx allure open

• & # 8211; clean ensures old resolution are removed before generating the new report.
• npx allure open launches the study in a browser for detailed inspection.

Step 4: Verify report contents
Check that your report display:

• Step-level executing crack-up
• Screenshots and videos for failed stairs
• Retry history and test retinue grouping
• Environment metadata if configure

How to Add Attachments, Screenshots, and Test Metadata to Allure Reports

Allure can fascinate rich artifacts and metadata automatically or via explicit steps. Follow these stairs to enhance your reports:

Step 1: Capture screenshots on failure
Playwright can take screenshots automatically during trial. Allure attach them to the report if they are saved in the test context:

test (& # 8216; example test & # 8217;, async ({page}) = & gt; {try {
await page.goto (& # 8216; https: //example.com & # 8217;);
await expect (page.locator (& # 8216; h1 & # 8217;)) .toHaveText (& # 8216; Example Domain & # 8217;);
} gimmick (error) {
await page.screenshot ({way: & # 8216; screenshots/failure.png & # 8217;, fullPage: true});
throw error;

}

});

Step 2: Add picture and traces
Enable picture or tincture aggregation in playwright.config.ts. Allure mechanically tie them to the corresponding test:

use: {video: & # 8216; on & # 8217;,
trace: & # 8216; retain-on-failure & # 8217;,

}

Step 3: Annotate test with metadata
Use Allure annotations to enrich the report with description, links, and labels:

import {tryout, expect} from & # 8216; @ playwright/test & # 8217;; import {allure} from & # 8216; allure-playwright & # 8217;;

test (& # 8216; annotated test & # 8217;, async () = & gt; {
allure.description (& # 8216; This tryout validates the homepage heading & # 8217;);
allure.link (& # 8216; https: //example.com/docs & # 8217;, {gens: & # 8216; Documentation & # 8217;});
allure.label (& # 8216; precedency & # 8217;, & # 8216; high & # 8217;);

});

Step 4: Verify attachments and metadata in reports
Run your test and generate the Allure report. Check that:

• Screenshots and videos are linked to failed measure
• Descriptions and labels appear for each test
• Trace files show step-level execution particular

How to Combine Allure Reporting with CI Pipelines

Integrating Allure with your CI line ensures test effect and artifacts are mechanically 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 combat-ready. The allure-results pamphlet will be generate after the run:

npx playwright examination

Step 3: Generate Allure reports in CI (optional)
You can generate HTML reports direct in the pipeline or archive raw consequence for later viewing:

npx allure generate allure-results & # 8211; clean

Step 4: Publish or archive the results

• Archive the allure-results folder as a CI artefact so it can be downloaded or figure later.
• Some CI systems (Jenkins, GitHub Actions, GitLab) support Allure plugins to render the report directly in the pipeline UI.

Step 5: Validate CI consolidation
After the pipeline completes, ensure that:

• Raw results and attachments are available for download
• HTML reports are generated if desired
• Metadata, retries, and artifacts are correctly relate to each test

How Does BrowserStack Improve Test Reporting Compared to Allure?

Allure Reports provide a structured sight of Playwright test consequence, including step-level actions, retries, screenshots, and basic attachments.

However, it stops at static HTML file. It can not detect flaky examination, identify recurring failures, or consolidate results across multiple footrace and environments. It also lacks AI-assisted failure analysis, cross-device perceptivity, and real-time analytics, which make debug large test suites slower and less efficient.

Platforms like address these crack by ply end-to-end visibility into test executing. It concentrate results from multiple devices, browser, and environments, get it easier to translate patterns, track failure, and improve test quality.

Here are the key features that make BrowserStack a powerful choice:

• :Centralizes upshot from multiple device, browser, and environments for total visibility.
• :Categorizes failure and accelerates root-cause investigation.
• :Tracks historic trend, automation health, and key prosody across runs.
• :Enforce pass/fail door to forestall low-quality builds from progressing in CI/CD pipelines.
• :Receive alerts, visualize dashboards, and continuously track automation performance.

Talk to an Expert

Conclusion

Allure enhances Playwright reporting with step-level point, screenshots, videos, and metadata, create debugging and flaky exam tracking easier. Still, it remains limited to single-run shot and deficiency advance analytics or cross-device insights.

BrowserStack Test Reporting & amp; Analytics goes further by consolidating results across browser and devices, offering AI-powered failure analysis, dashboards, lineament gates, and monitoring. It transforms raw test information into actionable insights, helping teams debug faster, track course, and release with confidence.

Related Guides