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

概要

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

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

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

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

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

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

テストを2回実行する

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

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

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

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

ビジュアルリグレッションの差分の許容値

ビジュアルリグレッションテストの差分の許容値を指定すると、基準画像と現在の画像との間で、どの程度の差異が許容されるかを設定し、テストが失敗と判断されるかどうかを指定できます。これはシナリオのステップ詳細の中で設定することができます。

許容値を0から100の範囲で設定することで、テストを成功させる最大の差異の割合を指定できます。

例

しきい値を1%に設定した場合、画像間の差異（差分スコア）が1%以内であればテストは成功します。差分スコアが許容値を超えると、テストは失敗し、許容値よりも大きな見た目の変化があったことを示します。

成功

失敗

この機能により、本来だと無関係な見た目のわずかな変化によって引き起こされる、意図しないテスト失敗を減らすことができます。また、ビジュアルリグレッションテストで許容できる基準を柔軟に設定できるようになります。

変更を受け入れる

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

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

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

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

ご利用時の注意点

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

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

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

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

• 要素のstyleを検証する

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