WinMergeでVisual Regression Testingしたかった

ここ最近 Visual Regression Testing（VRT）というものが Web フロントエンド周辺で普及しつつあるようです。実はこのブログのために作成した Gatsby Theme の CI でも簡単にですが Playwright による VRT を実行してみたりしてます。

Visual Regression Testing（VRT） とは

いわゆる回帰テストの 1 種で、過去と現在のアプリケーション画面の画像を比較し意図しない変更がないか確認するテスト手法のことです。アプリケーション画面の比較を目視で行うのはどうしても限界があるため VRT をサポートするツールは機械的に画像を比較する仕組みを持っています。

導入の選択肢

VRT 導入の選択肢ですがたとえば以下の記事にもあるようにいろいろあります。

2023 年に Visual Regression Testing を始めるならどんな選択肢があるか

ただ、Web フロントエンド周辺で普及しているようなので当たり前なのですがブラウザを前提にしたものが多く、Web フロントエンド以外のプロジェクトでの導入がためらわれるものも多そうです。reg-suitなんかは機能がシンプル（画像の差分検出だけ）で Web フロントエンド以外のプロジェクトでも導入しやすそうなのですが、Node.js や依存関係のインストールはやはり必要です。

WinMerge

老舗差分ツールであるWinMergeは古く使われているツールの 1 つではないでしょうか。この WinMerge ですが実は画像比較もいけます。ということで、今回は WinMerge で VRT っぽいことができないか試したいです。

なおここでは WinMerge v2.16.24.0 を用いました。また、画像比較とレポート生成のみを扱い比較画像の生成については扱いません。

画像比較

WinMerge での画像比較は単純に画像ファイルを WinMerge で開くだけです。すると以下のような比較結果が得られます。

差分がある部分はハイライト表示されておりわかりやすいですね。もちろフォルダーごと比較も可能です。比較前に[編集] > [設定] > [比較] > [画像]で「フォルダー比較で画像比較を有効にする」にチェックを入れておく必要があります。

比較対象のフォルダーを WinMerge で開き比較すると以下のような比較結果が得られます。

フォルダー比較であっても各ファイルに対して画像比較が動作していることがわかります。期待結果の画像を保存したフォルダーと現行結果の画像を保存したフォルダーを用意しておけば WinMerge で VRT の肝である機械的な画像比較を実現できそうです。

比較結果のレポート生成

VRT をサポートしているツールはたいていテストレポート結果の出力機能がついています。レポート結果をまとめて残せると何かと便利です。

実は WinMerge はレポートの出力が可能です。ここではフォルダー比較した結果をレポート出力することにします。比較結果が出力された状態で[ツール] > [レポートの生成]を選択します。すると以下のようダイアログが表示されます。

レポートスタイルには「シンプルな HTML 形式」を選択し「ファイル比較レポートを含める」にチェックを入れておきます。すると以下のようなレポートが出力されます。

またファイル間の比較レポートを見ることもできます。

必要十分な情報がまとまっていますね。

コマンドライン実行

いままでは WinMerge 画面上でさまざまな操作をしてきました。ただ VRT を実行する場合画面操作は不要でコマンドラインから実行できるほうが便利です。

実は WinMerge はコマンドラインからの実行も可能です。さらに、オプションを指定することでこれまで行ってきたような設定を渡すことができます。「画像が含まれる 2 つのフォルダーを比較し結果をレポートに出力する」には以下のようにします。

"C:\Users\user\AppData\Local\Programs\WinMerge\WinMergeU.exe" .\expected .\actual /r /u /noprefs /cfg Settings/DirViewExpandSubdirs=1 /cfg Settings/EnableImageCompareInFolderCompare=1 /cfg ReportFiles/ReportType=2 /cfg ReportFiles/IncludeFileCmpReport=1 /minimize /noninteractive /or report.html

WinMergeU.exe は WinMerge のパス、 expected と actual は比較対象、以降がオプションで使用しているのは以下です。

/cfg で渡している設定情報は以下のような内容です。

コマンド１発で画像比較からレポートの作成までできるようになりました。正直なところここまでできるとは思ってませんでした。バッチファイルなんかをしっかり書けばかなり便利になりそう。

参考

• WinMerge のコマンドラインオプション - Qiita
• コマンドライン - WinMerge 2.16 ヘルプ