Include attachments to your Playwright report

profile
Tim Deschryver
timdeschryver.dev

Automated testing with Playwright is a great way to ensure your application is working correctly, but testing a file can be a challenge.

This is not a simple task to automate and needs to be tested by a human to be thorough. However, we can do our best to make this easier than manually having to open the application, and then interact with it, just to download the file. This could be OK once or twice, but this quickly becomes a tedious task very fast. As a result that this test will be "forgotten".

Luckily, Playwright has a solution. By adding the file to the test report - which can later be included in an artifact created by a pipeline - the tester can easily access and download the file to check it.

Note

To set up a CI pipeline running Playwright, see GitHub Actions or Azure DevOps.

In this post, I will show you multiples ways how to add a file (or screenshot) to your Playwright report using testInfo.attach. To use TestInfo, add it as the second parameter of the test method.

Add a downloaded file to the report link

The first option is to add a file that is downloaded by the browser:

The playwright report contains the attached PDF file, which can be downloaded.

Add an external file to the report link

The second solution is to add a file that is available as an URL:

The playwright report contains the attached PDF file, which can be downloaded.

Add a screenshot to the report link

The last way is to take a screenshot of the page and attach it to the report. For this,

The playwright report contains the attached screenshot, which is immedietly visible.

Conclusion link

In this post, we've seen how we can attach different files as an attachment to the Playwright report. Doing this makes it easier to access these files in order to verify their correctness.

Even if these files are not verified on each run, we can store a history of these files. In the case that something is off, we can go back in time and pinpoint the exact commit that has caused the difference,

Incoming links

Outgoing links

Feel free to update this blog post on GitHub, thanks in advance!

Join My Newsletter (WIP)

Join my weekly newsletter to receive my latest blog posts and bits, directly in your inbox.

Support me

I appreciate it if you would support me if have you enjoyed this post and found it useful, thank you in advance.

Buy Me a Coffee at ko-fi.com PayPal logo

Share this post

Twitter LinkedIn