How to integrate Allure report with Playwright

KailashPathak

3 min readSep 10, 2022

Why is Allure Reporting to Playwright?

Easy to install
Allure reports provide great presentational diagrams
Clear and nice reporting UI
Can easily investigate test run

Playwright Installation

Create a new folder, which I called project playwright_With_JavaScripts

Step to Install Playwright

To install playwright, in the project folder i.e playwright_With_JavaScripts:> run npm init playwright.
In the terminal below option display either select TypeScript Or JavaScript (In our case I am selecting JavaScript)

Once Installation is done we can see in package.json playwright dependency is added

Some of the Commands in Playwright

npx playwright test
Runs the end-to-end tests.
npx playwright test — project=chromium
Runs the tests only on Desktop Chrome.
npx playwright test example
Runs the tests in a specific file.
npx playwright test — debug
Runs the tests in debug mode.
npx playwright codegen
Auto generate tests with Codegen.

Test Case for Automation

Let’s take a simple example of execution

Open the site qaautomationlabs.com/
Verify the title of the page
After opening the site click on the Menu “Blogs”

Allure Playwright Installation

Enter the below commands in your command line to install allure

npm i -D @playwright/test allure-playwright

or via yarn:

yarn add @playwright/test allure-playwright --dev

After installation, we can see allure-playwright dependency in package.json

Run Test cases and Generate Allure Report

To generate an Allure report we have to follow the below steps

i) We have to pass reporter=”line” which will generate a report in plain text format in command npx playwright test

ii) Once we get data in plain text (How many test cases pass/how many fail ) using this data allure generate the report with the help of command allure-playwright

Steps 1

npx playwright test — reporter=line,allure-playwright

Above command generate Folder allure-results