ブラウザテストでの視覚的変化の検出

ブラウザテストがプランの一部として実行されるとき、mablはアプリケーションUIの視覚的変化をチェックします。視覚的変化の検出は、アプリケーションを監視して、外観全般に問題がないことを確認するのに役立ちます。

📘

プラン実行時のChromeとEdgeでのテストのみ動作

視覚的変化の検出は、プランの一部として実行される、ChromeとEdgeを対象とするブラウザテストでのみ動作します。

視覚的変化の検出は、[プランを編集] ページの [詳細オプション] の [視覚的変化を学習] トグルスイッチで有効化・無効化を管理します。

このガイドでは、視覚的変化の検出に関する2つのモードについて説明します。

• デフォルトの視覚的比較: [視覚的変化を学習] のトグルスイッチががオフの場合、現在のプラン実行のスクリーンショットを、その環境で前回行われたプラン実行のスクリーンショットと比較します。比較対象は前回一回の外観のみです。
• 視覚的変化を学習: [視覚的変化を学習] のトグルスイッチがオンの場合、現在のプラン実行のスクリーンショットを、その環境での複数回のプラン実行を経て作成される、動的なビジュアルモデルと比較します。

📘

ご注意

## デ を有効にした場合、動的なビジュアルモデルの準備ができるまで、mablはデフォルトの視覚的比較を使用します。

動的なビジュアルモデルが作成できるまでに必要なプラン実行の回数については、下記の動的なビジュアルモデルの作成 のセクションを参照してください。

デフォルトの視覚的比較

[Visual change learning] がオフの場合、mablは現在のプラン実行と、同一環境で行われた前回のプラン実行との間でスクリーンショットを比較します。

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

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

• ページ上の異なって見える領域を強調表示する。
• ベースラインとの比較を並べて表示する。ベースラインのスクリーンショットは、同一環境で前回行われたプラン実行のスクリーンショットです。
• テスト出力ページで、該当するステップに“visual change”というラベルを表示する。

📘

ご注意

### 視覚的 がオフの場合、mablは視覚的変化に関するインサイトを生成しません。

視覚的変化の学習

[プランの編集] ページの [視覚的変化を学習] を有効にすると、mablは、その環境での複数回のテスト結果をもとにした、動的なビジュアルモデルの作成を開始します。

動的なビジュアルモデル

mablは機械学習を利用して、バナー広告、製品リスト、ビデオ、アニメーションなどの動的コンテンツを含む領域以外について、アプリケーションUIの動的なビジュアルモデルを作成します。

現在のプラン実行と動的なビジュアルモデルとを比較して、現在のプラン実行で視覚的変化を検出した場合、mablは次の処理を実行します。

• ページ上の、異なって見える領域を強調表示する。
• 視覚的変化の動的なベースラインとの比較を並べて表示する。
• テスト結果ページで、該当するステップに "視覚的変化" というラベルを表示する。
• 視覚的変化に関するインサイトを生成する。

👍

視覚的変化に関するインサイトの通知の設定

mablでは、インテグレーションを設定することで、SlackとMicrosoft Teamsのどちらに対しても、視覚的変化に関するインサイトを通知させることができます。

動的なビジュアルモデルの作成

ブラウザテストの動的なビジュアルモデルを作成するには、次の条件を満たす必要があります。

• プランでのテスト実行に10回合格: アドホックテストの実行結果は動的なビジュアルモデルには使用されません。
• 合格したこれらのプラン実行が同一環境に存在: 動的なビジュアルモデルは環境ごとに作成されます。
• プランがChromeで実行された
• テスト実行のテストバージョンが同じ: ブラウザテストを更新するたびにバージョンは変わり、動的なビジュアルモデルはリセットされます。

テストが動的なビジュアルモデルを作成している間、mablはデフォルトの視覚的比較、つまり現在の実行と前回の実行との比較を使用します。

📘

静的なベースラインの設定

デプロイメントイベント(Deployment Events) API、set_static_baselineを使用すると、前述とは異なる視覚的変化の検出タイミングを設定できます。

set_static_baselineを true に設定してデプロイメントを実行すると、mablはデプロイメントイベントでのテスト実行のスクリーンショットをベースライン(比較基準)として、その環境で以後行われるすべてのプラン実行の結果と比較します。

プラン実行のステップのスクリーンショットが、視覚的変化の静的なベースライン(比較基準)の同一ステップのものと異なる場合、mablはそのステップを視覚的変化として強調表示し、視覚的変化に関するインサイトを生成します。