f:id:hide-Matsuoka:20151223225048p:plain

f:id:hide-Matsuoka:20151223225103p:plain

f:id:hide-Matsuoka:20151223225109p:plain

f:id:hide-Matsuoka:20151223225115p:plain

f:id:hide-Matsuoka:20151223225120p:plain

f:id:hide-Matsuoka:20151223225125p:plain

使用条件: capybara-webkit→テスト
     qt→capybara-webkitで使用
     ImageMagick→画像比較
rainbow→色のチェック
上記のものが入っていれば使えると思います。

基本的な使い方はgemをインストールした後以下のコマンドを実行すれば
比較してくれます。

green_onion skin <ここに比較したいURLを記載>

結果としては以下のように表示されます。

$ green_onion skin http://localhost:3000/test
pixels changed/total: 4719/786432

change/totalの左の数値が大きいほど差分が多いことを示しています。

その差分はデフォルトでspec/skins/配下に保存されるようになっています。
初回に動かした場合は比較対象が無いため、差分は出ませんが
次回以降差分が発生すれば.diffという形で表示されます。

実施していないので確かな情報では無いですが
seleniumテストを実施している部分にrequire 'green_onion'と記載してあげると
テスト実施時に自動的に画面のズレをチェックしてくれるようです。

テストしたい項目については
spec/skinner.rbというファイルがgreen_onion導入時に自動的に作られるため
その部分で変更できます。。