ビジュアルテストの出力 – mablヘルプ

ビジュアルテストがクラウドで実行されると、テスト出力には次の内容が含まれます。

スクリーンショットとログ: ブラウザテストの結果と同様に、ビジュアルスモークテストはテスト結果ページのスクリーンショットとログをリアルタイムに更新します。
視覚的変化: mablは各スクリーンショットを処理して視覚的変化を検出します。mablがテストの特定のページで視覚的変化を検出すると、テスト結果ページにその視覚的変化が表示されます。

mablが視覚的変化を計算している間、テスト結果ページには、"Scanning for visual changes; refresh for latest results" というバナーが表示されます。

ビジュアルテストの出力

ビジュアルテストの実行中

ビジュアルテストがクラウドで実行されると、1回のブラウザテスト実行としてカウントされます。

スクリーンショットとログ

ビジュアルスモークテストがクラウドで実行されるたびに、mablが生成したフロー「Visual Smoke Test」は各URLを訪問し、以下のアクションを完了します。

ページのスクリーンショットを取得する。
テストの診断を収集する。
- ページがHTTPレスポンスコード 200を返すことを確認する。
- ページのネットワークアクティビティを取得する。
- DOMスナップショットを取得する。

視覚的変化

ビジュアルテストでmablが視覚的変化を識別するには、2回の実行が必要です。

最初のプラン実行で、視覚的変化のベースライン(比較基準)を作成する。
以降の実行で、各ページとそれぞれのベースラインとを比較する。

視覚的変化のベースラインとの比較は、現在の実行と視覚的変化のベースラインとの静的な比較です。各画素を比較し、両方のスクリーンショットで画素位置の色がまったく同じであれば一致していると見なされます。その後、不一致がクラスター化され、実行中に取得された詳細なDOM情報に関連付けられます。最後に、個々の画素変化領域を含むコンポーネントが特定され、これらが視覚的変化として表示されます。

2つのスクリーンショット間の不一致が視覚的変化の最小しきい値 (点滅カーソルの大きさにほぼ等しい) を満たしている場合、mablは次の処理を実行します。

ページ上の、異なって見える領域を強調表示する。
テスト結果で、該当するステップに視覚的変化のフラグを付ける。
ワークスペースで視覚的変化に関するインサイトをレポートする。

視覚的変化のベースラインに関する注意事項

mablでは、テストを実行するブラウザーごとに別の視覚的変化のベースラインが作成されます。

アクセスするURLのリストを更新すると、mablは次回のプラン実行の際、視覚的変化の新しいベースラインをすべてのページに対して作成します。

ビジュアルスモークテストの確認

mablが視覚的変化に関するインサイトをビジュアルテストのために生成した場合、次のワークフローに従ってビジュアルテストの出力を確認できます。

視覚的変化の確認
アクションの選択
フラグ付きステップのエスカレーション
フラグ付きステップの解決

視覚的変化の確認

[インサイト] ページで、確認が必要なテストの "New visual changes" リンクをクリックします。

[インサイト] ページ

結果をクリックして、テスト結果を表示します。

視覚的変化に関するインサイト

結果をフィルタリングして、視覚的変化が含まれるステップのみを表示できます。視覚的変化が含まれるステップには、オレンジ色のカメラアイコンが表示されます。

ビジュアルテストのテスト出力ページ

ステップをクリックしてスクリーンショットを比較します。スクリーンショットタブには次の3つのビューがあります。

Current: 現在のテスト実行のスクリーンショットを表示
Baseline: mablが視覚的変化のベースライン(規格基準)としているスクリーンショットを表示
Side-by-side: 現在のスクリーンショットとベースラインのスクリーンショットを並べて表示

発生した視覚的変化に対するアクションの選択

視覚的変化が確認されたステップごとに、[Review] ドロップダウンから次のアクションのいずれかを選択します。

Accept as new baseline: 今後のプラン実行で、現在のスクリーンショットを視覚的変化のベースライン(比較基準)とします。
Dismiss as reviewed: 既存の視覚的変化のベースライン(比較基準)を今後も引き続き使用します。
Flag as visual regression: ステップにリグレッションフラグを追加して、そのページの調査が必要であることを示します。

フラグをつけたステップのエスカレーション

ステップにフラグを立てることで、さらなるレビューが必要な変更としてチームに認識させることができます。ビジュアルテストでフラグが立てられたステップをエスカレートするためのオプションには、次のようなものがあります。

テスト実行のリンクをチームと共有して、チームが結果を確認できるようにします。デスクトップアプリケーションを使用している場合は、こちらに記載されたリンクの共有手順に従ってください。
ワークスペースにJiraインテグレーションが設定されている場合、テスト結果ページでCreate Issue (新しいイシューを作成)します。

フラグをつけたステップの解決

リグレッションのためにフラグ付きステップのテスト結果を確認し、そのステップの視覚的変化が予期したとおりの変化であることが確認できた場合、チームは新しい視覚的変化を [Review] > [Accept as new baseline] で承認することができます。

フラグが立てられたステップでビジュアルリグレッションが示された場合、チームはアプリ内の課題を修正し、その後ビジュアルテスト内のステップを「Review > Dismiss as reviewed」として確認済みとして却下できます。