画像差分チェック

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

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

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

期待値画像の生成

まずは、「画像差分がないか確認」のコマンドを追加してテストを実行します。

すると、確認の期待値画像が生成され、テスト結果が「要確認」となるので、テスト結果画面でメッセージをクリックして内容を確認しましょう。

画像の内容に問題がなければ「承認」を押すと、この画像が期待値画像として保存され、次回からの差分チェックに使用されるようになります。

承認後、テスト編集画面に戻り、コマンドの「編集」ボタンからダイアログを開くと、何%以上の差分があった場合にエラーとするかや、チェックの際の除外領域などを指定できます。

テストの実行

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

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

同じテストを様々な環境で実行したい場合、画像差分チェックの期待値画像はブラウザや端末の種類によって異なるので、同じステップでも環境ごとに正解画像を用意したくなるでしょう。このような場合は、テスト対象指定パネルから、各環境の数だけ「画像差分確認パターン」を追加し、環境ごとにパターンを切り替えてテスト実行してください。

どのパターンを使ってテストを実行するかは、テスト対象指定パネルで指定します。(期待値画像の編集ダイアログにも「画像差分確認パターン」の選択ボックスがありますが、これはダイアログで表示する画像を切り替えるためのもので、テスト実行時に利用するパターンを指定するものではありません。)

画像差分チェックのスキップ

例えば普段CI環境で実行しているテストを、デバッグなどの目的で自分の手元のローカルPCで実行する場合、環境差異のせいでほぼ確実に予期しない画像差分が発生してしまうでしょう。こういった場合は、テスト対象指定パネルの「画像差分確認パターン」で「スキップ」を指定することで、画像差分チェックを実行しないようにできます。

ローカルPCコマンドライン実行時の注意点

Magic Pod Desktopを使ったローカルPCでのコマンドライン実行をする場合は、設定ファイルにvisualDiffPatternの項目を追加する必要があります。詳しくはこちらを参考にしてください。