tomevault-io Argument: $ARGUMENTS
| Command | Behavior |
|---|---|
{url} |
Navigate to URL, capture screenshot + ARIA snapshot |
explore |
Interactive exploration — navigate, inspect, understand UI |
verify {description} |
Verify specific UI behavior or state |
extract {description} |
Extract data from frontend |
electron {app} |
Automate Electron/VS Code desktop app |
Web Mode (default)
Navigate & Capture
agent-browser open {url}
agent-browser wait 3000
agent-browser snapshot -i
agent-browser screenshot .otto/screenshots/page.png
Interact
# Click by ref from snapshot
agent-browser click @e5
# Fill input
agent-browser fill @e3 "user@example.com"
# Press keys
agent-browser press Enter
# Re-snapshot after interaction
agent-browser snapshot -i
Workflow Loop
- Snapshot to discover elements
- Interact using refs (@e1, @e2...)
- Re-snapshot after navigation or state changes
- Refs are invalidated on page changes — always re-snapshot
Electron Mode
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, etc.) via Chrome DevTools Protocol.
Launch with CDP
The app must be launched with --remote-debugging-port:
# VS Code
open -a "Visual Studio Code" --args --remote-debugging-port=9333
# VS Code with extension development
code --extensionDevelopmentPath=./ --disable-extensions \
--remote-debugging-port=9333 --skip-release-notes .
# Generic Electron app
open -a "AppName" --args --remote-debugging-port=9333
# Linux
code --remote-debugging-port=9333
Important: Quit the app first if already running. The flag must be present at launch.
Connect & Interact
# Wait for app startup
sleep 5
# Connect
agent-browser connect 9333
# Standard snapshot-interact workflow
agent-browser snapshot -i
agent-browser click @e5
agent-browser screenshot .otto/screenshots/electron.png
Webview Support
Electron apps embed webviews as separate targets. Use tab management:
# List all targets (windows + webviews)
agent-browser tab
# Output:
# 0: [page] VS Code - main window
# 1: [webview] Chat Panel content
# 2: [webview] Settings editor
# Switch to webview
agent-browser tab 1
agent-browser snapshot -i
agent-browser screenshot .otto/screenshots/webview.png
VS Code Extension Verification Pattern
# 1. Build the extension
npm run compile
# 2. Launch VS Code with extension
code --extensionDevelopmentPath=./ --disable-extensions \
--remote-debugging-port=9333 --skip-release-notes . &
APP_PID=$!
sleep 8
# 3. Connect
agent-browser connect 9333
# 4. Check main window
agent-browser snapshot -i
# 5. Check webviews (if extension has webview panels)
agent-browser tab
agent-browser tab 1
agent-browser snapshot -i
agent-browser screenshot .otto/screenshots/extension.png
# 6. Cleanup
agent-browser close
kill $APP_PID
Diffing (Verify Changes)
# Snapshot diff — see what changed after an action
agent-browser snapshot -i
agent-browser click @e2
agent-browser diff snapshot
# Screenshot diff — visual regression
agent-browser screenshot baseline.png
# ... make changes ...
agent-browser diff screenshot --baseline baseline.png
Cleanup
agent-browser close
rm -rf .otto/screenshots
ARIA Snapshot Format
- banner:
- link "Home" [ref=e1]
- main:
- heading "Welcome" [ref=e2]
- form:
- textbox "Email" [ref=e3]
- button "Submit" [disabled] [ref=e4]
Use @eN values (e.g., @e3) with interaction commands.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.