Visual regression testing has become essential for maintaining quality in modern web applications, but as teams scale, the costs do as well. Our engineering team learned this lesson the hard way when our Chromatic snapshot usage—and bills—started spiralling out of control. Here's how we identified the problem, implemented strategic changes, and reduced our monthly costs by over 60% without compromising quality.
What is Chromatic and Why Does Cost Matter?
Chromatic is a visual testing platform that captures snapshots of your UI components and compares them against baseline images to detect visual regressions. It’s an incredibly valuable tool for catching visual bugs before they reach production, as every time your CI/CD pipeline runs, it can trigger snapshot generation across different browsers, viewports, and component states. However, Chromatic operates on a usage-based pricing model. More snapshots equals higher costs—and as we discovered, those costs can escalate quickly.
The Problem: When Growth Becomes Expensive
Our story begins with our AML platform, that multiple teams are working on simultaneously. What started as a manageable visual testing setup quickly became a cost nightmare.
Our monthly snapshot usage showed a rapid escalation.
- December: 133,000 snapshots
- January: 165,000 snapshots (+24%)
- February: 220,000 snapshots (+33%)
- March: 365,000 snapshots (+66%)
By March, we were generating nearly 400,000 snapshots monthly—almost triple our December usage. The culprit? A perfect storm of scaling challenges:
Expanding Test Coverage Without Guardrails
As the application grew in complexity, we continuously added more snapshots to our test suite to maintain visual coverage. While having multiple teams and more engineers working on the project contributed to increased activity, the primary driver of cost growth was the sheer number of snapshots we were accumulating as part of our testing strategy.
The Rebase Spiral
Our CI/CD pipeline was slower than it should have been, leading to a cascade effect. Developers would push commits, but by the time their builds completed, the main branch had moved forward. This triggered frequent rebases, and each rebase meant another full snapshot run.
The math was brutal: more developers × slower CI/CD × more rebases = exponentially more snapshots.
The Solution: Strategic Pipeline Optimization
Facing mounting costs, we implemented two key strategies that dramatically reduced our snapshot usage while maintaining testing quality.
1. Making Chromatic Jobs Manual
The most impactful change was shifting Chromatic runs from automatic to manual. Instead of triggering snapshots on every commit, we made the Chromatic job a manual step in our CI/CD pipeline.
How it works:
- Developers push their code as usual
- CI/CD runs standard tests (unit, integration, linting)
- Chromatic job appears as a manual trigger option
- Developers decide when visual testing is necessary
The trade-off: This change had the necessary cost of a reduction in the developer convenience. Teams could no longer rely on automatic visual regression detection. However, this loss is outweighed by the gain in CI/CD speed and the control it gives to developers over when snapshots were truly needed.
The impact: Developers became more intentional about visual testing, running snapshots primarily when:
- Making actual visual changes to components
- Adding new UI components
- Before merging significant feature branches
2. Cleaning Up During Migration to Cypress
Our audit revealed another significant contributor to our snapshot bloat: we were in the middle of migrating from Storybook-based visual testing to using Chromatic's Cypress plugin for end-to-end visual testing.
The migration context: We had recently adopted Chromatic's Cypress plugin to capture visual snapshots during our E2E tests, providing more realistic testing scenarios compared to isolated Storybook stories. However, during this transition, we maintained both approaches simultaneously.
What we found:
- Stories that had been migrated to Cypress E2E tests but were still present in Storybook
- Duplicate visual coverage between old Storybook stories and new Cypress tests
- Legacy stories that were no longer providing unique value in our new testing strategy
Our cleanup approach:
- Identified stories that were now covered by Cypress E2E visual tests
- Removed redundant Storybook stories where Cypress provided equivalent or better coverage
- Kept only Storybook stories that tested isolated component states not covered by E2E flows
This cleanup should have happened earlier in our migration process, but better late than never! It significantly reduced our baseline snapshot count per run, making every Chromatic execution more efficient.
The Results: Dramatic Cost Reduction
The result spoke for themselves. In just of two months we’ve managed a significant reduction in operational costs
- April: 280,000 snapshots (23% from March peak)
- May: 145,000 snapshots (60% from March peak)
We successfully brought our snapshot usage back to sustainable levels, proving the effectiveness of our improvements, even with having more teams using the system.
Key Takeaways and Best Practices
Start with Usage Monitoring
Implement monitoring early. Set up alerts when snapshot usage increases beyond expected thresholds. We were able to act fast because we saw our cost spiral early.
Balance Automation with Intentionality
While automatic testing is generally preferred, sometimes strategic manual steps can provide significant value. The key is making the manual process as frictionless as possible while encouraging thoughtful usage.
Regular Tests Auditing
Schedule periodic reviews of your tests. As components evolve, stories and scenarios can become redundant or lose their testing value. Regular cleanup prevents snapshot bloat.
Consider Team Workflows
When multiple teams work on shared components, traditional CI/CD patterns may not scale cost-effectively. Design workflows that account for increased collaboration without linear cost scaling.
Looking Forward
Our experience highlights that effective cost management in visual testing isn't just about the tools—it's about designing sustainable workflows that scale with your team. While we traded some developer experience convenience for cost control, the the substantial saving were enough to justify the change.
The manual Chromatic approach become a successful integral part of our development culture. Developers have adapted well, and the intentionality around visual testing has arguably improved our overall testing quality.
Key metrics from our optimization:
- 60% reduction in monthly snapshot usage
- Maintained visual testing coverage for critical components
- Sustainable cost structure that scales with actual visual changes rather than team size
Visual testing remains crucial for our quality assurance, but now it's sustainable, intentional, and cost-effective. Sometimes the best optimization isn't about making things faster—it's about making them smarter.