ビジュアルスモークテストの結果

ビジュアルスモークテストをクラウドで実行すると、テスト結果に次の内容が含まれます。

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

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

📘

ビジュアルスモークテストの実行

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

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

ビジュアルスモークテストがクラウドで実行されるたびに、mablが生成したFlow "Visual Smoke Test" は各URLにアクセスし、次のアクションを実行します。

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

視覚的変化

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

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

視覚的変化のベースラインとの比較は静的な比較です。現在のテスト実行のページが視覚的変化のベースラインと異なる場合、mablは次の処理を実行します。

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

📘

ビジュアルスモークテストの更新

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

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

ビジュアルスモークテストの視覚的変化に関するインサイトがmablで生成された後、次のワークフローでビジュアルスモークテストの結果を確認できます。

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

視覚的変化の確認

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

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

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

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

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

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

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

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

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

視覚的変化が確認されたステップにリグレッションフラグを付けることで、詳細な確認が必要なであることをチームに示します。ビジュアルスモークテストでフラグをつけたステップをチームにエスカレーションするには、次のようなオプションがあります。

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

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

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

フラグをつけたステップがリグレッションだった場合、チームはアプリケーション内の問題を修正した後、そのステップを[Review] > [Dismiss as reviewed]として、対応済みであることを記録します。