majiayu000 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 coordinatesbrowser_mouse_drag_xy- Drag between coordinatesbrowser_mouse_move_xy- Move mouse
PDF (--caps=pdf)
browser_pdf_save- Save page as PDF
Testing (--caps=testing)
browser_generate_locator- Generate Playwright locatorbrowser_verify_element_visible- Verify element visibilitybrowser_verify_text_visible- Verify text on pagebrowser_verify_value- Verify element value
Tracing (--caps=tracing)
browser_start_tracing- Start recording tracebrowser_stop_tracing- Stop and save trace
Best Practices
- Always use browser_snapshot first - Understand page structure before interacting
- Wait for content - Use browser_wait_for before interactions
- Handle dynamic content - Re-snapshot after page changes
- Use accessibility references - More reliable than coordinates
- Handle dialogs promptly - They block other actions
- 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