Build UI with confidence
Cross-platform, cross-browser screenshot testing for modern user interfaces.
Before
After
Before
After
Trusted by the industry
Happo takes screenshots of your UI components
Find bugs before your code is shipped to production. Visual regression testing with Happo lets you move faster and with more confidence.
⨠ happo run
Initializing... ✓
Pre-rendering 1,238 examples... ✓
Waiting for Chrome results... ✓
Waiting for Firefox results... ✓
Done! View results here:
https://happo.io/a/1/report/a5cdf4d
Initializing... ✓
Pre-rendering 1,238 examples... ✓
Waiting for Chrome results... ✓
Waiting for Firefox results... ✓
Done! View results here:
https://happo.io/a/1/report/a5cdf4d
Get notified when bugs are introduced
No more manual parsing of CSS
See the effects of changes directly
Test individual components in isolation
Happo build flow
Push your code
Happo takes screenshots
Compare with previous versions
Cross-browser and platform agnostic
For web projects, Happo uses Chrome, Firefox, Safari, iOS Safari, and Edge to take screenshots of components. Native apps can integrate directly with the Happo API.
How does it work?
When you make a code change, Happo will take screenshots of your application's UI components before and after. If there is a difference between the two states, you'll be notified. A Happo report will help you understand exactly what changed.
Happo hooks in to your CI environment. It works with all major CI services, including Travis CI, CircleCI, and Jenkins. Screenshots are generated in Chrome, Firefox, Safari, iOS Safari (on an iPhone or iPad), and Microsoft Edge.
How do I set it up?
Unlike other screenshot testing tools out there, Happo doesn't take full-page screenshots. Instead, shots are taken of individual components. You can think of Happo as a unit testing tool as opposed to an integration testing tool. Instead of having to render a full page to screenshot, you tell Happo how to render different variants for a component in an examples file:
If you already have a component gallery (e.g. a style guide, a Storybook setup) you can generate examples on the fly, saving you the time to maintain two different sources.