Skip to main content
Interaction commands let you act on page elements the way a real user would — clicking buttons, filling in forms, scrolling, dragging, and more. Most commands accept either a CSS selector or a versioned snapshot ref (e.g. @v1:e3). Refs are generated by gsd-browser snapshot and are the preferred approach because they are stable, versioned, and fully described by the browser’s internal element model. Always re-run gsd-browser snapshot after navigation or significant DOM changes before using refs from a previous snapshot.

gsd-browser snapshot

Scan the page and assign versioned refs (@vN:eM) to interactive elements. Refs returned by a snapshot are valid until the page changes; after any navigation or DOM mutation, take a fresh snapshot before using ref-based commands.
gsd-browser snapshot [flags]
--mode
string
Focus the snapshot on a subset of elements. Accepted values:
ModeWhat it captures
interactive (default)Buttons, inputs, links, and selects
formForm fields with current values and labels
dialogContent inside open modals or dialogs
navigationNavigation links and menus
errorsError messages and validation hints
headingsh1h6 elements
visible_onlyEvery visible element on the page
--selector
string
Scope the snapshot to a specific region of the page using a CSS selector.
--limit
number
Maximum number of elements to include. Defaults to 40. Increase this on complex single-page apps.
Examples
# Default snapshot — interactive elements
gsd-browser snapshot

# Snapshot only the sign-up form
gsd-browser snapshot --selector "#signup-form" --mode form

# Capture more elements on a dense UI
gsd-browser snapshot --limit 80

# Snapshot visible content for a broad audit
gsd-browser snapshot --mode visible_only

gsd-browser get-ref

Retrieve metadata for a specific element ref, including its bounding box, ARIA role, CSS selector, and structural signature. Use this to inspect an element before interacting with it or to debug a stale-ref problem.
gsd-browser get-ref <ref>
ref
string
required
A versioned ref string in @vN:eM format, as returned by gsd-browser snapshot.
Example
gsd-browser snapshot
gsd-browser get-ref @v1:e3
# Prints: role, name, bounding box, selector hint, structural signature

gsd-browser click

Click an element identified by a CSS selector or by exact coordinates. To click by ref, use gsd-browser click-ref instead.
gsd-browser click <selector> [flags]
gsd-browser click --x <n> --y <n> [flags]
selector
string
CSS selector of the element to click. Omit when clicking by coordinates.
--x
number
Horizontal coordinate in CSS pixels. Must be used with --y.
--y
number
Vertical coordinate in CSS pixels. Must be used with --x.
Examples
# Click a button by CSS selector
gsd-browser click "#submit-btn"

# Click at exact coordinates
gsd-browser click --x 640 --y 360

gsd-browser click-ref

Click an element identified by its snapshot ref. Prefer this over click when you have a fresh snapshot — refs encode element identity more precisely than CSS selectors.
gsd-browser click-ref <ref>
ref
string
required
A versioned ref string in @vN:eM format, as returned by gsd-browser snapshot.
Example
gsd-browser snapshot
gsd-browser click-ref @v1:e2

gsd-browser type

Type text into an input element. By default the text is filled atomically; use --slowly when you need realistic keystroke-by-keystroke input (e.g. to trigger autocomplete handlers).
gsd-browser type <selector> <text> [flags]
selector
string
required
CSS selector of the target input, textarea, or content-editable element.
text
string
required
The text to type into the element.
--slowly
flag
Type character-by-character with realistic delays between keystrokes. Useful for triggering autocomplete, search suggestions, or other keystroke-driven event listeners.
--clear-first
flag
Clear any existing value in the field before typing the new text.
--submit
flag
Press Enter after typing to submit the field or form.
Examples
# Type an email address into the email input
gsd-browser type "input[name=email]" "hello@example.com"

# Clear a pre-filled field and type a new value
gsd-browser type "#search" "gsd-browser docs" --clear-first

# Type slowly to trigger autocomplete, then submit
gsd-browser type "#city-input" "San Fra" --slowly --submit

gsd-browser fill-ref

Type text into an element identified by its snapshot ref.
gsd-browser fill-ref <ref> <text> [flags]
ref
string
required
A versioned ref string in @vN:eM format, as returned by gsd-browser snapshot.
text
string
required
The text to type into the element.
--clear-first
flag
Clear any existing value before typing.
--submit
flag
Press Enter after typing.
--slowly
flag
Type character-by-character instead of atomically filling the field.
Example
gsd-browser snapshot
gsd-browser fill-ref @v1:e1 "user@example.com"

gsd-browser press

Dispatch a keyboard event for a single key or a key combination. Use key names from the DOM KeyboardEvent.key spec, joined by + for modifiers.
gsd-browser press <key>
key
string
required
Key name or combination. Examples: Enter, Escape, Tab, ArrowDown, Meta+A, Control+C, Shift+Tab.
Examples
# Press Enter to submit
gsd-browser press Enter

