WWW…Wednesday! Percy: Visual Regression Testing

by Taylor Slattery | November 13, 2019

Small changes made to the visual appearance of a site can cause unintended consequences. Elements can move out of alignment causing difficulty for users. Humans are prone to error, and if left up to us, these often subtle mistakes can go unnoticed. Percy is an automated quality assurance tool that does the job for you. It uses snapshots of your site or app as master documents to compare all future changes against. It analyzes them for differences and notifies you of any it detects, for you to either approve and proceed with the roll-out or amend your code.

percy-changes-dashboard

To ensure a consistent customer experience, Percy compares snapshots across all major browsers and also includes responsive testing, to make sure UIs work on both mobile and desktop. In addition to checking visual differences, Percy can check components and their functionality. Naturally, most web development work is a group undertaking, and thankfully Percy has an integrated suite of tools geared towards collaboration, allowing for members of the team to leave comments and notify others of any changes. It also stores a record of previous edits which is helpful for troubleshooting further down the line.

percy visual diff

Percy is useful for large and small teams alike. Time is precious and trying to manually review changes across every page, supported browser, and use case, is a huge drain on time and resources. Percy is quick and simple to use. After the hard coding work is complete, teams can perform visual consistency tests and have their results in a matter of minutes. Percy is used by companies like Google, Canva, and Shopify, with engineers on all of their teams singing its praises. For large companies like these, with even larger user-bases, maintaining style guides is of the utmost importance. Manually checking updates prior to roll-out can prove to be next to impossible. Percy helps developers to feel more confident whether making major changes to a UI or just shipping small updates.

percy change timeline

Its pricing system works on a per-snapshot basis, with a free plan allowing for up to 5000 monthly snapshots and a team of 10 members. You can sign up for Percy or learn more here.