Testing user interface has always been tricky. The details of UI design are subjective “does this shadow work?” and nuanced “that button is a pixel off”. The easiest way to check if a design looks right is still visually –with the human eye.

Yet, testing UI this way is impractical. It means reviewing hundreds of design permutations by hand. In reality, most teams can’t afford full UI test coverage so they endure the inevitable regressions.

Like you, I’ve spent countless hours fixing UI regressions. Sometimes they’re obvious –rogue CSS is infamous for ruining layouts. But more often, what seems like a minor tweak results in major bugs. What’s more, with apps moving toward continuous integration and “heavier” frontends, pinpointing UI regressions is harder than ever before.

How to prevent bugs

What if you could detect UI bugs as soon as they occurred? If your UI components had visual tests, you’d know anytime a regression happened. Visual tests compare the rendered output of components –“the look”– from commit to commit. They warn you when a code change causes a component to look different.

Consider this workflow:

Work on React components as usual Commit code to Github Get warned instantly if your components don’t look right Fix UI regressions and move on

This workflow would mean you discover UI bugs during development long before code hits production. Your users would never see a UI regression again.

Seems like a lot of work…

Unit and end-to-end testing already require a lot of effort. With Chromatic, UI testing doesn’t have to further tax your team. Why not take advantage of what you’ve already built –components– to test your UI? Every time a component renders in your development environment, you are implicitly creating a test spec. Chromatic helps you record those specs and play them back later as tests.

Adding visual tests is quick and easy

Interested? Sign up for early access below

You build components and Chromatic does the rest

Tom, Zoltan, and I decided to create Chromatic to automate UI testing once and for all. It’s clear that teams everywhere continue to suffer due to UI regressions. But in the past, do-it-yourself tools proved too onerous and off-the-shelf solutions too broad for many teams to get onboard.

UI testing shouldn’t be complicated. Developers already do the hard work building components. Chromatic makes it effortless to UI test those components. With Chromatic, you and your team add UI tests in 1-click and can achieve full test coverage in minutes.

Automatically QA the look of all your components, track their appearance from commit to commit, and get notified of visual changes. Chromatic integrates seamlessly with your existing Github/CI workflow so you can rest easy knowing that your UI looks just right.

Get Chromatic early access below!

Say bye to UI regressions

Chromatic is in active development. We are currently getting ready for our pilot. There are still some places available, if you’re interested in getting early access (and free usage) fill out the form to see if your company qualifies.

Update July 2018: Chromatic 1.0 is live. Sign up for your free trial.