Interaction

Click, hover, drag, and select elements using refs from accessibility snapshots.

Tool	Description
browser_click	Click an element
browser_hover	Hover over an element
browser_drag	Drag and drop between two elements
browser_select_option	Select a dropdown option
browser_resize	Resize the browser window

Targeting elements

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 also accepts a unique selector or locator string instead of a ref, which is handy when you already know the element:

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

See Snapshots for details on refs.

browser_click

Click an element on the page.

Parameter	Type	Required	Description
target	string	yes	Element ref from the snapshot, or a unique selector
doubleClick	boolean	no	Perform a double click instead of a single click
button	string	no	left (default), right, or middle
modifiers	string[]	no	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.

Parameter	Type	Required	Description
target	string	yes	Element ref or selector

→ 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.

Parameter	Type	Required	Description
startTarget	string	yes	Element to drag
endTarget	string	yes	Element to drop onto

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

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

browser_select_option

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

Parameter	Type	Required	Description
target	string	yes	The select element ref or selector
values	string[]	yes	Values to select — a single value or multiple values

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

→ browser_select_option { target: "e7", values: ["United States"] }

browser_resize

Resize the browser window.

Parameter	Type	Required	Description
width	number	yes	Width in pixels
height	number	yes	Height in pixels

→ 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.