Browser Use

Browser Use Skill

Browser automation for UI testing, visual verification, and workflow testing. This skill routes to the optimal browser tool based on your specific needs.

Available Browser Tools

Quick Decision

┌─────────────────────────────────────────────────────────────────┐
│                    WHICH BROWSER TOOL?                          │
│                                                                 │
│  Running structured test suite with assertions?                 │
│      YES ──► Playwright Test (npx playwright test)              │
│      NO  ──► Continue below                                     │
│                                                                 │
│  Need user's logged-in session?                                 │
│      YES ──► Claude in Chrome                                   │
│      NO  ──► Either MCP tool works                              │
│                                                                 │
│  Creating a GIF/recording?                                      │
│      YES ──► Claude in Chrome (has gif_creator)                 │
│      NO  ──► Either MCP tool works                              │
│                                                                 │
│  Monitoring network requests?                                   │
│      YES ──► Claude in Chrome (read_network_requests)           │
│      NO  ──► Either MCP tool works                              │
│                                                                 │
│  Need clean/isolated test state?                                │
│      YES ──► Browser MCP                                        │
│      NO  ──► Either MCP tool works                              │
│                                                                 │
│  Quick smoke test, simple interaction?                          │
│      YES ──► Browser MCP (simpler API)                          │
│      NO  ──► Claude in Chrome (more features)                   │
│                                                                 │
│  DEFAULT for interactive: Claude in Chrome (most capabilities)  │
│  DEFAULT for test suites: Playwright Test (assertions/reports)  │
└─────────────────────────────────────────────────────────────────┘

Decision Matrix

Claude in Chrome

Use when you need:

• User's authenticated session (already logged in)
• GIF recording for documentation
• Network request monitoring
• JavaScript execution in page context
• Multi-tab coordination
• Real-time user observation

Setup: Call tabs_context_mcp first to get available tabs.

Key tools:

mcp__claude-in-chrome__tabs_context_mcp    # Get tab context (call FIRST)
mcp__claude-in-chrome__tabs_create_mcp     # Create new tab
mcp__claude-in-chrome__navigate            # Go to URL
mcp__claude-in-chrome__computer            # Click, type, screenshot, scroll
mcp__claude-in-chrome__read_page           # Get accessibility tree
mcp__claude-in-chrome__find                # Natural language element search
mcp__claude-in-chrome__form_input          # Fill form fields
mcp__claude-in-chrome__javascript_tool     # Execute JS in page
mcp__claude-in-chrome__read_network_requests  # Monitor API calls
mcp__claude-in-chrome__read_console_messages  # Get console output
mcp__claude-in-chrome__gif_creator         # Record GIF

See reference/claude-in-chrome.md for complete documentation.

Browser MCP

Use when you need:

• Clean/isolated test environment
• Simple navigation and interaction
• Accessibility snapshots
• When Claude in Chrome isn't available

Key tools:

mcp__browsermcp__browser_navigate          # Go to URL
mcp__browsermcp__browser_snapshot          # Get accessibility tree
mcp__browsermcp__browser_screenshot        # Capture page
mcp__browsermcp__browser_click             # Click element
mcp__browsermcp__browser_type              # Type text
mcp__browsermcp__browser_hover             # Hover element
mcp__browsermcp__browser_select_option     # Select dropdown
mcp__browsermcp__browser_press_key         # Press key
mcp__browsermcp__browser_wait              # Wait
mcp__browsermcp__browser_get_console_logs  # Get console

See reference/browser-mcp.md for complete documentation.

Playwright Test

Use when you need:

• Structured test suites with assertions
• CI/CD integration with reports
• Regression testing (repeatable, deterministic)
• Parallel test execution
• Test retries and flaky test handling

Key commands:

# Run all tests
npx playwright test

# Run specific test file
npx playwright test tests/e2e/auth.spec.ts

# Run tests with UI mode (interactive debugging)
npx playwright test --ui

# Run tests in headed mode (see the browser)
npx playwright test --headed

# Generate test report
npx playwright show-report

Test file structure:

// tests/e2e/example.spec.ts
import { test, expect } from '@playwright/test';

test('user can log in', async ({ page }) => {
  await page.goto('http://localhost:3001/login');
  await page.fill('[name="email"]', 'test@example.com');
  await page.fill('[name="password"]', 'password');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('/dashboard');
});

See reference/playwright-test.md for complete documentation.

Common Patterns

Verify UI Change (Quick)

1. Browser MCP: browser_navigate to localhost:3001/[page]
2. Browser MCP: browser_screenshot
3. Browser MCP: browser_get_console_logs

Verify UI Change (Authenticated)

1. Claude in Chrome: tabs_context_mcp (get tab context)
2. Claude in Chrome: navigate to page
3. Claude in Chrome: computer action=screenshot
4. Claude in Chrome: read_console_messages

Test Form Submission

1. Navigate to form page
2. Get element refs (snapshot or read_page)
3. Fill fields (type or form_input)
4. Submit
5. Check console for errors
6. Screenshot result

Create Demo GIF

1. Claude in Chrome: tabs_context_mcp
2. Claude in Chrome: gif_creator action=start_recording
3. Claude in Chrome: computer action=screenshot (initial frame)
4. Perform demo steps (navigate, click, etc.)
5. Claude in Chrome: computer action=screenshot (final frame)
6. Claude in Chrome: gif_creator action=stop_recording
7. Claude in Chrome: gif_creator action=export download=true

Monitor Network Requests

1. Claude in Chrome: tabs_context_mcp
2. Claude in Chrome: navigate to page
3. Perform actions that trigger API calls
4. Claude in Chrome: read_network_requests urlPattern="/api/"

Best Practices

1. Start with context: Claude in Chrome requires tabs_context_mcp first
2. Get refs before interacting: Use snapshot/read_page to get element references
3. Check console after actions: Both tools support console access
4. Screenshot for evidence: Capture visual state at key points
5. Use patterns for filtering: Console and network tools support pattern filtering

Troubleshooting

Claude in Chrome not responding

• Check extension is installed and enabled
• Try tabs_context_mcp to reset state
• User may need to dismiss browser dialogs manually

Element not found

• Take fresh snapshot/read_page
• Wait for page to load (browser_wait or computer action=wait)
• Check if element is in different tab or iframe

Authentication needed

• Use Claude in Chrome to leverage user's logged-in session
• Or manually log in via Browser MCP before testing

Integration

This skill is used by:

• Test Agent for comprehensive testing
• Any agent for quick visual verification
• test-from-docs Phase 4 (Browser Verification)