画像差分チェック

Magic Podの使い方 > 画像差分チェック

「画像差分チェック」の機能を使うと、画面の表示が期待値画像とずれていないかをチェックできます。これにより、テスト実行中に予期せぬ画面デザインの崩れなどを検出することが可能です。

このページでは、この「画像差分チェック」機能の使い方について解説します。

「画像差分確認パターン」の追加

テスト対象指定パネルで「環境」を「ローカルPC」にし(画像差分チェック機能は現在ローカルPCでのみ利用可能です)、「画像差分確認パターン」を1つ追加します。画像差分チェックの期待値画像はブラウザや端末の種類によって異なってくるので、同じテストを様々な環境で実行したい場合は環境の数だけパターンを用意すると良いでしょう。

期待値画像の生成

「画像差分がないか確認」のコマンドを追加してテストを実行します。テスト対象指定パネルで「画像差分確認パターン」を指定してテストを一度実行すると、そのパターンに応じた期待値データが生成されます。

一度テストを実行すると期待値画像が生成され、コマンドの「編集」ボタンからダイアログを開くと、何%以上の差分があった場合にエラーとするかや、チェックの際の除外領域などを指定できます。

なお、このダイアログ上の「画像差分確認パターン」の選択ボックスは、ダイアログで表示する画像を切り替えるためのもので、テスト実行時に利用するパターンを指定するものではありません。

テストの実行

期待値画像が一度生成されれば、次回以降のテスト実行では画像差分チェックが実行されます。差分があった場合、テスト結果が「要確認」となるので、テスト編集画面で差分の内容を確認してください。差分の内容に問題がない場合、「承認」を押すことで今回の画像を次回からの期待値画像として使用できます。テスト対象のサイトやアプリに問題があって差分が発生している場合は、「エラーとする」を押すことでこのテスト結果をエラー扱いにし、サイトやアプリの問題を修正した上で再度テストを実行してください。

現在準備中の機能

不足している以下の機能については、現在鋭意開発中です。

  • 初回の期待値画像データは、ユーザーが承認した時に初めて登録されるようにする
  • 画像差分確認パターンの削除機能