瀏覽器能給出控制項的角色和無障礙名稱時，先用它們定位。需要分清具體紀錄時，查看局部 DOM。需要判斷圖表高亮、按鈕遮擋或畫布內的控制項時，再取一張當前截圖。
一位開發者在 Playwright 社區原帖 里描述過，Agent 遇到一串同名的 Add to Cart 按鈕，直接取了第九個。它缺的是按鈕與商品之間的對應關係。按商品標題限定卡片，或者查穩定的商品 ID，都比記按鈕的順序更貼合任務。
下文用 Tabbit Browser 說明如何在一個瀏覽器分頁里切換這幾種輸入。
核心結論
角色和無障礙名稱描述控制項的用途。遇到同名控制項，按目標紀錄、表單或彈窗限定範圍。
DOM 提供元素屬性和紀錄關係。查到節點後，還要判斷可見性、可用狀態和滑鼠命中位置。
截圖保存某一時刻的外觀。視覺讀懂圖片後，可以把動作交回語義定位器。
頁面或目標位置變化時重新觀察。點擊之後單獨核對結果。
三種輸入各自提供什麼
| 輸入 | 能提供 | 常見缺口 | 適合先做什麼 |
|---|---|---|---|
| 局部 DOM | 運行中的節點、文本、屬性 | 可能包含隱藏或舊節點 | 按已知紀錄 ID 查找一行 |
| 無障礙快照 | 角色、名稱及部分狀態 | 可能省略業務 ID 和像素位置 | 找到具名輸入框或按鈕 |
| 截圖加視覺 | 當時的佈局、色彩、位置關係 | 坐標隨視口和佈局變化 | 看遮擋層或畫布中的圖形 |
DOM 是瀏覽器運行中的文檔，網頁腳本執行後，元素結構可能和初始 HTML 響應不同。無障礙快照可保留標題層級、角色和選中狀態，但可能略掉 CSS 類名或資料屬性。截圖保留瀏覽器實際繪制的內容，包括沒有獨立節點的像素。 Playwright 快照 · 定位器文檔
讀取輸入和發送動作是兩回事。一套瀏覽器工具可以同時提供語義定位和滑鼠輸入。需要處理瀏覽器外的視窗時，再按工具覆蓋的範圍判斷是否需要 Computer Use。
用語義確定動作，用局部 DOM 確定紀錄
兩張發票卡片都有「保存」。先用發票號、標題或應用程式約定的穩定屬性定位卡片，再在卡片中查找唯一按鈕。僅用按鈕順序，一旦列表排序變化，就可能改到另一張發票。
有些組件的語義確實不夠完整。一位 Playwright 用戶 遇到缺少有效角色的自定義下拉，考慮改用測試 ID。自有應用程式可以補可訪問名稱、鍵盤行為和穩定測試 ID。第三方頁面上可以先看控制項所在容器和打開後的菜單，避免把任何下拉都假定成 combobox。
即使已找到目標，載入狀態或遮罩也可能擋住點擊。Playwright 普通點擊會檢查可見、穩定、能接收事件、已啓用等條件。出現攔截時先檢查實際命中對象，再決定如何處理。按鈕點不動的排查方法 · Playwright 動作條件
需要畫面資訊時再讀截圖
Canvas 圖表可能只對應一個 DOM 節點，但藍色資料點和紅色資料點在圖中分得很清楚。先檢查應用程式是否另外提供可訪問圖例、鍵盤操作或資料匯出。只有目標確實只存在於像素中時，才需要通過截圖識別。HTML Canvas 支持備用內容，實際能否用要看應用程式實現。MDN Canvas 文檔
能從圖上認出已展開菜單時，可以返回角色定位，選擇該菜單里的具名項目。若是畫布內無獨立元素的控制項，再使用位置或手勢。Playwright 滑鼠使用視口的 CSS 像素。截圖被裁剪或縮放時，要換算原點與比例，保持與當前視口一致。Playwright 滑鼠介面
頁面載入、工具提示或虛擬列表都可能改變下一次動作的目標。即使定位器重新解析了，「第一行」也可能換成另一條紀錄。操作前重新核對身份，操作後讀狀態。
在 Tabbit 中處理同一分頁的表單和畫布
假設任務是在網頁里保存貨號，再切換圖表編輯器的顏色。先檢查 Item code 與 Save item 的角色和名稱，保存後查對應貨號的狀態。選擇畫布顏色時，再觀察當前截圖並核對顏色回顯。
表單狀態與畫布狀態分別對應兩項結果。交付給人的結果回條也應分開寫，避免只說「成功」。
Tabbit CLI 官方快速開始 說明瞭如何訪問分頁，CLI 指南 涵蓋任務和結果回條。使用 MCP 可以參考 Playwright MCP 項目 與 接入步驟。這些介面回答 Agent 怎樣連上網頁，頁面結構和任務目標決定該讀哪種輸入。瀏覽器控制方式
按當前問題決定下一步
| 情況 | 下一步 | 核對什麼 |
|---|---|---|
| 多條紀錄上的按鈕同名 | 按標題或穩定 ID 限定容器 | 目標紀錄內只有一個相符項目 |
| 快照里缺少畫面上可見的控制項 | 查局部 DOM，必要時補截圖 | 找到可靠語義目標或當前畫面中的唯一控制項 |
| 截圖後佈局改變 | 重新觀察再使用位置 | 當前視口內的目標對應正確對象 |
| 點擊返回成功但紀錄沒變 | 先查狀態再決定是否重試 | 已確認結果、明確失敗或暫停人工核對 |
用 精簡觀察的方法 控制輸入範圍。週期性任務可以把重試與人工復核計入 單次成功成本。如果任務本來只是讀取或匯出紀錄，也可以看看應用程式是否提供 API 或 MCP 介面。
第一次跑流程時，把紀錄標識和成功信號寫入 Agent 提示詞，按 首個任務清單 約定沒有結果回條時何時停下。能按語義定位就先定位，缺紀錄身份查局部 DOM，缺畫面資訊再看截圖。在同一分頁里要完成這些動作時，可以使用 Tabbit。
常見問題
無障礙快照等於 DOM 嗎？
兩者保留的資訊不同。DOM 提供元素及屬性，快照則按工具的方式呈現計算後的角色、名稱和狀態，可能省略佈局、類名和業務標識。
基於 DOM 的 Agent 能操作 Canvas 嗎？
它能找到 Canvas 元素，也能使用應用程式另外提供的語義控制項。如果目標只畫在像素里，需要讀取截圖或使用應用程式提供的介面。
什麼時候需要重截網頁？
下一步依賴位置時，滾動、縮放、調整視窗、打開彈窗或頁面重排後應重新截圖。如果結果也是視覺狀態，操作後再看一次。
瀏覽器視覺一定靠坐標點擊嗎？
視覺負責讀圖。混合工具可以先通過截圖認出目標，再通過語義定位或鍵盤執行；目標缺少可靠元素身份時才考慮坐標。
點擊保存後應該檢查什麼？
核對目標紀錄的保存狀態、已儲存的值或可靠結果回條。結果不明確時先讀取紀錄，避免重復提交。
面對新網站先試哪種方法？
有標籤的控制項先用角色和名稱。遇到重復紀錄時按 DOM 屬性或容器縮小範圍，遇到外觀或位置問題時補截圖。