⚙️ Automatic snapshot creation in CI for Playwright

It can be tedious to update baseline images as a part of your visual regression suite, so I’ve created a pipeline to automatically generate them and open a pull request for you

Introduction

Visual regression with Playwright is generally very simple, and you can create suites of tests quickly with it. The only aspect that I’ve found quite tedious, is the updating of baseline images when the website has changed.

The updating of images is just a one line command npx playwright test --update-snapshots, but the complexity comes with where your tests are executed.

If we run that command on my local machine and then try to execute the tests on a CI pipeline, they will almost certainly fail as the test execution environment is different.

Solution?

The first solution is to use Docker containers, and this is generally how everyone approaches it. You run a CI pipeline that uses an image mcr.microsoft.com/playwright:v1.49.0-noble for example, and your visual snapshots will always be the same dimensions.

Next you add a step in the CI pipeline to create a zip file with your new baseline images, pull them to local, create a branch and a new PR and push your new baseline images to master/main.

That’s the part I don’t like — too much human intervention.

So let’s automate it.

Read the full blog post here: https://garyparker.dev/blog/automatic-snapshot-creation-in-ci-for-playwright