browser-agent

Browser Agent

Control Chrome via DevTools Protocol using the use_browser MCP tool.

Loading

ToolSearch: select:mcp__plugin_superpowers-chrome_chrome__use_browser

Tool Parameters

• action (required): Operation to perform
• tab_index (optional): Tab to operate on (default: 0)
• selector (optional): CSS selector for element operations
• payload (optional): Action-specific data
• timeout (optional): Timeout in ms (default: 5000)

Actions Quick Reference

Category	Action	Key Params
Navigate	navigate	payload: URL
Wait	await_element	selector, timeout
Wait	await_text	payload: text string
Click	click	selector
Type	type	selector, payload (append \n to submit)
Select	select	selector, payload: option value
Extract	extract	payload: 'markdown'|'text'|'html', selector (opt)
Attribute	attr	selector, payload: attribute name
JS	eval	payload: JavaScript code
Screenshot	screenshot	payload: file path
Tabs	list_tabs, new_tab, close_tab	tab_index
Mode	show_browser, hide_browser, browser_mode	--
Profile	set_profile, get_profile	payload: profile name

Critical Patterns

Always Wait Before Interacting

{"action": "navigate", "payload": "https://example.com"}
{"action": "await_element", "selector": "button.submit"}
{"action": "click", "selector": "button.submit"}

Form Fill and Submit

{"action": "type", "selector": "input[name=email]", "payload": "[email protected]"}
{"action": "type", "selector": "input[name=password]", "payload": "pass123\n"}
{"action": "await_text", "payload": "Welcome"}

Reconnaissance-Then-Action

1. Navigate and wait for load
2. {"action": "extract", "payload": "html"} to inspect rendered DOM
3. Identify correct selectors from output
4. Execute actions with discovered selectors

Visual Verification (Desktop + Mobile)

{"action": "navigate", "payload": "https://myapp.com"}
{"action": "await_element", "selector": "main"}
{"action": "screenshot", "payload": "/tmp/desktop.png"}
{"action": "eval", "payload": "window.innerWidth = 375; window.innerHeight = 812;"}
{"action": "screenshot", "payload": "/tmp/mobile.png"}

OAuth / Email Verification

1. Fill signup form, submit
2. {"action": "new_tab"} then navigate to email provider
3. Find verification email, click link
4. {"action": "await_text", "payload": "verified"}

Multi-Tab

{"action": "list_tabs"}
{"action": "extract", "tab_index": 1, "payload": "text", "selector": ".content"}

Gotchas

• Headless by default -- screenshots work fine, no need to switch
• show_browser/hide_browser restarts Chrome -- loses POST state, JS state; tabs reload via GET
• Use specific selectors -- button[type=submit] not button
• JS returns -- wrap complex objects in JSON.stringify() to avoid [object Object]
• Profile persists -- cookies/auth survive mode toggles and restarts
• Slow pages -- increase timeout: {"timeout": 30000}
• Submit with \n -- append \n to payload to submit forms: "password\n"

When to Use This vs Playwright

This (use_browser MCP)	Playwright (webapp-testing skill)
Authenticated sessions	Fresh browser instances
Quick interactions	Full E2E test suites
Existing browser tabs	PDF generation pipelines
Simple form fills	Complex multi-step tests