Agent skill

browser-use

Browser automation for UI testing, screenshots, and workflow verification. Routes to optimal tool based on context.

View SKILL.md on GitHub Repository
Stars 163
Forks 31

Install this agent skill to your Project

npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/other/other/browser-use-rustylindquist-enhancedhr

SKILL.md

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

Tool Type Best For
Claude in Chrome MCP (mcp__claude-in-chrome__*) Authenticated flows, GIF recording, live debugging, network monitoring
Browser MCP MCP (mcp__browsermcp__*) Interactive isolated testing, simple interactions, accessibility snapshots
Playwright Test CLI (npx playwright test) Structured test suites, assertions, CI/CD, regression testing

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

Scenario Recommended Why
Test suites with assertions Playwright Test Built for structured testing
CI/CD integration Playwright Test Reports, parallelization, retries
Regression test suite Playwright Test Repeatable, deterministic
Test authenticated flow Claude in Chrome Uses user's logged-in session
Create demo/documentation GIF Claude in Chrome Has gif_creator tool
Debug live issue with user Claude in Chrome See exactly what user sees
Monitor API/network calls Claude in Chrome read_network_requests
Execute JavaScript in page Claude in Chrome javascript_tool
Multi-tab workflow Claude in Chrome Tab management
Quick isolated smoke test Browser MCP Clean state, simpler API
Accessibility tree inspection Browser MCP browser_snapshot
Simple form fill + submit Either MCP Both capable
Console error checking Either MCP Both have console access

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:

bash
# 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:

typescript
// 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"]', '[email protected]');
  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)

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-spec

Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-testing

Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.

163 31
Explore
majiayu000/claude-skill-registry

agent-ops-state

Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.

163 31
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results