要素に対するビジュアルリグレッションテスト
  • 14 Mar 2024
  • 1 分で読めます
  • 投稿者
  • ダーク
    ライト

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

  • ダーク
    ライト

Article Summary

概要

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

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

注意

要素に対するビジュアルリグレッションテストはChrome/Linux環境でのみ動作しています。他の環境で実行した場合、対象の見た目が変わらないことを確認するのステップはスキップされます。

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

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

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

Screen Shot 2023-04-25 at 8.36.53.png

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

Screen Shot 2023-04-24 at 14.02.44.png

テストを2回実行する

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

Screen Shot 2023-04-24 at 14.04.34.png

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

Screen Shot 2023-04-24 at 14.13.06.png

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

Screen Shot 2023-04-24 at 14.14.32.png

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

Screen Shot 2023-04-24 at 14.15.55.png

Screen Shot 2023-04-24 at 14.14.50.png

変更を受け入れる

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

Screen Shot 2023-04-24 at 14.29.32.png

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

Screen Shot 2023-04-24 at 14.29.50.png

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

Screen Shot 2023-04-24 at 14.34.28.png

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

Screen Shot 2023-04-24 at 14.37.47.png

ご利用時の注意点

テキストに対するアサーション

テキストに対しても、対象の見た目が変わらないことを確認するアサーションを追加することは可能ですが、Autifyがフォントのレンダリングによる微細な差を検知し、稀に失敗となる可能性があります。
そのため、テキストに対してアサーションを行う場合は、「対象のテキストが〇〇であることを確認する」などのテキストアサーションをご利用いただくことをお薦めします。

色の違いに対するアサーション

要素の色が想定通りであるかを検証するために、対象の見た目が変わらないことを確認するアサーションを追加することは可能ですが、色の変化の度合いによっては、色が変化していてもステップが成功してしまう可能性があります。現状は、JSステップを使用しての検証をお薦めします。

ロケータ

対象の見た目が変わらないことを確認するステップには、ロケータを登録することができません。

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


この記事は役に立ちましたか?

Changing your password will log you out immediately. Use the new password to log back in.
First name must have atleast 2 characters. Numbers and special characters are not allowed.
Last name must have atleast 1 characters. Numbers and special characters are not allowed.
Enter a valid email
Enter a valid password
Your profile has been successfully updated.