Getting started with visual testing in 5 minutes

Introduction

There are tons of tools out there that help you make sure your app is functioning perfectly, but how do you catch bugs that are purely visual?

👁 screenshot of a signup page with a button missing text

In the example above, the button still works, and the text is actually still there, but the link somehow changed to be the same color as the button.

You could write regression tests to ensure that the text is always white, and the button is always green, but across hundreds of pages and states, that becomes unruly very fast. So in lieu of (or in addition to) writing line after line of regression tests, you might manually check all those pages before deploying. But we all know how time-consuming and imperfect manual QA can be.

That’s where visual testing comes in.

Visual testing is a new way to have confidence in your UI. Instead of manually checking your UI or testing the code underneath, visual testing detects pixel-by-pixel changes on every commit automatically. Visual testing can save you time reviewing code and ensuring no visual bugs make their way to production.

In this tutorial, we’ll walk through integrating the Percy visual testing service with an example app, reviewing visual changes, and running visual reviews as part of your day-to-day workflow.