Image Diffing / Snapshot Testing Tool?

Hey friends,

I’m building a UI kit in Elm and am looking for a way to compare the components to an image.

With JS, I could use Jest’s Snapshot Testing, or some other tool that compares two images.

I’m wondering how I can go about doing this in Elm?

Example: I built a button component, and I just want to make sure that there are no visual regressions. So I would have an image of the button and during every push to master, a CI check would run on that button and compare it to the image.

Thank you

I think Cypress is able to do this, and I know I’ve come across similar tools before other than Jest. None are coming to mind off hand though.

I’m not sure how you would set this up for just a single button (maybe you could have an example page for it?) but https://garris.github.io/BackstopJS/ seems to work pretty well for visual regressions.

Cypress will test user interaction, so is really for end to end testing. It’s got some cool features though.

For visual regressions you could try Percy.

They are both simple to set up and use, and percy integrates with cypress nicely. So you can run cypress tests, and take percy snapshots wherever you choose as your tests run.

For those wondering, I ended up going with Percy + Cypress to run diffs with CI/CD