Introducing SteadySnap

Flaky tests erode trust. You run your suite, it fails, you rerun it, it passes. Nothing changed. Most visual testing tools snapshot at arbitrary times, mid-load or mid-animation, which results in flake. 

Chromatic was built to kill flake. We run tests in a clean-room browser with a diffing algorithm designed to stabilize snapshots and surface only the bonafide changes. 

Now we’re taking it further, we discovered new techniques to improve snapshot stability which reduced visual inconsistencies by 34%. Today, I’m excited to share our next gen diffing algorithm SteadySnap.

What's new?

Debugging inconsistent test renders has always been a frustrating challenge—especially when those inconsistencies appear sporadically and seem impossible to reproduce. SteadySnap addresses this issue head-on with an improved baseline algorithm and new automated mechanisms that resolves such issues without requiring manual intervention.

Render stabilization

Resource loading and asynchronous data fetching make it hard to figure out when the UI is stable and ready for a snapshot. Initially, the browser loads your code and begins rendering the UI. Static assets may need fetching, and your code might initiate API requests. Additionally, there may be subsequent re-renders based on the responses to these API requests.

SteadySnap monitors network requests, asset loading, and rendering states to determine when the UI is truly stable. In the latest release, we've improved its heuristics to better evaluate the UI state and ensure more reliable snapshots.

Auto-freeze dynamic content

Dynamic elements with CSS animations, transitions, SVG animations, or autoplaying videos create inconsistent renders because snapshots are captured at different moments in time. SteadySnap proactively pauses these elements, ensuring your tests capture the same consistent state every time.

We've also improved handling of video services like BrightCove and Wistia, which use ephemeral source URLs that previously caused encoding errors when autoplay was enabled. SteadySnap now handles these correctly by displaying either the video poster or a clean blank state when no poster is available.

Burst capture

Often, components have side effects that trigger repaints and redraws. Additionally, some UIs, like dynamically generated graphs, can introduce subtle variations. Even with stabilization and content freezing, this leads to unpredictable rendering behavior. To capture stable snapshots in such cases, we created burst capture.

Instead of relying on a single render, SteadySnap captures multiple renders and selects the most stable one to snapshot. This eliminates hard-to-reproduce instabilities without impacting your snapshot usage.

34% fewer inconsistencies

SteadySnap comes standard with all Chromatic plans.  We started rolling out SteadySnap to select customers in March, then silently deployed it to everyone and saw it reduce visual inconsistencies by one-third across our platform.

The seamless rollout—with zero service disruptions—reflects the tremendous effort our platform engineers put into ensuring smooth infrastructure upgrades.

The SteadySnap algorithm detects and automatically resolves intermittent issues that would otherwise require time-consuming manual debugging. For tests with persistent inconsistencies, you can easily reproduce and debug them using our trace viewer.