要素に対するビジュアルリグレッションテスト

概要

Autifyでは、要素に対するビジュアルリグレッションテストを行えます。アサーションコマンド対象の見た目が変わらないことを確認するをシナリオに追加すると、対象要素の今回のスクリーンショットと、過去のテスト実行で生成された基準画像が比較されます。画像・テーブル・divなど、画面上のどのような要素であっても、ビューポート内に収まりうるものであればアサーションの対象として選択することが可能です。

対象の見た目が変わらないことを確認するステップのあるテストを実行すると、最新のスクリーンショットと基準画像がピクセル単位で比較され、一致しなかった場合テストは失敗します。テストが失敗した場合は、見た目の差異が期待通りの変化によるものであるかどうかを確認するために、結果をレビューしましょう。もし期待通りの変化だった場合は、「変更を受け入れる」をクリックしてください。この操作だけで、次回のテスト実行に使用する基準画像の更新が完了します！

要素のビジュアルリグレッションテストを実施する

シナリオをレコーディングする

新規シナリオ画面またはシナリオ詳細画面からレコーディングを開始します。Autify Recorderで、チェックボックス(☑️)をクリックし、アサーションを作成する要素を選択します。次に、アサーションコマンドリストから対象の見た目が変わらないことを確認するを選択します。

シナリオを保存すると、シナリオ内に新しい対象の見た目が変わらないことを確認するステップができます。なお、このステップにはサムネイルがありませんが、初回実行した後には基準画像が表示されます。

テストを2回実行する

準備ができたら、シナリオを実行します。最初の実行では、比較する基準画像がまだ存在しないため、対象の見た目が変わらないことを確認するステップは以下のメッセージとともに実行がスキップされます： このステップは初回実行時にスキップされます。今回は比較元となる要素の画像のみが取得され、今後のテスト時との見た目の比較が行われます。

シナリオのステップ詳細を見ると、1回目の実行で作成されたベースイメージを確認することができます。

次に、アサーションが行われるよう、シナリオを再度実行します。今回は、対象の見た目が変わらないことを確認するステップで、現在の画像と前回成功したテスト実行で作成した基準画像が比較されます！

対象の見た目が変わらないことを確認するステップのスクリーンショットを開くと、横並びの比較を見ることができます。「差分」タブをクリックすると、比較された画像を見ることができます。

変更を受け入れる

対象の見た目が変わらないことを確認するステップは、現在のスクリーンショットが基準画像と完全に一致する場合に成功し、そうでない場合は失敗します。次のスクリーンショットは、対象の見た目が変わらないことを確認するステップが失敗した例です。

しかし、見た目の変化を受け入れて、今回の結果を今後の基準画像として使用したい場合もあるでしょう。そのような場合のために「変更を受け入れる」ボタンが用意されています。

「変更を受け入れる」ボタンをクリックすると、テスト結果自体のステータスには影響しませんが、この対象の見た目が変わらないことを確認するステップの基準画像が更新されます。

次にテストを実行するときは、新しい基準画像が比較に使用されます。このように、期待する要素の見た目を変更することも簡単に行えます。

皆様によるビジュアルリグレッションテストのご活用、ご意見をお待ちしております！