using-playwrightlisted

# Using Playwright ## What this is Playwright MCP drives a real browser. You can navigate, click, type, observe console/network, and snapshot the DOM. It's how you **verify a UI change actually works** — not just compiles — and how you scrape dynamic content that static HTTP can't see. ## When to use - Verifying a UI change: load the page, check a button renders/clicks, confirm console is clean - Reproducing a frontend bug locally before/after a fix - Scraping data from sites where content is JS-rendered (SPA, dynamic React/Vue/Svelte) - End-to-end testing of a web flow (login → action → result) - Capturing screenshots when the user asks to see the app ## When NOT to use - Static HTML scraping where a `WebFetch` would work — Playwright is heavier - The user didn't ask for UI verification and isn't expecting browser automation - You need to test backend APIs only (use HTTP clients/curl/Invoke-RestMethod) - Quick info lookups (`WebSearch`/`WebFetch` are cheaper) - Tests that should be permanent — write actual Playwright test files instead of using MCP ad-hoc ## Core tools | Tool | Purpose | |---|---| | `mcp__playwright__browser_navigate` | Load a URL | | `mcp__playwright__browser_snapshot` | Accessibility tree — **prefer this over screenshot for navigation** | | `mcp__playwright__browser_click` | Click by element `ref` from snapshot | | `mcp__playwright__browser_type` | Type into an element by `ref` | | `mcp__playwright__browser_fill_form` | Fill multiple form fields at