RFC: Percy vs. Chromatic

[gfellerph]

Percy and chromatic both provide visual diffing and approval workflows for pull requests. Both tools offer free and paid plans and GitHub integration. It only makes sense to use one of both and they are fundamentally different.

Percy

Percy is a service offered by Browserstack and allows you to write tests that create snapshots of a predefined URL. Percy has both a cypress and a storybook integration so tests can be defined in the story meta parameters or via cypress command in a cypress test run.

Percy demo
Pricing

Chromatic

Chromatic is a hosting platform for storybooks, built by the creators of storybook, that offers a range of services. One of them is visual regression testing. This feature can be enabled and needs no further configuration to take snapshots of all stories.

Chromatic demo
Pricing

Comparison

Feature	Percy	Chromatic
Free plan	5000 snaps/mo	5000 snaps/mo
Open Source plan	25'000 snaps/mo	n/A
Supported Browsers	Chrome, Firefox, Safari, iOS*, Android*	Chrome, Firefox, IE11*
Paid plans	25K snaps, 199.-	35K snaps, 149.-
Additional snaps	0.016$	0.005$

*Only available with a paid plan

[gfellerph]

A descision has been made to move forward with percy, as chromatic as of now is not flexible enough with capturing screenshots. Not every story is static. Some components need interaction in order to capture a meaningful screenshot, something cypress is very well able to do.