I wanted to make sure you understand exactly what Percy can do for you, hence the title. When you commit a change to your websites Git repo, like in a Pull Request workflow most of us live in, Percy will let you know if that change causes any visual changes to your site. It will show you exactly what those changes are: what pages, what media query breakpoint, what browser, etc.
It’s rather amazing.
Here’s a screenshot of the Percy dashboard when I did a change increasing the size of a button:
Hopefully, I intended that change. If I didn’t this is the moment that Percy is saving my butt. I can easily accidentally make visual changes by changing CSS that has a wider impact than I originally thought it would.
Once Percy is set up, it will be a part of the Pull Request checks that happen automatically:
Putting this kind of testing into your CI (Continous Integration) is the mighty powerful.
Percy has all kinds of powerful configuration, but it can also be quite simple. Percy! Go to this URL and take a screenshot of it! Percy! Go to this URL, click this button, then take a screenshot of that! If you’re familiar with the fantastically simple browser automation language Puppeteer, that’s what PercyScript uses.