# Select all text
gsd-browser press Meta+A

# Dismiss a modal with Escape
gsd-browser press Escape

# Move focus to the next form field
gsd-browser press Tab

gsd-browser hover

Move the mouse pointer over an element to trigger hover states, tooltips, or dropdown menus that only appear on mouse-over.
gsd-browser hover <selector>
selector
string
required
CSS selector of the element to hover over.
Example
# Reveal a dropdown menu
gsd-browser hover "#nav-products"
gsd-browser snapshot --mode navigation
# Now snapshot the revealed menu items

gsd-browser scroll

Scroll the page up or down. Use --direction to choose the direction and --amount to control how far.
gsd-browser scroll --direction <direction> [--amount <px>]
--direction
string
required
Scroll direction: up or down.
--amount
number
Number of pixels to scroll. Defaults to 300.
Examples
# Scroll the page down 300 px (default)
gsd-browser scroll --direction down

# Scroll the page up 500 px
gsd-browser scroll --direction up --amount 500

gsd-browser select-option

Select an option from a <select> dropdown element by matching its label text or value attribute.
gsd-browser select-option <selector> <option>
selector
string
required
CSS selector of the <select> element.
option
string
required
The option label (visible text) or value attribute to select.
Example
# Select "Canada" from a country dropdown
gsd-browser select-option "select[name=country]" "Canada"

# Select by value attribute
gsd-browser select-option "#plan-select" "pro"

gsd-browser set-checked

Set the checked state of a checkbox or radio button. Pass --checked to check the element; omit it to uncheck.
gsd-browser set-checked <selector> [--checked]
selector
string
required
CSS selector of the checkbox or radio <input> element.
--checked
flag
Set the element to the checked state. Omit this flag to uncheck the element.
Examples
# Check the "Accept terms" checkbox
gsd-browser set-checked "#accept-terms" --checked

# Uncheck a newsletter opt-in box
gsd-browser set-checked "input[name=newsletter]"

gsd-browser drag

Drag an element from a source to a target using either CSS selectors or explicit coordinates. The drag movement is interpolated across several steps to produce realistic pointer events.
gsd-browser drag <source> <target> [flags]
gsd-browser drag --from-x <n> --from-y <n> --to-x <n> --to-y <n> [flags]
source
string
CSS selector of the element to drag from.
target
string
CSS selector of the element to drop onto.
--from-x
number
Starting X coordinate in CSS pixels (coordinate-based mode).
--from-y
number
Starting Y coordinate in CSS pixels (coordinate-based mode).
--to-x
number
Ending X coordinate in CSS pixels (coordinate-based mode).
--to-y
number
Ending Y coordinate in CSS pixels (coordinate-based mode).
--steps
number
Number of interpolation steps between start and end positions. Higher values produce smoother motion. Defaults to 10.
--button
string
Mouse button held during the drag: left (default), right, or middle.
Examples
# Drag a card from one list column to another
gsd-browser drag ".card:first-child" ".column-done"

# Drag by coordinates for pixel-precise control
gsd-browser drag --from-x 100 --from-y 200 --to-x 400 --to-y 200

# Increase steps for smoother animation-sensitive drag
gsd-browser drag "#slider-thumb" "#slider-end" --steps 30

gsd-browser upload-file

Set one or more files on a <input type="file"> element. Pass local file paths as space-separated positional arguments.
gsd-browser upload-file <selector> <file> [<file> ...]
selector
string
required
CSS selector of the <input type="file"> element.
files
string[]
required
One or more local file paths to attach to the input.
Examples
# Upload a single file
gsd-browser upload-file "input[type=file]" /home/user/report.pdf

# Upload multiple files at once
gsd-browser upload-file "#file-picker" ./photo1.jpg ./photo2.jpg ./photo3.jpg

gsd-browser set-viewport

Resize the browser viewport using a named preset or exact pixel dimensions. Use this to test responsive layouts or simulate device screen sizes.
gsd-browser set-viewport [flags]
--preset
string
A named viewport preset:
PresetDimensions
mobile390 × 844
tablet768 × 1024
desktop1280 × 800
wide1920 × 1080
--width
number
Viewport width in pixels. Use with --height for custom dimensions.
--height
number
Viewport height in pixels. Use with --width for custom dimensions.
Examples
# Switch to a mobile viewport
gsd-browser set-viewport --preset mobile

# Set a custom resolution for a specific test
gsd-browser set-viewport --width 1440 --height 900

# Switch to wide desktop and take a screenshot
gsd-browser set-viewport --preset wide
gsd-browser screenshot --full-page --output wide-layout.png