多くの自動UIテストは、セレクターやクラスなどのテキストベースの属性を使って要素を見つけることに依存しています。ただし、キャンバス要素、PDF、地図、または一意の属性を持たない要素など、特定のタイプの要素には、それらの属性だけでは安定して正確に操作できない場合があります。
ビジュアル検索を使うと、DOM やページソース内のテキスト属性に頼らず、AI の力を活用して、見た目の特徴に基づいて要素をターゲットにできます。要素をボックスで囲むと、mabl が自然言語の説明を生成し、実行時にその説明を使って要素を特定します。
ビジュアル検索は、次のステップタイプで利用できます。
| テストの種類 | ステップタイプ |
|---|---|
| ブラウザーテスト | クリック、テキストを入力、選択、変数の作成（要素のプロパティ）、アサート（要素） |
| モバイルテスト | タップ |
この記事では、ビジュアル検索を使うステップを学習させる方法を説明します。
ビジュアル検索とビジュアルフォールバックの違い
ビジュアル検索は、ステップが最初から要素を特定するために使う方法です。ビジュアルフォールバックは任意のバックアップで、ステップの主要な検索方法が失敗した場合にのみ実行されます。
新しいステップを追加
mablトレーナーでアプリケーションを起動したら、アプリケーションを正しい状態にして、新しいステップを追加してください。ビジュアル検索のオプションにたどり着く方法は、ステップのタイプによって異なります。
| ステップタイプ | 追加方法 |
|---|---|
| タップ（モバイルテスト） | +（ステップを追加） > タップ |
| クリック（ブラウザーテスト） | +（ステップを追加） > クリック |
| テキストを入力または選択（ブラウザーテスト） | アプリ内で操作を実行してトレーナーにステップを記録させ、記録されたステップを編集します。 |
| 変数の作成（ブラウザーテスト） | +（ステップを追加） > 変数の作成 > 要素のプロパティ |
| アサート（ブラウザーテスト） | +（ステップを追加） > アサート > 要素 |
クリックのステップを追加
トレーナーのみ
ボックスを描くにはライブのページが必要なため、ビジュアル領域のオプションは mablトレーナーでのみ利用できます。ウェブアプリのクイック編集でテストを編集している場合は、テストをトレーナーで開いてビジュアル検索を使ってください。
対象エリアを選択する
タップとクリックのステップでは、ステップの設定メニューでデフォルトでビジュアル領域が選択されています。その他のステップタイプでは、要素の検索方法の下でビジュアル領域を選択します。次に、対象にしたい領域をクリックしてドラッグし、ボックスで囲みます。
アサーションのためにビジュアル領域で要素をターゲットにする
mabl はターゲット領域のスクリーンショットを自動でモデルに送信し、モデルは選択した領域の AI 生成の説明を返します。mabl は生成AIによる説明を使って検索を行い、一致が見つかることを確認します。
モバイルのテストでは、実行時に選択した領域内でmablがタップのステップを実行する位置が、画像プレビューに表示されます。選択した領域内の特定の位置を正確に指定したい場合は、x-y座標を調整できます。
座標のプレビュー
説明を確認する
説明が正しい要素を強調表示しない場合は、領域を再選択するか、説明を手動で編集して、もう一度検索をテストしてください。
説明が正しい要素を強調していても、意図が正しいかも確認してください。あなたが達成したいことによっては、学習中にモデルが正しく要素を強調する説明を生成しても、最終的な意図を反映していない場合があります。
例として、多くのグリッド要素を持つアプリを考えてみましょう。
グリッド上の要素をターゲットにする例
モデルは「中央に『Car 10』と書かれた、ターコイズの角丸正方形タイル」という説明を生成し、正しい要素を強調しました。ただし、ページ上の特定の位置にあるタイルを狙う意図がある場合は、その意図が伝わるように説明を手動で更新してください。例：「左から2番目、上から3行目の正方形」。そのうえでテストしてください。
プロパティまたは属性を選択する
変数の作成ステップとアサートステップでは、フォームの残りの部分は説明が解決した要素を読み取るため、固定のリストではなく、その要素が実際に持つ値から選択できます。まず説明をテストを選択して、mabl が要素を解決できるようにしてください。それまでは、フォームは検証できない値を提示するのではなく、説明を実行するように求めます。
- 変数の作成 > 要素のプロパティ：プロパティのドロップダウンに、解決した要素の属性とプロパティが一覧表示され、プレビューにページ上の現在の値が表示されます。
- アサート > 要素：HTML属性とCSSプロパティのピッカーに、解決した要素の実際の属性と計算済みスタイルが一覧表示されます。
変数の作成ステップで要素のプロパティを選択する
ステップを保存する
ステップに満足したら、保存をクリックしてテストに追加してください。
ビジュアル検索でテストを実行する
実行時に、mabl は生成AIの説明とランタイムのスクリーンショットをモデルに送信し、モデルは対象のビジュアル領域（バウンディングボックス）を返します。次に mabl はそのボックス内で要素を特定し、その要素に対してステップのアクションを実行しようとします。タップとクリックでは、操作できる要素が見つからない場合にのみ、バウンディングボックスの中心をクリックします。
ビジュアル検索のステップ出力