Add visual/css diffing about storybook

[garris]

There is a probably a straightforward way to integrate BackstopJS (similar to PhantomCSS but with a workflow & UI tuned for diff-ing many states and viewport sizes). If there is some interest I could look into it.

[wyattdanger]

I am currently using https://github.com/Galooshi/happo for visual diffing React components

[arunoda]

@wyattdanger Thanks. I saw you guys use it at AirBnb.

[sylvainbannier]

@wyattdanger have you managed to reuse react storybook stories with happo ?

[bartlomn]

Correct me if I am wrong but it looks like all the solutions linked so far use PhantomJs and therefore are suited for the CI integration. I am looking at slightly different use case - I would like to have an add-on that will add a panel with image diff for current story variant. I am looking at Resemble.js for that. Any advice / pointers / prior art / encouragements are welcome.

[garris]

BackstopJS is a wrapper around resemble. It manages all the necessary resources for capturing screen shots, reporting and then displaying the diffs. You can call it like a node module as well. I am too busy to do the integration work but I'd happily guide you through it.

[ndelangen]

Storybook will not build visual regression testing, because there are tools that do it that integrate very nicely into Storybook.

See:
https://percy.io/docs/clients/javascript/react-storybook
https://screener.io/

[oblador]

These are both paid services for web as far as I understand them. I'm working on a solution that works locally for both web, ios and android.

[ndelangen]

Be sure to let us know about if when it's demo-able we can feature it on our documentation 👍

[heinzmuller]

@oblador Give me a heads up if you need any testers/help with coding!

I looked at the suggestions @ndelangen but Percy seems very pricey, and screener will probably cost about the same.

[oblador]

@heinzmuller sure, DM me on twitter (@trastknast).