「画像差分チェック」の機能を使うと、画面の表示が期待値画像とずれていないかをチェックできます。これにより、テスト実行中に予期せぬ画面デザインの崩れなどを検出することが可能です。
このページでは、この「画像差分チェック」機能の使い方について解説します。
目次
基本的な使い方
1.期待値画像の設定
まずは、「画像差分がないか確認」のコマンドを追加して
要素選択モードが解除されていることを確認し、
テストを実行します。※コマンドの「編集」はまだ押さない
すると、確認の期待値画像が生成され、テスト結果が「要確認」となるので、詳細を押します。
テスト結果画面へ遷移したら、メッセージを押します。
するとダイアログが表示されるので、画像の内容を確認して「承認」を押します。
承認されると、この画像が期待値画像として保存され、次回からの差分チェックに使用されるようになります。
1-1.許容不一致率と除外領域の設定
その後テスト編集画面に戻り、コマンドの「編集」ボタンを押すと
ダイアログが表示されます。そこで、何%以上の差分があった場合にエラーとするかを指定する許容不一致率や、チェックしない除外領域などをドラッグで指定できます。
2.テストの実行
期待値画像が一度生成されれば、次回以降のテスト実行では画像差分チェックが実行されます。
差分があった場合、テスト結果のステータスが「要確認」となります。
エラーメッセージを押すとダイアログが表示されるので差分の内容を確認します。
複数の画像差分コマンドで要確認が発生している場合は、画像差分タブより全てのステップを確認するのがおすすめです。
この確認画面にて「差分画像を表示」にチェックを入れると、差分が発生している箇所を赤く表示することができます。
差分の内容に問題がない場合は、「承認」を押すことで今回の画像を次回からの期待値画像として使用できます。テスト対象のサイトやアプリに問題があって差分が発生している場合は、「エラーとする」を押すことでこのテスト結果をエラー扱いにし、サイトやアプリの問題を修正した上で再度テストを実行してください。
「画像差分確認パターン」の追加
同じテストを様々な環境で実行したい場合、画像差分チェックの期待値画像はブラウザや端末の種類によって異なるので、同じステップでも環境ごとに正解画像を用意したくなるでしょう。このような場合は、テスト対象指定パネルから、各環境の数だけ「画像差分確認パターン」を追加し、環境ごとにパターンを切り替えてテスト実行してください。
どのパターンを使ってテストを実行するかは、テスト対象指定パネルで指定します。(期待値画像の編集ダイアログにも「画像差分確認パターン」の選択ボックスがありますが、これはダイアログで表示する画像を切り替えるためのもので、テスト実行時に利用するパターンを指定するものではありません。)
画像差分チェックのスキップ
例えば普段CI環境で実行しているテストを、デバッグなどの目的で自分の手元のローカルPCで実行する場合、環境差異のせいでほぼ確実に予期しない画像差分が発生してしまうでしょう。こういった場合は、テスト対象指定パネルの「画像差分確認パターン」で「スキップ」を指定することで、画像差分チェックを実行しないようにできます。
縦長のページをチェックする方法
現状縦長のページを1回の画像差分チェックで確認することができません。（機能要望はこちら）
代替策として「画像差分チェック」->ページ下部にある要素を指定し「表示されるまでスクロール(スワイプ)」->「画像差分チェック」...と繰り返すことで縦長のページのテストを行うことができます。
ローカルPCコマンドライン実行時の注意点
MagicPodDesktopを使ったローカルPCでのコマンドライン実行をする場合は、設定ファイルにvisualDiffPatternの項目を追加する必要があります。詳しくはこちらを参考にしてください。