52
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

52
29
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52
29

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?