Introducing Visual Reviews 2.0
By: David Jones
Tags: Continuous Integration, Screenshot Testing, Visual Testing, Visual Testing Tools, Front End Development

Let’s go through some of the features we’ve added to support these goals.

Enhanced Performance: Review more in less time

Keyboard shortcuts: Nothing is faster than navigating builds with keyboard shortcuts. We have added shortcuts for many common functions and here are the important ones:

↑ and ↓ to go to the previous/next snapshot

and to go to the previous/next snapshot D to toggle the diff overlay

to toggle the diff overlay A to approve

to approve T to toggle between the Dark and Light modes

Faster loading builds: We have optimized our APIs that back the UI to speed up the initial load time of the build. Minimal time is spent waiting for builds to load so you can get on with your review immediately.

Create and review larger builds: We have rearchitected our API to make builds more scalable and performant. We now support builds with 10,000 snapshots or more.

Snapshot search: Built-in search helps you easily find a particular snapshot, or group of snapshots with a common name, with ease.

Improved Context: Clearly see where work stands

Visual change indicator: With our handy visual change indicator, you will never miss a diff again. A purple underline guides you precisely to the browser-width combo where a change has been detected.

Snapshot thumbnails: Build details are available at a glance with snapshot thumbnails allowing you to quickly browse your build, no matter how large, at a high level.

Filter snapshots: Filtering snapshots allows you to review exactly what you need to. Snapshots can be filtered by status, widths, browsers, changes requested, and also unreviewed or approved snapshots.

Better Flexibility: Customize your layout to your liking

Snapshot review modes: Snapshots are placed adjacently in the Side-by-side mode and stacked vertically in the Overlay mode. You can toggle between the two easily and control the arrangement.

Pro tip: ← and → in Overlay mode toggles between original and new screenshots.

Configurable panels: Our flexible panels remember how they were configured. They can easily be resized, and even be collapsed altogether for a clutter-free view, with a simple click.

Pro tip: the [ key toggles the filter panel.

Greater Customizability: Choose what’s best for your web app

Light and Dark modes: It’s more about visual ergonomics than aesthetics. Choosing the right mode will give emphasis to the snapshot that is being reviewed and help you stay focused on it. You can quickly toggle between the two modes by pressing the t key.

Pro tip: Use dark mode for lighter apps, and light mode for darker apps.

—

We are happy to see that the redesign has been well received by our beta users — here’s what they have to say about it:

“Just tried this new experience on a few builds and it looks great overall.” “We like it a lot so far. Just much easier to see everything at a glance, and go thru long lists of screen diffs.” “The new version looks great and works really well. Thanks Percy.” “Way easier and faster to use”

While hundreds of users gain visual confidence with their apps using Percy, our team is working behind the scenes to enhance Percy itself. You may not be able to see each one of those changes, but this is one — and a big one at that — that we’re excited to share with you. We hope you enjoy using it as much as we did building it!