Playwright MCP

Playwright MCP — Browser Automation Skill

Automate browser interactions for testing web apps, verifying UI changes, and debugging via the Playwright MCP server.

Tool Reference

Navigation

Inspection (Read-Only)

Interaction

Utilities

Core Workflow: Snapshot → Identify → Act

ALWAYS follow this pattern:

1. Navigate to the page
2. Snapshot to get the accessibility tree with element ref values
3. Identify the target element's ref from the snapshot
4. Act (click, type, etc.) using the ref
5. Verify with another snapshot or screenshot

browser_navigate → browser_snapshot → browser_click (using ref) → browser_snapshot

NEVER guess ref values. Always take a fresh snapshot first.

Best Practices

1. Prefer Snapshot Over Screenshot for Actions

browser_snapshot returns an accessibility tree with ref attributes you can use to interact with elements. browser_take_screenshot is visual-only — you can't extract ref values from it.

Use screenshots for:

• Visual verification (does the UI look right?)
• Saving evidence of test results
• Debugging layout issues

Use snapshots for:

• Finding elements to click/type/interact with
• Verifying text content on the page
• Checking element state (enabled/disabled)

2. Always Check Console Errors After Page Load

browser_navigate → browser_snapshot → browser_console_messages (level: "error")

This catches React crashes, API failures, and JavaScript errors immediately.

3. Wait for Dynamic Content

SPAs (React, Vue, etc.) render asynchronously. After navigation or clicks that trigger data loading:

browser_navigate → browser_wait_for (text: "expected content") → browser_snapshot

Or wait for loading indicators to disappear:

browser_click → browser_wait_for (textGone: "Loading...") → browser_snapshot

4. Form Filling Pattern

For forms with multiple fields, use browser_fill_form instead of individual browser_type calls:

{
  "fields": [
    {"ref": "input_name_ref", "value": "John Doe"},
    {"ref": "input_email_ref", "value": "john@example.com"},
    {"ref": "input_date_ref", "value": "2025-12-31"}
  ]
}

5. Handle Authentication Flows

For OAuth or login pages:

1. Navigate to the app URL
2. If redirected to login, snapshot to find form fields
3. Fill credentials and submit
4. Wait for redirect back to app
5. Snapshot to verify authenticated state

6. Full-Page Screenshots for Long Pages

{
  "fullPage": true,
  "filename": "full-page-capture.png"
}

7. Element-Specific Screenshots

First snapshot to get the ref, then:

{
  "element": "the data table",
  "ref": "table_ref_from_snapshot",
  "filename": "table-only.png"
}

Common Testing Workflows

Test a Deployed Web App

1. browser_navigate (url: "https://your-app.databricks.app")
2. browser_snapshot
3. browser_console_messages (level: "error")
4. browser_take_screenshot (filename: "initial-load.png")
5. [interact with the app]
6. browser_console_messages (level: "error")  ← check again after interactions

Test a Local Dev Server

1. browser_navigate (url: "http://localhost:3000")
2. browser_wait_for (text: "some expected content")
3. browser_snapshot
4. [test interactions]

Debug a Blank/Crashing Page

1. browser_navigate (url: "...")
2. browser_console_messages (level: "error")  ← check for JS errors
3. browser_network_requests                   ← check for failed API calls
4. browser_take_screenshot                    ← see what's actually rendered

Multi-Tab Testing

1. browser_tabs (action: "create")
2. browser_navigate (url: "second-page")
3. [test in second tab]
4. browser_tabs (action: "select", index: 0)  ← switch back to first tab

Troubleshooting