Playwright MCP Browser Automation

Comprehensive browser automation using the Playwright MCP server integration.

Setup

Installation

npx @anthropic-ai/claude-code@latest mcp add playwright -- npx @playwright/mcp@latest

Configuration Options

| Option | Description | Example | |--------|-------------|---------| | --browser | Browser to use | chrome, firefox, webkit, msedge | | --headless | Run without UI | --headless (default) or --no-headless | | --device | Emulate device | --device="iPhone 15" | | --viewport | Set viewport size | --viewport="1920x1080" | | --caps | Enable capabilities | --caps=vision,pdf,testing,tracing |

Core Tools

Navigation

| Tool | Purpose | |------|---------| | browser_navigate | Navigate to URL | | browser_navigate_back | Go back in history | | browser_tabs | Manage tabs (list/new/close/select) | | browser_close | Close page/browser | | browser_resize | Resize window |

Interaction

| Tool | Purpose | |------|---------| | browser_click | Click element | | browser_type | Type into input | | browser_fill_form | Fill multiple form fields | | browser_select_option | Select dropdown option | | browser_hover | Hover over element | | browser_drag | Drag and drop | | browser_press_key | Press keyboard key | | browser_file_upload | Upload files | | browser_handle_dialog | Handle JS dialogs |

Information Retrieval

| Tool | Purpose | |------|---------| | browser_snapshot | Get page accessibility tree (preferred) | | browser_take_screenshot | Capture visual screenshot | | browser_console_messages | Get console logs | | browser_network_requests | Get network requests |

Utilities

| Tool | Purpose | |------|---------| | browser_wait_for | Wait for conditions | | browser_evaluate | Execute JavaScript | | browser_run_code | Run Playwright code | | browser_install | Install browser |

Common Patterns

Web Scraping

1. browser_navigate to target URL
2. browser_wait_for content to load
3. browser_snapshot to get page structure
4. browser_evaluate to extract data
5. Repeat for pagination if needed

Form Automation

1. browser_navigate to form page
2. browser_snapshot to find form fields
3. browser_fill_form with all field data
4. browser_click submit button
5. browser_wait_for success indicator

Authentication Flow

1. browser_navigate to login page
2. browser_snapshot to identify fields
3. browser_type username into email field
4. browser_type password into password field
5. browser_click login button
6. browser_wait_for dashboard content

Screenshot Capture

1. browser_navigate to target page
2. browser_wait_for content to load
3. browser_take_screenshot with options:
   - fullPage: true for entire page
   - element/ref for specific element

Element References

Elements are identified using accessibility tree references from browser_snapshot:

- link[Home] - Link with text "Home"
- button[Submit] - Button labeled "Submit"
- textbox[Email] - Input field labeled "Email"
- combobox[Country] - Dropdown for Country

Optional Capabilities

Vision (--caps=vision)

• browser_mouse_click_xy - Click at coordinates
• browser_mouse_drag_xy - Drag between coordinates
• browser_mouse_move_xy - Move mouse

PDF (--caps=pdf)

• browser_pdf_save - Save page as PDF

Testing (--caps=testing)

• browser_generate_locator - Generate Playwright locator
• browser_verify_element_visible - Verify element visibility
• browser_verify_text_visible - Verify text on page
• browser_verify_value - Verify element value

Tracing (--caps=tracing)

• browser_start_tracing - Start recording trace
• browser_stop_tracing - Stop and save trace

Best Practices

1. Always use browser_snapshot first - Understand page structure before interacting
2. Wait for content - Use browser_wait_for before interactions
3. Handle dynamic content - Re-snapshot after page changes
4. Use accessibility references - More reliable than coordinates
5. Handle dialogs promptly - They block other actions
6. Close browser when done - Free up resources

Troubleshooting

| Issue | Solution | |-------|----------| | Browser not installed | Use browser_install tool | | Element not found | Take fresh browser_snapshot | | Timeout errors | Use browser_wait_for with longer time | | Dialog blocking | Use browser_handle_dialog | | Stale element | Re-snapshot after page changes |

When to Use This Skill

• Automating browser interactions
• Web scraping dynamic content
• E2E testing workflows
• Generating PDFs from web pages
• Taking screenshots
• Form filling and submission
• Multi-page workflows