Use a visual regression testing platform

[MrGreenTea]

Right now we use playwright snapshots directly which works but does not allow approval of changes (or just by running pnpm run update-snapshots)

Some options are:

• percy
• argos
• applitools

There might be more options which should be checked for pricing, features and ease-of-use

[MrGreenTea]

https://lost-pixel.com/

[MrGreenTea]

We could also just assign the design team when changes to the screenshots are detected. As we use gitstream already:

https://docs.gitstream.cm/automations/assign-reviewers-by-directory/

[MrGreenTea]

We could also just assign the design team when changes to the screenshots are detected. As we use gitstream already:

https://docs.gitstream.cm/automations/assign-reviewers-by-directory/

The comparison in the diff view kind off sucks for long screenshots like on mobile though...

[MrGreenTea]

We could also use browserstack to test on iOS devides. Currently we don't even test on simulated iPhone / WebKit

[MrGreenTea]

On first look two of them appeal to me the most:

• https://argos-ci.com/ because of their playwright integration
• https://lost-pixel.com/ because of their generous offering (7k screenshots / month)

With lost pixel though I can't find anything about their playwright integration as they seem to focus on storybook, ladle and next.js.

[MrGreenTea]

Lost pixels has some info about playwright here: https://docs.lost-pixel.com/user-docs/setup/project-configuration/modes#custom-shots

[MrGreenTea]

I like argos. It is easy to use and integrate with playwright.

Percy is very nice too and because they render the page on their side we also can get mobile and Safari screenshots without having to run the multiple browsers ourselves...

I think I prefer argos for now. It's integration with playwright makes it quite easy to use. Some integration to automatically add the project name to the screenshots for example would be nice.