Effortlessly Publish Playwright Reports with GitHub Pages

Playwright is a powerful tool for automating browser tests, but sharing reports with team members or clients can be challenging.

This blog post will guide you through using GitHub Pages and GitHub Actions to publish and share your Playwright reports easily.

Like videos instead? Checkout our YouTube video on publishing Playwright reports to GitHub pages.

‍
Sharing Reports

While you can run local reports using the command npx playwright show-report, which opens a port on your computer, sharing these reports with others requires a different approach. Here are some common methods and their drawbacks:

• Emailed Reports: You can zip the reports folder and email it, but the recipient will need to run Playwright and open the reports folder through an IDE to view the trace files.
• Individual Trace Files: Using the trace.playwright.dev website allows viewing trace files one at a time, but this can be inconvenient.

Publishing Reports with GitHub Pages

At Loop, we use GitHub Actions to publish reports to a GitHub Page. This approach allows anyone with internet access and the necessary credentials to view the report. Additionally, all trace files are hosted within the report itself.

Setting Up GitHub Pages

1. Enable GitHub Pages: Turn on GitHub Pages in the repository settings and set the source to GitHub Actions. This provides a default live site URL that extends from your base GitHub URL.
2. Ensure Privacy: Note that for non-enterprise GitHub accounts, GitHub Pages are public. Avoid including sensitive information.
3. Initial Setup: When you first load the site, it will be empty. You need to configure GitHub Actions to upload and deploy your report artifact.

Configuring GitHub Actions

In your GitHub Actions YAML file, use the configure-pages and pages-artifact actions to upload your artifact and deploy it to GitHub Pages.

Benefits of Using GitHub Pages

• Easy Access: Team members or clients can access the reports with a simple URL.
• All-in-One: The report includes all trace files, eliminating the need to handle multiple files.
• Hosted Solution: GitHub handles the hosting and maintenance, reducing your workload.

Considerations

• Publishing Time: As your test suite grows, the report publication might take longer, but the process is generally quick and reliable.
• Public Access: Ensure no sensitive information is included in public repositories.

Takeaway

Using GitHub Actions to publish Playwright reports to a GitHub Page is a convenient way to share test results with team members or clients. It allows easy access to all trace files and eliminates the hassle of dealing with multiple trace files for different tests. Plus, being hosted by GitHub means you don't need to worry about hosting or maintenance.

If you're working with Playwright and need a reliable way to share reports, consider using GitHub Actions to publish them to a GitHub Page.