互动

🌐 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

每个交互工具都需要一个 target 来识别元素。目标来自 browser_snapshot、browser_find 返回的可访问性快照，或者每次操作后自动生成。找到元素的 [ref=...] 标签，并将该引用作为 target 传递。

🌐 Every interaction tool takes a target that identifies the element. Targets come from accessibility snapshots returned by browser_snapshot, browser_find, or automatically after each action. Find the element's [ref=...] tag and pass that ref as target.

→ browser_snapshot
  - button "Submit" [ref=e12]       ← target is "e12"
  - link "Learn more" [ref=e15]     ← target is "e15"

→ browser_click { target: "e12" }

target 也可以接受一个独特的选择器或定位字符串，而不是 ref，当你已经知道元素的时候，这非常方便：

→ browser_click { target: "getByRole('button', { name: 'Submit' })" }
→ browser_click { target: "#submit" }

详情请参见 Snapshots 关于引用。

🌐 See Snapshots for details on refs.

browser_click

点击页面上的一个元素。

🌐 Click an element on the page.

参数	类型	是否必填	描述
`target`	字符串	是	来自快照的元素引用，或一个唯一选择器
`doubleClick`	布尔值	否	执行双击而不是单击
`button`	字符串	否	`left`（默认）、`right` 或 `middle`
`modifiers`	字符串数组	否	`Alt`、`Control`、`ControlOrMeta`、`Meta`、`Shift`

→ browser_click { target: "e12" }
→ browser_click { target: "e15", doubleClick: true }
→ browser_click { target: "e20", button: "right" }
→ browser_click { target: "e22", modifiers: ["Shift"] }

browser_hover

将鼠标悬停在元素上以触发工具提示、下拉菜单或悬停状态。

🌐 Hover over an element to trigger tooltips, dropdowns, or hover states.

参数	类型	是否必填	描述
`target`	字符串	是	元素引用或选择器

→ browser_hover { target: "e3" }

  - menuitem "Profile" [ref=e20]
  - menuitem "Settings" [ref=e21]
  - menuitem "Logout" [ref=e22]

browser_drag

拖动一个元素并将其放到另一个元素上。

🌐 Drag one element and drop it onto another.

参数	类型	必填	描述
`startTarget`	字符串	是	要拖动的元素
`endTarget`	字符串	是	放置的目标元素

→ browser_drag { startTarget: "e5", endTarget: "e10" }

要从页面外拖入文件或数据，请使用 browser_drop。

🌐 To drag files or data in from outside the page, use browser_drop.

browser_select_option

在 <select> 下拉菜单中选择一个或多个选项。

🌐 Select one or more options in a <select> dropdown.

参数	类型	必填	描述
`target`	string	是	选择元素的引用或选择器
`values`	string[]	是	要选择的值——单个值或多个值

→ browser_snapshot
  - combobox "Country" [ref=e7]

→ browser_select_option { target: "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 { target: "e3", text: "alice@example.com" }
→ browser_type { target: "e5", text: "s3cret!" }
→ browser_select_option { target: "e7", values: ["Admin"] }
→ browser_click { target: "e9" }

  - heading "Welcome, Alice!" [level=1] [ref=e2]
  - text: Your account has been created.

目标元素​

browser_click​

browser_hover​

browser_drag​

browser_select_option​

browser_resize​

工作流程：填写表格并提交​