互动
🌐 Interaction
使用可访问性快照中的引用点击、悬停、拖动和选择元素。
🌐 Click, hover, drag, and select elements using refs from accessibility snapshots.
| 工具 | 描述 |
|---|---|
browser_click | 点击一个元素 |
browser_hover | 将鼠标悬停在一个元素上 |
browser_drag | 在元素之间拖放 |
browser_select_option | 选择下拉选项 |
browser_resize | 调整浏览器窗口大小 |
目标元素
🌐 Targeting elements
每个交互工具都需要一个 ref 参数,用于标识目标元素。Refs 来自 browser_snapshot 返回的无障碍快照或导航后。先拍摄快照,找到元素的 [ref=...] 标签,然后将该 ref 传递给交互工具。
🌐 Every interaction tool takes a ref parameter that identifies the target element. Refs come from
accessibility snapshots returned by browser_snapshot or after navigation. Take a snapshot first,
find the element's [ref=...] tag, then pass that ref to the interaction tool.
→ browser_snapshot
- button "Submit" [ref=e12] ← ref is "e12"
- link "Learn more" [ref=e15] ← ref is "e15"
→ browser_click { ref: "e12" } // clicks the Submit button
browser_click
点击页面上的一个元素。
🌐 Click an element on the page.
| 参数 | 类型 | 必需 | 描述 |
|---|---|---|---|
ref | 字符串 | 是 | 来自快照的元素引用 |
→ browser_click { ref: "e12" } // clicks the Submit button
→ browser_click { ref: "e15" } // clicks the Learn more link
browser_hover
将鼠标悬停在元素上以触发工具提示、下拉菜单或悬停状态。
🌐 Hover over an element to trigger tooltips, dropdowns, or hover states.
| 参数 | 类型 | 必需 | 描述 |
|---|---|---|---|
ref | 字符串 | 是 | 来自快照的元素引用 |
→ browser_hover { ref: "e3" }
→ browser_snapshot
// Snapshot now shows the revealed dropdown menu
- menuitem "Profile" [ref=e20]
- menuitem "Settings" [ref=e21]
- menuitem "Logout" [ref=e22]
browser_drag
拖动一个元素并将其放到另一个元素上。
🌐 Drag one element and drop it onto another.
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
startRef | 字符串 | 是 | 要拖动的元素 |
endRef | 字符串 | 是 | 要放置到的元素 |
→ browser_drag { startRef: "e5", endRef: "e10" }
browser_select_option
在 <select> 下拉菜单中选择一个或多个选项。
🌐 Select one or more options in a <select> dropdown.
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
ref | 字符串 | 是 | 选择元素的引用 |
values | 字符串[] | 是 | 要选择的值或标签 |
→ browser_snapshot
- combobox "Country" [ref=e7]
→ browser_select_option { ref: "e7", values: ["United States"] }
browser_resize
调整浏览器窗口大小。
🌐 Resize the browser window.
| 参数 | 类型 | 必填 | 描述 |
|---|---|---|---|
width | 数字 | 是 | 宽度(像素) |
height | 数字 | 是 | 高度(像素) |
→ browser_resize { width: 375, height: 812 } // mobile viewport
→ browser_resize { width: 1920, height: 1080 } // desktop
工作流程:填写表格并提交
🌐 Workflow: filling a form and submitting
→ browser_snapshot
- textbox "Email" [ref=e3]
- textbox "Password" [ref=e5]
- combobox "Role" [ref=e7]
- button "Sign up" [ref=e9]
→ browser_type { ref: "e3", text: "alice@example.com" }
→ browser_type { ref: "e5", text: "s3cret!" }
→ browser_select_option { ref: "e7", values: ["Admin"] }
→ browser_click { ref: "e9" }
→ browser_snapshot
- heading "Welcome, Alice!" [level=1]
- text: "Your account has been created."