Visual before/after comparisons

florianstaudacher · September 14, 2012, 12:00am

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

florianstaudacher · September 14, 2012, 12:00am

I made a little toy (because I can)

gist.github.com

https://gist.github.com/Raven24/3723523

Gemfile


source 'http://rubygems.org'

gem 'selenium-webdriver'

gem 'rmagick'

rifleman.rb

require 'rubygems'
require 'logger'
require 'selenium-webdriver'
require 'RMagick'

module Rifleman
  module Configurable

    # config options
    attr_accessor :standalone, :image_path, :delay, :logger, :driver

This file has been truncated. show original

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.

thoughts?

stevenhancock · September 15, 2012, 12:00am

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.

jasonrobinson · September 15, 2012, 12:00am

Sounds awesome

florianstaudacher · December 19, 2012, 12:00am

This is done and merged, btw

https://github.com/diaspora/diaspora/pull/3797
http://wiki.diaspora-project.org/wiki/Screenshot_tool

flaburgan · December 19, 2012, 12:00am

\o/