Automation Testing with Playwright and Java Script — Part II (Reporter)

Shubham Kumar
The SK’s Guide to Automation Testing
4 min readMar 11, 2022

--

Hello learners, In the previous article, we have looked how to create basic structure of Playwright Framework with JavaScript. Without reporting the testing is incomplete. So, In this article let’s look into the reporting part which is supported in Playwright.

Playwright Tests supports a few built-in reporters to fulfill the different needs and provide the custom reporters accordingly. To achieve the built-in reporters, just pass --reporter in the command line options.

You can specify the reporter name programmatically in playwright configuration file.

Built-in reporters

Playwright tests support three types of built-in reporters. These reporters show detailed information about failures, and mostly differ in verbosity for successful runs.

  • List reporter: List Reporter is default but not in CI case (In CI dot reporter is default). It prints a line for each test case and add “ ✔ ” if test passes or add “ ✖ ” if fails.
  • Line reporter: Line reporter is more concise than the list reporter. It uses a single line to report last finished test, and prints failures when they occur. Line reporter is useful for large test suites where it shows the progress but does not spam the output by listing all the tests.
  • Dot reporter: Dot reporter is very concise . It only shows a single character per successful test run. It is the default on CI and useful where you don’t want a lot of output. It shows dot “ . ” if passes or shows “ F ” if fails.

HTML reporter

HTML reporter generate a default report folder playwright-report that contains a report index.html for the test run and we can easily serve this report as a web page.

By default, HTML report is opened automatically if some of the tests failed. You can control this behavior via the open property in the Playwright config. The possible values for that property are always, never and on-failure (default).

By default, HTML report is written into the playwright-report folder in the project root directory. It can be overridden by changing the value of outputFolder property.

Open the last run test HTML report using command line —

Here is an example of HTML report.

Configure NPM scripts

  • To run the test using any built-in reporter — npm run run:reporter .
  • To serve the HTML report as a web page — npm run open:report .
  • To serve the HTML report from custom folder — npm run open:report my-report .

Conclusion

In playwright, we can integrate so many reports like built-in reporters, HTML Report, Custom Reporters, JUnit XML Reporter, JSON Reporter. In this article we have focused only in built-in and HTML Reporters. In next article we’ll talking about Third Party Reporter. It was really a great experience to explore this tool and good learning!

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! 😄 👏

--

--