How to Generate Playwright Allure Report in JavaScript

Playwright is a modern end-to-end testing framework that helps developers automate web applications across browsers like Chrome, Firefox, and Safari. It is fast, reliable, and widely used for testing in JavaScript and TypeScript projects.

When running automated tests, the execution alone is not enough; you also need clear and detailed insights into the results. This is where test reporting becomes important. A good reporting tool helps teams quickly identify failures, track test history, and share results with stakeholders.

Allure Report is one of the most popular reporting frameworks available today. It provides visually rich reports with test execution details, screenshots, and logs, making it easier to analyze results.

In this guide, we’ll walk through how to set up and use the Playwright Allure Report in JavaScript. You’ll learn the installation steps, configuration options, and how to generate comprehensive test reports with Allure.

What is Allure Report and Why Use It?

Allure Report is a flexible and lightweight reporting tool designed to make test results easy to read and understand. Instead of plain console logs, it provides an interactive web-based dashboard where you can explore test execution details.

Key Features of Allure Report

• Visual Test Results: Displays passed, failed, skipped, and broken tests in a clean UI.
• Execution History: Helps track test performance and stability over multiple runs.
• Attachments Support: Allows adding screenshots, videos, and logs for failed steps.
• Detailed Insights: Shows test steps, parameters, and execution times for better debugging.

Benefits of Using Allure with Playwright

When integrated with Playwright, Allure enhances the overall testing workflow. Developers and QA teams can:

• Quickly identify failed tests with visual feedback.
• Attach screenshots and logs for better debugging of UI issues.
• Track test trends and stability over time.
• Share test reports easily with team members or stakeholders.

Playwright Test Reporting with Allure

By combining the power of Playwright’s cross-browser automation with the rich visualization of Allure, you get a complete testing solution. Playwright test reporting with Allure not only improves visibility but also helps teams save time in analyzing test results and maintaining test quality.

Prerequisites for Setting Up Playwright with Allure

Before you start integrating Allure reporting with Playwright, make sure the following tools are installed on your system:

Install Node.js and VS Code

• Node.js: Playwright requires Node.js. Download and install it from the official website.
• VS Code: To write and run Playwright tests, download and install VS Code from the official website.

Install Playwright

The easiest way to install Playwright is by using the command given below in the VS Code terminal.

npm init playwright@latest

This command will:

• Create a sample test project.
• Install the Playwright test runner.
• Download the required browsers.
• Generate a default configuration file.

If you’re completely new to Playwright, check out this step-by-step beginner guide: Install Playwright in JavaScript (Beginner Friendly)

Installing and Configuring Allure in Playwright

Once Playwright is installed and ready, the next step is to integrate Allure so you can generate interactive test reports. Follow the steps below to set up and configure the reporting.

Step 1: Install Allure Command-Line Tool (Global Installation)

The Allure command-line tool is required to generate and open reports from the raw results. Install it globally using npm from the VS Code terminal:

npm install -g allure-commandline --save-dev

Verify installation:

allure --version

This ensures you can run the allure command from anywhere in your project.

Step 2: Install Allure Playwright Adapter

Now install the Allure Playwright adapter, which links Playwright with Allure:

npm install --save-dev allure-playwright

This adapter captures test execution details and stores them in the allure-results directory.

Step 3: Configure Allure Reporter in Playwright

Update your playwright.config.js file to use the Allure reporter:

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'], // default console output
    ['allure-playwright']
  ],
});

Step 4: Configure Allure Results Directory

You can specify where Allure should save test results by configuring the allure-resultsDir in playwright.config.js:

// playwright.config.js
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['allure-playwright', {
      outputFolder: 'allure-results', // allure-resultsDir configuration
    }]
  ],
});

Step 5: Example Test Case with Screenshot Attachments

Now, let’s create an example test that takes a screenshot on failure and attaches it to the Allure Report.

// tests/example.spec.js
import { test, expect } from '@playwright/test';
import { allure } from 'allure-playwright';

test('Open Google and check title', async ({ page }) => {
  await page.goto('https://www.google.com');
  
  try {
    await expect(page).toHaveTitle('Bing'); // Intentionally wrong to fail
  } catch (error) {
    // Capture screenshot on failure
    const screenshot = await page.screenshot();
    allure.attachment('Failure Screenshot', screenshot, 'image/png');
    throw error; // rethrow error so test is marked failed
  }
});

Step 6: Run Tests and Generate Allure Report

1. Run Playwright tests:

To execute the test case, enter the following command in the VS Code terminal:

npx playwright test

It will run our example test case across all Playwright-supported browsers: Chromium, Firefox, and WebKit.

2. Generate the Allure report:

Once the test case has been executed, run the following command to generate the Allure report:

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

After execution, this command generates the Allure report for all completed test cases.

3. Open the report in your browser:

To view the Allure report, run the following command:

allure open allure-report

You’ll now see a rich report with test execution details, including the screenshot attachment.

Best Practices for Allure Reporting with Playwright

Using Allure with Playwright can significantly improve visibility into your test results. However, to get the most out of it, you should follow a few best practices.

Organizing Tests for Clear Reports

• Keep test cases small, focused, and descriptive.
• Use meaningful test names so they appear clearly in the Allure dashboard.
• Group related tests into logical folders or describe blocks for better readability.
• Attach screenshots, logs, or videos for failing tests to speed up debugging.

Using Playwright with Allure Java / Node.js for Cross-Platform Reporting

• Playwright can be used in both Java and Node.js environments.
• With Allure integration, you get consistent reporting across teams using different tech stacks.
• If part of your team uses Java-based frameworks (like TestNG or JUnit) and others use Playwright with Node.js, Allure provides a unified reporting format.
• This makes it easier to compare test runs, analyze failures, and share reports company-wide.

By following these best practices, your Playwright Allure Report in JavaScript will be more informative, structured, and valuable for the entire team.

Conclusion

The Playwright Allure Report in JavaScript is a powerful way to make your test results more readable, structured, and actionable. By integrating Allure, developers and testers gain better visibility into test execution, including steps, labels, environment details, and failures with supporting evidence like screenshots or logs.

If you want to improve collaboration and speed up debugging, adding Allure to your Playwright test framework is a smart choice. It transforms plain test runs into interactive, detailed reports that help teams deliver quality software faster.

For deeper learning, explore these related Playwright tutorials:

• Playwright POM with JavaScript
• Data Driven Testing With Playwright
• Playwright Java Tutorial

Start using Playwright with Allure Reporting today and take your test automation reporting to the next level!