Browser Use

Interact with live web pages using browser automation. Use this skill when you need to:

• Navigate to URLs and interact with dynamic web content
• Fill out forms, click buttons, and follow links programmatically
• Scrape content from JavaScript-rendered pages (SPAs, dashboards)
• Run end-to-end UI tests against local or staging environments
• Research live web pages and synthesize their content
• Take screenshots for visual verification or debugging

Prerequisites

Install the browser-use Python package and Playwright:

pip install browser-use playwright
playwright install chromium

Or use the browser-use CLI skill:

npx skills add browser-use/claude-skill

Core Patterns

Navigate and extract

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto('https://example.com')
    page.wait_for_load_state('networkidle')  # Wait for JS
    content = page.content()
    browser.close()

Click and interact

page.locator('button[type="submit"]').click()
page.fill('input[name="email"]', 'user@example.com')
page.select_option('select#country', 'US')

Screenshot for verification

page.screenshot(path='/tmp/screenshot.png', full_page=True)

Handle authentication

page.goto('https://app.example.com/login')
page.fill('#email', 'user@example.com')
page.fill('#password', 'secret')
page.locator('button[type="submit"]').click()
page.wait_for_url('**/dashboard')

Decision Tree

Task requires web interaction?
    ├─ Static HTML → Read file directly; skip browser
    └─ Dynamic webapp / live URL
        ├─ Server not running → Start server first
        └─ Server running →
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

End-to-End Test Workflow

User: "Verify the signup flow on staging works end-to-end"

Steps:
1. Open https://staging.yourapp.com/signup
2. Fill in test credentials
3. Click "Create account"
4. Wait for redirect to dashboard
5. Screenshot the result
6. Report: success or describe any failures found

Security Rules

• Never submit real credentials or payment details in automated tests
• Use test accounts and sandbox environments only
• Confirm with the user before automating any write/purchase action
• Prefer --dry-run or review steps when destructive actions are involved

Common Pitfalls

• ❌ Don't inspect DOM before wait_for_load_state('networkidle') on SPAs
• ✅ Always wait for JavaScript to finish before reading dynamic content
• ❌ Don't hardcode selectors that change between deploys
• ✅ Use stable selectors: text=, role=, data attributes, or IDs

Tips

• Use page.pause() during development to inspect the live browser state
• Use page.locator('.selector').all() to discover all matching elements
• Chain page.wait_for_selector() before interacting with async-rendered elements
• For multi-page flows, keep one browser context open throughout the session