Playwright reporting with Allure

4 min readJan 15, 2023

Playwright also supports reporting with third-party reporters like Allure, Monocart, Tesults, and ReportPortal. Let’s check out how we can configure, install and view Allure Report with Playwright test.

What is Allure Framework?

Allure Framework is a flexible lightweight multi-language test report tool that not only shows a very concise representation of what have been tested in a neat web report form, but allows everyone participating in the development process to extract maximum of useful information from everyday execution of tests.

From the dev/qa perspective Allure reports shorten common defect lifecycle: test failures can be divided on bugs and broken tests, also logs, steps, fixtures, attachments, timings, history and integrations with TMS and bug-tracking systems can be configured, so the responsible developers and testers will have all information at hand.

From the managers perspective Allure provides a clear ‘big picture’ of what features have been covered, where defects are clustered, how the timeline of execution looks like and many other convenient things. Modularity and extensibility of Allure guarantees that you will always be able to fine-tune something to make Allure suit you better.

Installing Allure command line

We would require to first install Allure in required environment. This can be done via following ways:

Linux

For debian-based repositories a PPA is provided:

sudo apt-add-repository ppa:qameta/allure
sudo apt-get update 
sudo apt-get install allure

Mac OS X

For Mas OS, automated installation is available via Homebrew

brew install allure

Windows

For Windows, Allure is available from the Scoop commandline-installer.

To install Allure, download and install Scoop and then execute in the Powershell:

scoop install allure

Installing and configuring allure-playwright

Now, we need to integrate Allure with Playwright Test framework. To do so, follow the below instructions:

npm i -D @playwright/test allure-playwright

Either add allure-playwright into playwright.config.ts:

{
  reporter: "allure-playwright";
}

Or pass the same value via config file:

{
  reporter: [['line'], ['allure-playwright']]
}

Or pass the same value via command line:

npx playwright test --reporter=line,allure-playwright

Specify location for allure results:

Location for allure results can be defined in command line with variable ALLURE_RESULTS_DIR.

Mac / Linux

ALLURE_RESULTS_DIR=my-allure-results npx playwright test --reporter=line,allure-playwright

Windows

set ALLURE_RESULTS_DIR=my-allure-results
npx playwright test --reporter=line,allure-playwright

For example, to run your tests on Mac OS, execute below command

ALLURE_RESULTS_DIR=my-allure-results npx playwright test tests/example.spec.ts --reporter=line,allure-playwright

The above will generate Allure Results folder with the name ‘my-allure-results’.

Generate Allure Report

Now that we have Allure Results files in our project, we can now generate Allure Report folder by:

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

Open Allure Report

In order to view the report:

allure open allure-report

This will open the report by starting a web server locally.

shivjirwankar@Shivs-MacBook-Air Playwright-practice % allure generate my-allure-results -o allure-report --clean
Report successfully generated to allure-report
shivjirwankar@Shivs-MacBook-Air Playwright-practice % allure open allure-report
Starting web server...
2023-01-15 18:26:46.073:INFO::main: Logging initialized @199ms to org.eclipse.jetty.util.log.StdErrLog
Server started at <http://192.168.1.2:55806/>. Press <Ctrl+C> to exit