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

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

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

[block:ima トグルスイッチで視覚的変化の検出の有効化・無効化を管理

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

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

デフォルトの視覚的比較

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

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

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

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

視覚的変化の学習

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

動的なビジュアルモデル

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

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

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

テスト結果ページで視覚的変化と動的コンテンツを強調表示

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

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

• テストは、プランが実行された際、10回から12回パスしました。アドホックなテストの実行は、ダイナミックなビジュアル・モデルには寄与しません。
• 合格したこれらのプラン実行が同一環境に存在: 動的なビジュアルモデルは環境ごとに作成されます。
• パッシング計画の実行は10日間以内に行われました。ダイナミック・ビジュアル・モデルでは、10日以内に10～12回のパッシング計画の実行が必要です。
• プランがChromeで実行された
• テスト実行のテストバージョンが同じ: ブラウザテストを更新するたびにバージョンは変わり、動的なビジュアルモデルはリセットされます。

これらの基準を満たした後、ダイナミック・ビジュアルモデルを構築するのに30分から24時間を要します。テストがまだデータ収集中またはダイナミック・ビジュアルモデルを構築している間、 mabl はデフォルトのビジュアル比較を使用します（現在の実行から以前の実行まで）。