mablでは、視覚的変化を学習を使用して、Webアプリケーションの外観の変化を検出できます。プランに対して視覚的変化を学習を有効にすると、mablは機械学習を使用して、アプリケーションUIの動的な視覚モデルを多くのプラン実行を通じて作成します。このモデルは、バナー広告、商品リスト、ビデオ、アニメーションなどの動的コンテンツを含む領域を無視します。動的コンテンツ領域外で視覚的変化がある場合、mablは視覚的変化インサイトを生成します。
この記事では、mablが動的なビジュアルモデルを構築し、視覚的変化を検出する方法について説明します。
動的なビジュアルモデルの作成
プランの視覚的変化を学習を管理するには、プランを編集し、ブラウザデバイス設定 > 追加設定に移動します。視覚的変化を学習をオンにすると、mablはテスト実行中の変化を検出するための動的なビジュアルモデルの作成を開始します。
ブラウザテストの動的なビジュアルモデルを作成するには、次の条件を満たす必要があります。
- テストは、プランが実行された際、10回から12回パスしました。アドホックなテストの実行は、ダイナミックなビジュアル・モデルには寄与しません。
- 合格したこれらのプラン実行が同一環境に存在: 動的なビジュアルモデルは環境ごとに作成されます。
- パッシング計画の実行は10日間以内に行われました。ダイナミック・ビジュアル・モデルでは、10日以内に10~12回のパッシング計画の実行が必要です。
- プランがChromeまたはEdgeで実行されました:動的なビジュアルモデルがブラウザごとに作成されます。
- テスト実行のテストバージョンが同じ: ブラウザテストを更新するたびにバージョンは変わり、動的なビジュアルモデルはリセットされます。
これらの基準を満たした後、ダイナミック・ビジュアルモデルを完成させるのに30分から24時間を要します。
デフォルトの視覚的比較
テストがデータを収集している間、または動的なビジュアルモデルを構築している間、mablはデフォルトの視覚的比較を使用します。デフォルトの視覚的比較は、同じ環境での前回のプラン実行からのスクリーンショットをベースラインとして使用します。
視覚的変化を学習がオフになっている場合、mablはデフォルトの視覚的比較も使用します。
デフォルトの視覚的比較では、最初に画素レベルでの比較が行われます。各画素を比較し、両方のスクリーンショットで画素位置の色がまったく同じであれば一致していると見なされます。不一致がクラスター化され、実行中に取得された詳細なDOM情報に関連付けられます。2つのスクリーンショット間の違いが、点滅するカーソルのサイズに相当する最小視覚変化のしきい値を満たす場合、mablは次のことを行います。
- ページ上の異なって見える領域を強調表示します。
- ベースラインとの比較を並べて表示する。ベースラインのスクリーンショットは、同一環境で前回行われたプラン実行のスクリーンショットです。
- テスト出力ページで、該当するステップに“visual change”というラベルを表示する。
視覚的変化を検出する
動的なビジュアルモデルが構築された後、mablはそれを基準として使用します。基準と比較して現在のプラン実行で視覚的変化が検出された場合、mablは次の処理を実行します。
- ページ上の、異なって見える領域を強調表示する。
- 視覚的変化の動的なベースラインとの比較を並べて表示する。
- テスト結果ページで、該当するステップに "視覚的変化" というラベルを表示する。
- 視覚的変化に関するインサイトを生成する
次のテスト出力の並列比較は、mablが視覚的変化をどのように表現するかを示しています。動的コンテンツは灰色の斜め線で強調表示され、視覚的変化はピンクで強調表示されます。
視覚的変化を検出する
視覚的変化に関するインサイトの通知を設定する
mablではSlackとMicrosoft Teamsのいずれともインテグレーションを設定することができるため、Slack と Microsoft Teams のどちらに対しても、視覚的変化に関するインサイトを通知できます。