Improved Percy snapshot rendering
We’re launching a handful of improvements and bug fixes to the core Percy renderer. These changes help make Percy’s visual reviews much more closely match the look of your real site.
Better font support
Based on your feedback, we improved font support in Percy’s renderer. Things should look much better now, for example:
If you’re still having problems with fonts, please reach out—there might be a project-specific fix you’ll need to make.
Fixed snapshot margin bug
We’ve fixed a long-standing (but at least deterministic) rendering bug that sometimes caused snapshots to be slightly cropped on the right side.
This finally makes mobile responsive tests and others look correct. As always, we’ve added internal regression tests as well for this—so this bug will never come back.
No more scrollbars!
We now remove the (unsightly) scrollbars by default, which also makes mobile responsive testing much cleaner:
Fixed a hover state bug
We also fixed a sneaky bug where hover states might be triggered on certain elements and cause false-positive visual diffs. Here’s a snapshot of Percy’s own frontend tests, where a row’s hover style caused annoying flaky visual diffs:
This happened because the mouse cursor (yes, even an xvfb virtual framebuffer has a mouse cursor) might be in a position to hover over an element and cause a flaky diff. We fixed this by — you guessed it — writing a script to move the mouse cursor to position 0,0 to get it out of the way of the browser.
Fixed various asset loading bugs
Quick background: Percy relies on a custom, internal proxy server in order to serve your page’s assets to our renderer. This is how Percy can render any pages from your dev/test environment without even needing those assets to exist in your production environment. This has been a core infrastructure piece since Percy’s beginning, and has already gone through numerous iterations and even languages (it was originally written in Ruby, then rewritten in Python on top of the mitmproxy library).
We have entirely rewritten our core proxy infrastructure in Go, which helped us fix all of the intermittent and hard to debug networking problems we discovered. Sometimes, the issue would just be a rare bug where an image disappeared, but in the worst case, these bugs could manifest as whole pages rendering “Corrupted Content” errors.
These and other issues are now entirely fixed by design in our new, third-generation proxy infrastructure. Go provided us with exactly the right level of control, abstraction, and concurrency to fix these problems quickly and simply. We even snuck in support for dynamically handling any local test hostnames (like “http://dev.local” or “http://testserver”) which fixes a bunch of other asset loading issues.
What do I need to do?
Nothing! We’ll automatically roll out these rendering updates to all of our users. The next time your master CI tests run, Percy will automatically incorporate these changes and use the new build as your image baseline.
These changes were all prompted by feedback we heard from you, so keep it coming! Let us know how we can help meet your visual testing needs.
