- 印刷
- ダークライト
概要
Autifyでは、要素に対するビジュアルリグレッションテストを行えます。アサーションコマンド対象の見た目が変わらないことを確認する
をシナリオに追加すると、対象要素の今回のスクリーンショットと、過去のテスト実行で生成された基準画像が比較されます。画像・テーブル・divなど、画面上のどのような要素であっても、ビューポート内に収まりうるものであればアサーションの対象として選択することが可能です。
2023年4月現在、要素に対するビジュアルリグレッションテストはChrome/Linux環境でのみ動作しています。他の環境で実行した場合、対象の見た目が変わらないことを確認する
ステップのあるテストを実行すると、最新のスクリーンショットと基準画像がピクセル単位で比較され、一致しなかった場合テストは失敗します。テストが失敗した場合は、見た目の差異が期待通りの変化によるものであるかどうかを確認するために、結果をレビューしましょう。もし期待通りの変化だった場合は、「変更を受け入れる」をクリックしてください。この操作だけで、次回のテスト実行に使用する基準画像の更新が完了します!対象の見た目が変わらないことを確認する
のステップはスキップされます。
要素のビジュアルリグレッションテストを実施する
シナリオをレコーディングする
新規シナリオ画面またはシナリオ詳細画面からレコーディングを開始します。Autify Recorderで、チェックボックス(☑️)をクリックし、アサーションを作成する要素を選択します。次に、アサーションコマンドリストから対象の見た目が変わらないことを確認する
を選択します。
シナリオを保存すると、シナリオ内に新しい対象の見た目が変わらないことを確認する
ステップができます。なお、このステップにはサムネイルがありませんが、初回実行した後には基準画像が表示されます。
テストを2回実行する
準備ができたら、シナリオを実行します。最初の実行では、比較する基準画像がまだ存在しないため、対象の見た目が変わらないことを確認する
ステップは以下のメッセージとともに実行がスキップされます: このステップは初回実行時にスキップされます。今回は比較元となる要素の画像のみが取得され、今後のテスト時との見た目の比較が行われます。
シナリオのステップ詳細を見ると、1回目の実行で作成されたベースイメージを確認することができます。
次に、アサーションが行われるよう、シナリオを再度実行します。今回は、対象の見た目が変わらないことを確認する
ステップで、現在の画像と前回成功したテスト実行で作成した基準画像が比較されます!
対象の見た目が変わらないことを確認する
ステップのスクリーンショットを開くと、横並びの比較を見ることができます。「差分」タブをクリックすると、比較された画像を見ることができます。
変更を受け入れる
対象の見た目が変わらないことを確認する
ステップは、現在のスクリーンショットが基準画像と完全に一致する場合に成功し、そうでない場合は失敗します。次のスクリーンショットは、対象の見た目が変わらないことを確認する
ステップが失敗した例です。
しかし、見た目の変化を受け入れて、今回の結果を今後の基準画像として使用したい場合もあるでしょう。そのような場合のために「変更を受け入れる」ボタンが用意されています。
「変更を受け入れる」ボタンをクリックすると、テスト結果自体のステータスには影響しませんが、この対象の見た目が変わらないことを確認する
ステップの基準画像が更新されます。
次にテストを実行するときは、新しい基準画像が比較に使用されます。このように、期待する要素の見た目を変更することも簡単に行えます。
皆様によるビジュアルリグレッションテストのご活用、ご意見をお待ちしております!