Automation Testing with Playwright and Java Script — Part III (Allure Reporting)

Shubham Kumar
The SK’s Guide to Automation Testing
3 min readMar 12, 2022

Hello learners, In the previous article, we have looked about the reporter. So Playwright test supports three built-in reporters — line, list and dot.

Playwright also supports some third party reporting tools like Allure Report. In this article we’ll look about the Allure Report integration with Playwright tests.

Allure Report

Allure Report is a flexible multi-language test report tool. which provide a detailed representation of what has been tested end extract max from the everyday execution of tests.

Allure Framework is a set of adaptors and examples for the Allure Report.

Install Allure Report

By using below command you can install allure-playwright

To open the allure report, you need to have allure command dependency need to be installed on your machine.

After installing both dependencies you can verify in package.json file.

Execute Playwright Tests with Reporter option

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

After run above command you can see allure-results directory into your project which contains all the JSON files.

Generate Allure-Report

npx allure generate .\allure-results\ --clean

After executing this command you can see allure-report directory, which contain one index.html file which can be served on browser.

Open The Allure Report

npx allure open .\allure-report\

This command will serve your report on your browser.

If you want to run the report on localhost then run the below command —

npx allure open -h localhost .\allure-report\

You can see the Allure Report output as below

Configure NPM scripts

  • To run the test and create allure report — npm run run-allure .
  • If you want all old tests in your report then remove prerun:allure .
  • If you don’t want to open the report just after complete the test execution then remove postrun:allure .

Conclusion

I hope the above examples have shown that you can easily add pretty beautiful Allure HTML reporter into your Playwright project.

You can see the complete code here which is explained in this article.

Resources:

  1. Playwright Official Docs
  2. Microsoft Playwright GitHub Community
  3. Microsoft Playwright Tests

Happy Learning!!!

Thanks for reading and sharing! :)

If you liked this article, feel free to 👏👏👏 a few times up to 50 times, Seriously.

--

--