概要
Autifyの「対象の見た目が変わらないことを確認する」ステップ（以下、VRTステップ）では、画面上の要素の表示が過去の状態と一致しているかどうかを画像比較により判定します。
このVRTステップが失敗する場合、いくつかの原因が考えられます。
主な原因と対応策
1. Chromeのバージョンアップによる影響
原因
前回の実行環境と比較してChromeブラウザのバージョンが変わっている且つ「対象の要素の見た目が変化しています」というエラーで失敗している場合、Chromeのバージョンアップによる影響が考えられます。
Autifyの実行環境で使用されるChromeブラウザは、定期的に最新版へ更新されます。
これにより、以下のような微細な見た目の変化が発生し、VRTの一致判定に影響を与えることがあります：
- スクロールバーの形状の変化（例：四角 → 丸みを帯びたデザイン）
- 要素の余白や配置のわずかなズレ
- システムフォントの微調整や描画アルゴリズムの変更
💡 例：朝のテストでは成功、同日の夕方テストでは失敗
→ Chromeのバージョンが更新されたことで、VRTの比較結果に差異が出た可能性があります。
対応策
- 「変更を受け入れる」を実行する
VRTステップの差異が意図的または仕様変更に伴う場合は、該当ステップにて変更を受け入れるを実行してください。
この操作により、以降のテストは更新後の見た目に基づいて判定されます。
Chromeアップデートの頻度と注意点
- Chromeのアップデートは月1回〜2回程度の頻度で行われます。
- UIの描画仕様がわずかに変更されることがあり、それによりVRTステップが失敗する場合があります。
- アップデートの影響が毎回出るわけではなく、要素のCSSや構造に依存する点にご注意ください。
2. 対象要素がビューポート（表示領域）外に存在する
原因
「対象の要素が表示されていません。」というエラーで失敗する場合、対象要素がビューポート内に収まっていないことが考えられます。
特に、テストの初回実行時にも関わらず基準画像が取得されずにこのエラーが発生した場合、要素が画面外にあり、Autifyが正しく認識できていない可能性が高いです。
対応策
-
① より細かい単位で要素を指定し、アサーションする
一度に大きな範囲を指定するのではなく、要素を細かく分割してアサーションステップを複数実施することで、各要素がビューポート内に入るように調整します。 -
② 画面サイズを一時的に縮小させ、対象要素がビューポートに入るようにする
VRTステップの前に以下のJSステップを追加し、画面表示を一時的に縮小して対象要素全体がビューポート内に収まるようにします。document.body.style.zoom = "60%";
その他の推奨される対応策
VRTステップを別のシナリオに分離する
頻繁に見た目の変化が発生する画面では、通常のE2EテストとVRTを分離することをおすすめします。これにより、機能の確認と見た目の確認をそれぞれ独立して管理できます。
- E2Eテスト用シナリオ： 機能の流れや処理を確認する
- VRT専用シナリオ： 見た目の確認を重点的に実施する
しきい値（閾値）を調整する【要相談】
差分検出のしきい値を調整することで、わずかな見た目の違いを無視できる場合があります。
ただし、しきい値を上げ過ぎてしまうと不具合を見落とすリスクがあるため、しきい値の調整には十分ご注意ください。
留意点
現在対応できないこと
- ロケータ指定による画像比較対象の制御（例：画像の一部のみ指定）
→ VRTは画像全体を比較するため、HTMLの属性では制御できません。 - 実行環境ごとのChromeバージョン固定
→ Autifyではブラウザのバージョン固定設定は行っておりません。
内部エラーが発生するケース
既知の問題として、Autify内部での一時的な通信エラーにより、内部エラーでテストが失敗することがあります。
多くの場合はテストを再実行していただくことで解消しますが、失敗が頻発するようであればお問い合わせください。
お困りの際は
VRTステップでの失敗原因が不明な場合や対応に迷う場合は、テスト結果のURLを添えてサポートまでお問い合わせください。
テスト結果を確認の上、最適な対応策をご案内いたします。