#178: Percy Catches Visual Changes in any Workflow

Programming - Mar 31, 2024

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.

Previous Next
We respect the property rights of others, and are always careful not to infringe on their rights, so authors and publishing houses have the right to demand that an article or book download link be removed from the site. If you find an article or book of yours and do not agree to the posting of a download link, or you have a suggestion or complaint, write to us through the Contact Us .
Read More