Visual before/after comparisons

Note: This discussion was imported from Loomio. Click here to view the original discussion.

I made a little toy (because I can)

The basic idea is to generate screenshots of two specified URLs and then generate a ‘flicker’-gif to easily spot visual differences.

I think we could include this in our Cucumber features, for when CSS is changed/refactored. We would have a set of “approved” screenshots and the cuke could generate the “new” screenshots and make the gifs for comparison. Once approved, the “new” shots would replace the “old” ones as the new reference.
This would not run automatically every time, but instead only serve as an aid for devs who want to check their CSS/layout changes didn’t break anything.


That definitely would have come in handy when we upgraded from Bootstrap 1.4 to Bootstrap 2 (and the bootstrap-sass gem) a while back.

Sounds awesome :slight_smile:

This is done and merged, btw :wink: