2022年5月27日 / 最終更新日時 : 2022年5月27日 user ノウハウ

Ranorex＋reg-cli連携によるビジュアルテスト

今回は、Ranorexとreg-cli（reg-suit）の連携によるビジュアルテストの検証について紹介します。

Ranorex単体でも、ノンプログラミングによる画像比較や、ビジュアルテストを行うことも可能であり、どの方法使用するかはテスト内容や環境に合わせて選択することができます。

reg-cli（reg-suit）とは？

reg-cliは、VRT（Visual Regression Testing）を行うためのテストツール（OSS）であり、reg-vizにて提供されています。一般的にWebアプリなどのビジュアルリグレッションテストなどで利用されており、コマンドラインで使用できます。また、関連ツールとしてreg-suitがあります。

reg-cli：指定のフォルダ内にある２つの画像を比較し、差分結果をHTMLレポートして出力します。
reg-suit：比較画像データや、差分結果をAWS S3などのクラウドストレージ上で管理でき、またGitHubと連携してプルリクエストに通知して差分結果を確認することもできます。（※reg-suitの内部でreg-cliが使用されています）

※今回は、すべての作業をローカル環境にて行うため、reg-cliを使用します。

reg-cliは、npm（Node Package Manager）を使用し、以下のコマンドでインストール可能です。コマンドを実行したフォルダ配下にreg-cliがインストールされます。
※npmは、Node.jsをインストールすることで一緒にインストールされます。

npm install -D reg-cli

コマンドライン上でreg-cliを実行することで、用意した画像ファイルに対して比較を行うことができます。

./node_modules/.bin/reg-cli ./path/to/actual-dir ./path/to/expected-dir ./path/to/diff-dir -R ./rep/diff-report.html

reg-cliの実行時に以下のパラメータ、オプションを指定します。reg-cliのオプションは、”reg-cli –help“のコマンド実行で確認できます。

./path/to/actual-dir：比較元となる画像ファイルがあるフォルダパス
./path/to/expected-dir：比較対象となる画像ファイルがあるフォルダパス
./path/to/diff-dir：比較した画像ファイルの差分結果が保存されるフォルダパス
-R ./rep/diff-report.html：差分結果のHTMLレポートの出力先を指定（”-R“オプションを使用）

reg-cliを実行すると、比較元となる画像ファイルがあるフォルダと、較対象となる画像ファイルがあるフォルダにある同一のファイル名の画像ファイルを比較します。各フォルダにはファイル名さえ異なれば複数ファイル置くことが可能なため、複数のアプリ画像を一度に比較することができ、また、比較結果を１つのレポートにまとめることができます。

以下にRanorex＋reg-cli連携によるビジュアルテストについて解説します。

テストの流れ

RanorexのUIテスト実行時に取得した画像ファイルを使用し、reg-cliで比較して結果を出力する流れになります。

テストの準備

１．比較する画像ファイルの取得

Ranorexのユーザコードを使用し、キャプチャしたアプリ画像をファイル出力するためのメソッドを作成します。

ユーザコードによる画像ファイルの出力方法については、過去の記事（ユーザーコードリファレンス：フルスクリーンショットのイメージ比較）をご参照ください。ユーザコードにて、以下のサンプルコードのように画像ファイルを出力するメソッド（fullScreenshot）を用意します。
※用意するメソッドは、どのレコーディングモジュールでも使用できるようにユーザーコードコレクションとして作成されることをお勧めします。

サンプルコード：
※出力する画像ファイル名は、重複しないように、”{テストケース名}_{モジュール名}_{リポジトリ名}.png”の形式で出力するようにしています。

/// <summary>
/// 第1パラメーター：フルスクリーンショットを取得したいリポジトリ（アプリフォルダー）
/// 第2パラメーター：フルスクリーンショットの出力先（例：C:\tmp\imgA.png）
/// </summary>
public void fullScreenshot(RepoItemInfo itemInfo, string outputImgFile)
{
	// フルスクリーンショットの取得
	Bitmap screenShot = itemInfo.FindAdapter<WebDocument>().CaptureFullPageScreenshot();

	// 出力する画像ファイル名（{テストケース名}_{モジュール名}_{リポジトリ名}.png）の設定
	string testCaseName = TestSuite.CurrentTestContainer.Name; // テストケース名の取得
	string moduleName = TestModuleLeaf.Current.Name; // モジュール名の取得
	string repoName = itemInfo.FullName; // リポジトリ名の取得
	string imgFileName = testCaseName + "_" + moduleName + "_" + repoName + ".png";
	
	//　フルスクリーンショットの出力
	screenShot.Save(outputImgFile + "/" + imgFileName);
		
	// レポート出力
	Report.LogData( ReportLevel.Info, "スクリーンショット", screenShot );
}

用意した画像ファイルを取得するためのメソッドをレコーディングモジュールに設定します。
※メソッド（fullScreenshot）のパラメータ（outputImgFile）にて、画像ファイルの出力先を変数化し、データソースを使用して、比較元と比較対処となる画像ファイルの出力先を切り替えれるようにすると便利です。

２．reg-cliの設定

新規に用意したレコーディングモジュールにて、Run applicationアクションを使用して、reg-cli（reg-cli.cmd）を実行するように設定します。
Run applicationアクションのArguments項目には、reg-cliのパラメーターを指定します。

テストスイートにて、テストの最後に、設定したレコーディングモジュールを追加します。下図は、”ビジュアルテスト“のテストケースに、上記の設定を行った”画像比較“のレコーディングモジュールを指定した例になります。テストを実行すると初めにUIテストを行いながら、ビジュアルテストで使用するアプリの画像を取得し、最後にビジュアルテストを実行します。

実行結果

テストを作成したら実行します。初回のみ、比較元となる画像ファイルを取得するためのテストを実行する必要があります。この時、画像ファイルの出力先を間違えない様にします。２回目以降のテスト実行から、ビジュアルテストを実施できます。

ビジュアルテストの結果は、reg-cliにて出力されたHTMLレポートにて確認できます。

差分のあった画像をクリックすることで、差分個所を確認することができます。

差分の確認方法は、”Diff“、”Slide“、”2up“、”Blend“、”Toggle“のいずれかの方法で確認できます。

Diff：reg-cliで出力された画像差分結果（差分個所が赤色で表示されます）を確認できます。
Slide：BeforeとAfterの水平バーを移動することで、２つの比較画像を確認できます。
2up：比較元と比較対象の画像を並べて確認できます。
Blend：BeforeとAfterの水平バーを移動することで、差分個所を透過させながら確認できます。
Toggle：BeforeとAfterのスイッチを切り替えながら比較結果を確認できます。

まとめ

Ranorexにも画像比較を行うための方法として、Validationアクション（ContainsImage、CompareImage）や、Ranorex APIが用意されており、これらを使用することによりビジュアルテストを実施することも可能です。また、今回、紹介した様な他の画像比較ツールと連携することでもビジュアルテストを行えるため、さまざまな開発プロジェクトに合わせたテスト方法を選択し、柔軟に対応することが可能です。