Browser Automation Guide

Comprehensive guide for browser automation using claude-in-chrome MCP.

Purpose

Enable effective browser automation for:

• E2E testing workflows
• Screenshot capture and analysis
• Form filling and interaction
• GIF recording for documentation
• Web data extraction

Getting Started

1. Tab Context Required

Always start with:

mcp__claude-in-chrome__tabs_context_mcp

This provides available tab IDs for subsequent operations.

2. Create or Reuse Tab

# Create new tab
mcp__claude-in-chrome__tabs_create_mcp

# Or use existing tab from context

3. Navigation

mcp__claude-in-chrome__navigate
  url: "https://example.com"
  tabId: {obtained from tabs_context_mcp}

Core Tools

Tool	Purpose
tabs_context_mcp	Get available tabs
tabs_create_mcp	Create new tab
navigate	Go to URL
read_page	Get page structure
find	Natural language element search
form_input	Fill form fields
computer	Mouse/keyboard actions
get_page_text	Extract text content
gif_creator	Record interactions

Reading Page Content

Tool	Use Case
read_page	Get accessibility tree (DOM structure)
read_page with filter: "interactive"	Buttons, links, inputs only
find	Natural language element search
get_page_text	Extract article/main text

Example: Read Interactive Elements

mcp__claude-in-chrome__read_page
  tabId: 123
  filter: "interactive"

Common Patterns

Form Filling

1. read_page with filter: "interactive" to find inputs
2. Identify input ref_id (e.g., ref_1, ref_2)
3. form_input with ref and value

mcp__claude-in-chrome__form_input
  tabId: 123
  ref: "ref_5"
  value: "user@example.com"

Click Actions

mcp__claude-in-chrome__computer
  tabId: 123
  action: "left_click"
  ref: "ref_10"  # Or coordinate: [100, 200]

Screenshot Capture

mcp__claude-in-chrome__computer
  tabId: 123
  action: "screenshot"

GIF Recording

1. Start recording
2. Take screenshot (initial frame)
3. Perform actions
4. Take screenshot (final frame)
5. Stop recording
6. Export

# Start
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "start_recording"

# ... perform actions with screenshots ...

# Stop
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "stop_recording"

# Export
mcp__claude-in-chrome__gif_creator
  tabId: 123
  action: "export"
  download: true
  filename: "workflow-demo.gif"

Detailed References

Reference	Purpose
@./references/claude-in-chrome-tools.md	Complete tool documentation
@./references/common-patterns.md	Reusable workflow patterns
@./references/e2e-testing.md	E2E testing methodology

Security Notes

• Always use update_plan for multi-domain operations
• Sensitive data handling requires user confirmation
• Never auto-submit forms with financial information
• Be aware of bot detection systems (CAPTCHA)

References

Related Skills

• utilizing-cli-tools - CLI tools guide
• generating-tdd-tests - Test design

Used by Commands

• /workflow:create - Browser workflow creation
• /test - E2E test execution (includes browser testing)