#166: Learn to Integrate Visual Testing with Percy

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

Did you know that you can set up a review system so that every pull request you make shows you exactly what has changed visually on your site?

That’s exactly what Percy does. It assumes what you have on master is correct (configurable) and, when you do a pull request, it literally takes screenshots and compares them to the screenshots of what is on master. If anything has changed, it lets you know, just like unit or integration tests would. Approve them and notice something is wrong? Fix it and review the changes again.

It’s incredible this kind of testing is available. This is how you can really bring confidence to your team in that it’s doing exactly what you think it is going to when folks make design or content changes.

In this video, I pair up with Mike Fotinakis (co-founder of Percy) to demonstrate all that, then literally get it all set up and going on a site. We’ll work on a local site using Eleventy, toss it up live on Netlify, integrate CircleCI into the GitHub repo for the site, and configure that to run Percy.

It’s pretty magical and I really recommend you check it out so you know the level of visual testing that is possible these days.