Running Playwright Tests on CI with GitHub Actions
Tags: playwright, testing, vscode, githubactions
Published: 2023-11-29 17:00:00

Running tests locally is great but really you want your tests running on Continuous Integration so that each time you make a change to your code your tests are run on each commit or pull request helping to ensure your changes are not going to break your production code. In this video lets take a look at how to run those tests on CI

In this post lets take a look at how to run tests on Continuous integration, on each commit and pull request helping to ensure your changes are not going to break your production code.

Playwright works with all CI providers so make sure you check out the docs for how to set them up. My favourite is GitHub of course and as Playwright comes with a built in GitHub action all you need to do to have tests running on CI is simply push your code to a GitHub repo and watch the GitHub action do its job. 

## What happens on CI? 

The headless browsers are installed as well as Playwright and the tests are then run on each of the headless browsers as configured in your Playwright config file.

If all tests pass, then a green check mark is shown but more importantly if your tests fail it means you can fix your code before merging your code changes. You really don't want to be sending bugs into production. 

## How can we understand what failed on CI? 

Just like when developing, in CI you also have access to a full trace of your tests which gets generated on the first retry of a failed test. 

Click on the summary link and scroll down to the artifact section where you can see a Playwright report which you can download by clicking on it. Check out the docs for how to [open the HTML report locally](https://playwright.dev/docs/ci-intro#viewing-the-html-report) or how to [publish the report to the web](https://playwright.dev/docs/ci-intro#publishing-report-on-the-web). 

The HTML report gives you a report for each test. Traces are recorded on the first retry of a failed test. In the report you can see the errors and test steps as well as the trace which you can open by clicking on it. From here you can easily debug your test just like when developing and once find the problem and fix it you can push your changes and your test will run again. This time when your tests pass you can simply merge your PR and finish work knowing that your code is not going to break production. 

![playwright html report](https://github.com/microsoft/playwright/assets/13063165/c5f60e56-fb75-4a2d-a4b6-054b8c5d69c1)

## Conclusion

Testing is an important part of software development. I hope I've shown you how writing tests can be easy and fun and done by anyone, ensuring you have more confidence in the code you write and push to production.

I look forward to you giving Playwright a try and I hope that we all create better experiences for our users by testing our code and ensuring less bugs end up in production. Happy testing everyone.  

To learn more on Playwright don’t forget to check out the [docs](https://playwright.dev/docs/getting-started-vscode), subscribe to our [YouTube channel](https://www.youtube.com/@Playwrightdev) and join our [community server on discord](https://aka.ms/playwright/discord). Look forward to seeing you there.


## Check out the Video

{% embed https://youtu.be/gRXPp6RuExU %}

## Useful Links

- [Playwright docs](https://playwright.dev/docs/getting-started-vscode)
- Join our [Discord server](https://aka.ms/playwright/discord)
- Subscribe to the [Playwright YouTube channel](https://www.youtube.com/@Playwrightdev)