Agent skill
automating-browser
Interactive browser automation using claude-in-chrome MCP tools. Best for: demos, documentation GIFs, manual testing, live browser control. For automated E2E testing in CI/CD, use webapp-testing skill instead. Triggers: browser automation, ブラウザ自動化, screenshot, スクリーンショット, form fill, フォーム入力, click, navigate, GIF recording, GIF録画, ブラウザ操作, Chrome, demo, デモ, live browser.
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/testing/automating-browser-thkt-claude-config
SKILL.md
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:
text
mcp__claude-in-chrome__tabs_context_mcp
This provides available tab IDs for subsequent operations.
2. Create or Reuse Tab
markdown
# Create new tab
mcp**claude-in-chrome**tabs_create_mcp
# Or use existing tab from context
3. Navigation
text
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
text
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
text
mcp__claude-in-chrome__form_input
tabId: 123
ref: "ref_5"
value: "user@example.com"
Click Actions
text
mcp__claude-in-chrome__computer
tabId: 123
action: "left_click"
ref: "ref_10" # Or coordinate: [100, 200]
Screenshot Capture
text
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
markdown
# 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)
Didn't find tool you were looking for?