ロールとアクセシブルネームが分かるコントロールは、その情報で探します。特定のレコードを見分けたいなら、その周辺の DOM を調べます。グラフの強調表示やボタンを覆う要素を知りたいときは、最新のスクリーンショットを撮ります。
Playwright コミュニティの投稿 では、エージェントが同名の Add to Cart ボタンから九番目を選ぶ例が紹介されています。必要だったのは、ボタンと商品の対応です。商品カードの見出しや安定した ID があれば、並び順が変わっても対象を指定できます。Tabbit Browser でも、同じ考え方を一つのタブに適用できます。
要点
ロールと名前で操作を特定し、目的の行やダイアログの中に絞り込みます。
DOM 属性でレコードを識別できます。要素が見つかっても、表示やクリックの可否は別に確認します。
画像認識で対象を判断したあと、ロール指定で操作できる場合があります。
ページが変化したら観察し直し、クリックの成否とは別に結果を確認します。
三つの入力を比べる
| 入力 | 読み取れる情報 | 抜けやすい情報 | 最初の用途 |
|---|---|---|---|
| 局所的な DOM | 現在のノード、テキスト、属性 | 非表示要素も検索に当たる | ID で行を探す |
| アクセシビリティスナップショット | ロール、名前、一部の状態 | アプリ固有の ID や座標 | 名前付きの入力欄やボタンを探す |
| スクリーンショットと画像認識 | 描画された位置、色、配置 | 撮影時点や表示範囲に依存する | Canvas や重なりを調べる |
DOM は JavaScript の実行で変化します。アクセシビリティスナップショットは見出しや選択状態を保ちながら、CSS クラスなどを省くことがあります。何を読むかと、どの方法で操作するかは別です。コンピューター操作ツール は実装によってタブ外も扱えます。 ARIA スナップショット · ロケーター
操作するレコードを先に特定する
請求書カードが二つあり、どちらにも保存ボタンがあるなら、先に請求書番号や安定した属性でカードを選びます。その中でボタンが一つに絞れることを確認します。別の Playwright の投稿 では、ロールで見つからないカスタムドロップダウンにテスト ID を使う案が出ています。自社のアプリならラベルとキーボード操作を確認します。他社サイトならトリガーと開いたメニューを調べます。
Playwright はクリック時に表示、安定性、有効状態、イベントを受け取れるかを確認します。ダイアログがポインターを遮る場合は クリックできないボタンの調べ方 が役立ちます。 操作可能性の条件
描画された対象と現在位置を確かめる
DOM には Canvas が一つだけでも、画像では二系列を区別できます。アクセシブルな凡例、キーボード操作、データ出力があるか確認してください。Canvas 自体にも代替コンテンツを用意できます。開いているメニューが画像で判明すれば、項目はロールで選べます。描画だけの対象には座標やジェスチャーが必要な場合があります。Playwright のマウス座標はビューポートの CSS ピクセルです。切り出し位置と倍率を確認し、後から表示されたバナーなどで配置がずれたら撮り直します。 Canvas の仕様 · マウス API
Tabbit の一つのタブで使い分ける
商品コードを保存し、続けて色を選ぶ例です。Item code と Save item は名前で特定し、保存されたコードを確かめます。描画された色の選択には現在の画像を使い、操作後の色表示も確認します。
Tabbit CLI の公式クイックスタート でタブへの接続方法を、CLI ガイド でタスクと実行結果の扱いを確認できます。MCP を使う場合は Playwright MCP プロジェクト と セットアップ手順 を参照できます。ブラウザー操作の接続方法 も比較できます。
次に何をするか決める
| 状況 | 次の手順 | 確認すること |
|---|---|---|
| 別レコードに同名ボタンがある | レコードの見出しや ID で範囲を絞る | 目的の範囲に一致が一つだけある |
| 画面にはあるがスナップショットにない | 局所 DOM を読み、必要なら画像を撮る | 意味情報か現在の画面で特定できる |
| 撮影後に配置が変わった | 観察を更新する | 現在位置と対象の一致 |
| クリック完了後も結果が不明 | 再試行前に状態を読む | 成功、既知の失敗、または人による確認 |
観察範囲の絞り方 を使うと必要な情報に集中できます。繰り返す作業は 成功一件あたりのコスト に再試行や確認も含めます。読み取りだけなら API や MCP の提供も確認してください。プロンプト に対象と結果の条件を書き、初回タスクのチェックリスト で停止条件を決めます。開いているタブの中で観察と操作を続ける場合は Tabbit を利用できます。
よくある質問
アクセシビリティスナップショットは DOM と同じですか？
DOM にはノードと属性があります。スナップショットは計算されたロール、名前、状態を表し、アプリ固有の ID や位置を省くことがあります。
DOM を読むエージェントは Canvas を操作できますか？
Canvas 要素やアプリが公開する意味情報付きのコントロールは操作できます。描画だけで表現された対象には、画像かアプリ側の別の操作手段が必要です。
いつスクリーンショットを撮り直すべきですか？
次の操作が位置に依存する場合は、スクロール、拡大、リサイズ、ダイアログ表示のあとに撮り直します。結果が見た目に表れる場合は操作後にも確認します。
画像認識を使うと座標でしかクリックできませんか？
画像認識は画面の解釈を担当します。意味情報付きのロケーターやキーボード操作を使える場合もあり、要素を特定できないときには座標が候補になります。
保存ボタンを押したあとに何を確認しますか？
目的のレコードの保存状態、保持された値、または受付結果を確かめます。不明な場合は再送信する前に状態を読み直します。
初めてのサイトでは何から試しますか？
まずコントロールのロールと名前を確認します。同じ項目が並ぶ場合は DOM の範囲を絞り、見た目の確認には画像を追加します。