多くの自動UIテストは、セレクターやクラスなどのテキストベースの属性を使って要素を見つけることに依存しています。ただし、キャンバス要素、PDF、地図、または一意の属性を持たない要素など、特定のタイプの要素には、それらの属性だけでは安定して正確に操作できない場合があります。
ビジュアル検索を使うと、DOM やページソース内のテキスト属性に頼らず、AI の力を活用して、見た目の特徴に基づいて対象の要素をタップまたはクリックできます。
提供状況
ビジュアル検索は、ブラウザー テストのクリック ステップと、モバイル テストのタップ ステップで利用できます。
- クリックステップ：クリックステップ向けのビジュアル検索が早期アクセスで利用できるようになりました。ワークスペースで有効にするには、mabl アプリの Labs ページに移動してください：ワークスペース > Labs。
- タップステップ：モバイルのタップステップ向けビジュアル検索は、すでに一般提供されています。
この記事では、視覚的な特徴に基づいてターゲット領域をタップまたはクリックするビジュアル検索のステップを学習させる方法を説明します。
新しいステップを追加
mablトレーナーでアプリケーションを起動したら、アプリケーションを正しい状態にして、新しいステップを追加してください。
- モバイルテスト：+（ステップを追加） タップ
- ブラウザーのテスト: +（ステップを追加） クリック
対象エリアを選択する
ステップの設定メニューでは、デフォルトで「ビジュアル領域」が選択されています。対象にしたい領域をクリックしてドラッグし、ボックスで囲みます。
mabl はターゲット領域のスクリーンショットを自動でモデルに送信し、モデルは選択した領域の AI 生成の説明を返します。mabl は生成AIによる説明を使って検索を行い、一致が見つかることを確認します。
モバイルのテストでは、実行時に選択した領域内でmablがタップのステップを実行する位置が、画像プレビューに表示されます。選択した領域内の特定の位置を正確に指定したい場合は、x-y座標を調整できます。
説明を確認する
説明が正しい要素を強調表示しない場合は、領域を再選択するか、説明を手動で編集して、もう一度検索をテストしてください。
説明が正しい要素を強調していても、意図が正しいかも確認してください。あなたが達成したいことによっては、学習中にモデルが正しく要素を強調する説明を生成しても、最終的な意図を反映していない場合があります。
例として、多くのグリッド要素を持つアプリを考えてみましょう。
モデルは「中央に『Car 10』と書かれた、ターコイズの角丸正方形タイル」という説明を生成し、正しい要素を強調しました。ただし、ページ上の特定の位置にあるタイルを狙う意図がある場合は、その意図が伝わるように説明を手動で更新してください。例：「左から2番目、上から3行目の正方形」。そのうえでテストしてください。
ステップを保存する
ステップに満足したら、保存をクリックしてテストに追加してください。
ビジュアル検索でテストを実行中
実行時に、mabl は生成AIの説明とランタイムのスクリーンショットをモデルに送信し、モデルはバウンディングボックスを返してタップまたはクリック操作を実行します。