PixelEagle vs Percy, Chromatic, and Lost Pixel: Choosing a Visual Testing Tool
Four tools, four different models of what a visual test is. An honest comparison to help you pick the right one for your stack.
Visual regression testing tools look interchangeable from a distance: capture something, compare it, review the diffs. Up close, they embody different answers to one question: what is the thing being tested? A DOM snapshot, a Storybook story, or a rendered frame?
That answer determines which tool fits your product. Here is an honest comparison; each of these tools is good at what it was built for.
The Four Models
Percy: Re-render DOM Snapshots in the Cloud
Percy (BrowserStack) captures the DOM and assets of your page, then re-renders that snapshot in its own cloud browsers at multiple widths and compares the results. This gives it a real advantage: one capture becomes a cross-browser, multi-viewport test matrix without your CI running those browsers, with stabilization (frozen animations, font handling) built in.
The model's boundary is the DOM itself. What Percy re-renders is your markup; content that is rendered client-side into a canvas or WebGL context is not something a DOM snapshot can reproduce. For classic web UI at cross-browser scale, it's a strong choice.
Chromatic: Every Storybook Story Is a Test
Chromatic comes from the Storybook team, and it shows: every story becomes a visual test, captured in cloud browsers and reviewed component by component. TurboSnap only re-tests components affected by a change, which keeps costs and feedback time down in large design systems.
If your frontend is organized around Storybook components, Chromatic is the natural fit. If your visual risk lives at the page level, in rendered graphics, or outside a browser entirely, the component model doesn't reach it.
Lost Pixel: Open-Source Runner, Optional Platform
Lost Pixel is an open-source engine that screenshots your Storybook stories or pages and compares them in CI, with an optional managed platform for review and collaboration. It's a great low-friction, budget-friendly entry point, especially if you want the comparison to run entirely in your own infrastructure.
Comparison is pixel-based with sensible filtering. As with any pixel-level approach, heavily rendered content (WebGL, stochastic effects, cross-GPU variance) pushes against its noise floor.
PixelEagle: Compare the Rendered Frame, However You Made It
PixelEagle starts from the opposite end: it doesn't capture anything. Your CI produces PNG screenshots (from Playwright, from a game engine, from any headless renderer) and uploads them as a run. PixelEagle stores, compares, and gives you a review UI.
The decoupling is deliberate: if your stack can produce an image, it's testable, whether that's a Vue app, a canvas editor, a map, a native app, or a game frame from real mobile hardware. Comparison offers three evaluators: free hash matching for identical images, exact pixel-by-pixel, and NVIDIA ꟻLIP perceptual comparison for rendered content where exact diffs drown you in noise. Baselines are managed by a golden record (an approved baseline that can auto-update from your main branch) and by run metadata, so a Linux run is compared to a Linux baseline without folder gymnastics.
The flip side of capture-agnosticism: PixelEagle doesn't run browsers for you. Cross-browser coverage means your CI captures in each browser (which Playwright makes routine), and stabilizing screenshots is your job, with the perceptual evaluator absorbing what stabilization can't.
Side by Side
| Percy | Chromatic | Lost Pixel | PixelEagle | |
|---|---|---|---|---|
| Unit of testing | DOM snapshot, re-rendered in cloud | Storybook story | Screenshot from your CI | Screenshot from your CI |
| Capture | Their cloud browsers | Their cloud browsers | Your CI | Your CI (any tool, any platform) |
| Canvas / WebGL / game frames | Limited by DOM model | Limited by component model | Yes, pixel-based | Yes, designed for it |
| Comparison | Visual diff with stabilization | Pixel-perfect with review flow | Pixel-based | Hash (free), pixel-exact, NVIDIA ꟻLIP perceptual |
| Cross-browser without running browsers | Yes | Yes | No | No |
| Open source | No | No | Runner is OSS | CLI is OSS |
| Pricing model | Per screenshot | Per snapshot | Free self-hosted; paid platform | Per comparison token; hash comparisons free |
| Sweet spot | Cross-browser web pages | Storybook design systems | Budget/self-hosted web | Graphically rich apps, games, mixed platforms |
The Pricing Model Difference
Most visual testing is billed per captured snapshot: every story or page, every browser, every width, every build. That is predictable, but it grows with how often you test rather than with how much actually changes.
PixelEagle bills comparisons instead of captures, and uses content-addressed hashing first: screenshots that didn't change are matched for free. You spend comparison tokens only when images actually differ: one token for a pixel comparison, two for ꟻLIP. For the common case (most screens unchanged on most runs), the cost tracks the amount of real visual change in your project. The free tier includes 10,000 screenshots per month, no credit card required.
How to Choose
- If you test classic web pages and need wide browser coverage without maintaining browser infra, pick Percy.
- If your UI is a Storybook design system and you want per-component review, pick Chromatic.
- If you want open source and self-hosted, for standard web UI, on a budget, pick Lost Pixel.
- If your pixels come from a canvas, WebGL, a map, a chart library, or a game engine, or from several platforms at once, pick PixelEagle. This is the case the others' models weren't built around, and the one ours was: it's what the Bevy game engine uses to catch rendering regressions across desktop, web, and real mobile devices.
Many teams legitimately need two of these: a component tool for the design system and a frame-level tool for the rendered product surface. They compose fine; they're testing different things.
Key Takeaways
- The tools differ in their unit of testing: DOM snapshots (Percy), Storybook stories (Chromatic), or rendered frames (Lost Pixel, PixelEagle)
- DOM- and component-based models excel for classic web UI but cannot see inside rendered content
- PixelEagle is capture-agnostic and offers perceptual (ꟻLIP) comparison, built for graphically rich apps and games
- Pricing models differ structurally: per-capture billing grows with test frequency, PixelEagle's token model grows with actual visual change