UIテストを作るとき、Seleniumなどを使ってブラウザを操作するかと思います。
UIが変わっていないことを担保するためには画面のスクリーンショット画像を作り、差分がないことを確認するほか、それを可視化することが必要になるでしょう。
では、その画像差分をどうやって取ってますでしょうか?
たとえば、ImageMagickを使う方法があります。
参考: http://blog.mirakui.com/entry/20110326/1301111196
ただ、リンク先の画像を見れば分かる通り、差分が出た箇所しかハイライトできないので、大きなUIの一部だけちょっと変わった!といったケースだと差分が分かりにくい場合があると思います。
また、OS X向けにhomebrewでImageMagickをインストールするのはビルド時間が長くてしんどいなどの問題もあるでしょう。
そういった場合に、go-diff-imageはとても便利です。
go-diff-imageの特徴
go-diff-imageには1つの便利な特徴があります
まずはREADMEのExampleを見ましょう: https://github.com/murooka/go-diff-image#example
見ましたね?
気づきましたでしょうか。
そう。ピクセルの列単位でdiffが出ているのです!
ImageMagickのcomposite -compose
とは違い、差分のある列があればそこがまるっとdiffとして検出されます。
縦スクロールのブラウザに合わせて縦方向に変更されることの多いWebUIのdiffを取るには相性が良いのではないでしょうか。
要素の追加、削除などがわかりやすいかと思います。
インストール
あなたとgo-diff-image、いますぐgo get
!
そう。ImageMagickのように長すぎるビルド時間に悩まされる必要はないのです!
go get -u github.com/murooka/go-diff-image/...
はい!使えるー!もう使えるー!!いえーい!!!!
まとめ
ちょっとした違いですが、こういったツールもありますという紹介でした。
できたばかりのリポジトリで機能も少ないのでコントリビュートチャンスもありそうです!
実装も素朴でコンパクトで、処理も追いやすいと思います。
ぜひ実用してみて、困ったらissueを立てるなりpull-reqしてみるなり、してみると良いのではないでしょうか?
repository: https://github.com/murooka/go-diff-image