Powerful Reporting with Allure + Playwright

avin singhal — Sat, 26 Apr 2025 17:14:44 +0000

Tired of staring at plain console logs after test execution?

Upgrade your test reporting with Allure + Playwright for visual, structured, and insightful results!

I recently integrated Allure Reports with Playwright, and the outcome is impressive—especially for both UI and API automation

✅ Get Started with These Prerequisites

Add the following devDependencies to your package.json:

"@playwright/test": "^1.51.1",
"@types/node": "^22.14.0",
"allure-commandline": "^2.33.0",
"allure-js": "^0.0.1-security",
"allure-js-commons": "^3.2.1",
"allure-playwright": "^3.2.1"

In your playwright.config.ts or playwright.config.js, include:

reporters: [ ['list'], ['allure-playwright'] ]
Configure Allure CLI globally if needed:
npm install -g allure-commandline --save-dev

🧪 Sample Test File with Allure Integration

./e2e/allure-test.sepc.js

const { test } = require('@playwright/test')
import * as allure from "allure-js-commons";

test.describe('Allure Integration Example', () => {
 test('Login functionality test', async ({ page }) => {
 allure.owner('Automation User');
 allure.epic('User Authentication');
 allure.feature('Login Feature');
 allure.story('Valid Login Test');
 allure.severity('critical');
 allure.tag('smoke', 'login');
 allure.description('This test validates successful login with valid credentials');
 allure.testCaseId('TC-LOGIN-001');
 await allure.step('Open Login Page', async () => {
 await page.goto('https://example.com/login');
 await expect(page).toHaveTitle(/Login/);
 });
 await allure.step('Enter credentials', async () => {
 await page.fill('hashtag#username', 'testuser');
 await page.fill('hashtag#password', 'Password123');
 await page.click('button[type="submit"]');
 });

 await allure.step('Validate dashboard redirection', async () => {
 await expect(page).toHaveURL(/dashboard/);
 const screenshot = await page.screenshot();
 allure.attachment('Dashboard Screenshot', screenshot, 'image/png');
 });
 });
});

📸 Generate and View the Report

npx playwright test
allure generate --single-file allure-results --clean -o ./allure-reports

Then open: ./allure-reports/index.html

DEV Community: avin singhal

Powerful Reporting with Allure + Playwright

✅ Get Started with These Prerequisites

./e2e/allure-test.sepc.js

📸 Generate and View the Report