はじめに
皆さんこんにちは@rueyjyeです。
二年前にGazo-sanを公開し、Qiitaにも紹介記事を投稿しました。内容はGazo-sanの使い方をメインに説明しました。
画像差分検知ツール「Gazo-san」入門
当時は画像を個別で撮影してからGazo-sanコマンドで画像パスを指定し、結果の差分画像をそのまま見るという手順でした。
かなり手順が多く、結果の画像はどこを見ればよいか分かりにくいものでした。
今回は、撮影、差分計算、レポートを一回で全部できるツールを作りました。
これでVisual Testingを簡単に始められると思います。
Gazo-san-reportとは
Visual Testing三つの要素の「撮影」、「差分計算」、「レポート」が一体化したツールです。
全部の処理をDocker imageに書いて、一コマンド実行で構築できるツールです。
リポジトリ: Gazo-san-report
Visual Testingの要素については別の記事がありますので、興味がある方はご覧ください。
Gazo-san-reportは二つのURLを渡して、それぞれのペーじのキャプチャを撮影、差分を計算し、最後はHTMLのレポートを生成します。
URLベースで差分を表示するので、異なる環境間のVisual Testingと相性がいいと思います。例：開発コードが反映した後、開発環境と本番環境の違いをチェックする。
今はまだ対応してないですが、今後撮影機能を使わずに画像を渡すだけでもレポートまで作成する機能追加したいと思います。
試しましょう
基本README通りでやればできると思います。
使い方はDockerコンテナを起動するだけです。
BaseURLとCompareURLの環境変数で比較したいURLの設定が出来ます。
ここの例はGoogle日本語ページと英語ページの比較です。
docker run -it -d --rm -v `pwd`:/report --env BaseURL="https://www.google.com/?hl=ja" --env CompareURL="https://www.google.com/?hl=en" aa332266/gazo-san-report:latest
コマンドを実行したら、コンテナ内でページの撮影、差分計算、レポート作成の処理を行います。
結果的に画像保存用のimagesディレクトリとレポートのreport.htmlが作成されます。
レポートについて
HTMLのレポートをブラウザで開きたら、以下のように表示します。
BASE: Google日本語ページの画像 (https://www.google.com/?hl=ja)
COMPARE: Google英語ページの画像 (https://www.google.com/?hl=en)
DIFFERENCE: Gazo-sanで計算した差分画像
※ ここのBASEとCOMPAREの画像はGazo-sanのcreate-change-imageオプションを有効にして、認識したパーツを緑枠で表現している状態です。
差分画像中の差分箇所が分かりにくいとのフィードバックをいただくことがありますが、実はGazo-sanの差分はマッチングしたパーツの差分のみ表示しているので、マッチングしたパーツがないと赤い枠が全く出ない状況があります。
その時はcreate-change-imageオプションで作成した緑枠がありの画像をみれば分かりやすいと思います。Gazo-san-reportはデフォルトで有効にしています。
BASEとCOMPAREにマッチングできていないパーツを緑枠で表示しています。つまりDIFFERENCEに差分が出ないですが、緑枠を見ればBASE画像にしかないパーツとCOMPARE画像にしかないパーツが表示されます。
そして、3つの画像を並んでいる状態で左右を見ながら差分がわかりやすく見つけられるかなと思います。
| BASE | COMPARE |
|---|---|
 |
 |
👆 緑枠は各画像独自のパーツです
補足：たまに完全に同じパーツなのに、マッチングしてない状況があります。ここのGoogleの例だと、虫眼鏡とマイクのアイコンの部分がマッチングしてない状態です。その場合はマッチング判定のアルゴリズムが検知できていなかったきからです。こちらは申し訳ございませんでしたが、今後少しつづ調整できたらと思います🙏
最後に
今回はVisutal Testingのキャプチャ撮影→差分計算→レポーティングが一体化したツールを作りました。
Gazo-sanの差分が分かりづらい問題はレポートの緑枠も合わせて参照すればより分かりやすくなると思います。
また、今は1ケースのレポートしか作成できないですが、今後複数ケースの差分をまとめたレポートが作れる状態を目指して改良し続けていきます。
みなさんもぜひGazo-san-reportでVisual Testingをお試しください。