majiayu000 Browser Automation Guide
Interactive browser control using claude-in-chrome MCP extension.
Purpose
Enable interactive browser automation for:
- Demo recordings and GIF documentation
- Manual testing with live browser feedback
- Form filling and real-time interaction
- Screenshot capture for visual verification
- Web data extraction from current browser
When to Use This Skill
| Use Case | This Skill | webapp-testing (official) |
|---|---|---|
| GIF recording / demos | [Best] | [Not supported] |
| Manual testing / verification | [Best] | [OK] |
| CI/CD automated testing | [OK] | [Best] |
| Testing with server lifecycle | [Not supported] | [Best] with_server.py |
| Using existing Chrome session | [Supported] | [Not supported] |
Quick decision: "Show & verify" → this skill, "Automate & run" → webapp-testing
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
read_pagewithfilter: "interactive"to find inputs- Identify input
ref_id(e.g.,ref_1,ref_2) form_inputwith 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
- Start recording
- Take screenshot (initial frame)
- Perform actions
- Take screenshot (final frame)
- Stop recording
- 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_planfor 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
webapp-testing(official) - Playwright E2E automated testing (CI/CD optimized)utilizing-cli-tools- CLI tools guidegenerating-tdd-tests- Test design
Used by Commands
/e2e- E2E test + documentation generation/test- E2E test execution (includes browser testing)
See Also
/example-skills:webapp-testing- Official skill (Playwright + with_server.py)