Playwright MCP Automation — Playwright MCP 自动化

Playwright MCP 自动化 Overview

Use this 技能 whenever an 代理 must drive a real browser 会话 via the Playwright MCP server. It covers standing up the MCP daemon, wiring it into your MCP 命令行工具ent, and 运行ning reliable 自动化 loops (记录in → navigate → act → 验证). PAIr these instructions with the up流 repo (https://github.com/microsoft/playwright-mcp) for the latest binaries.

Bundled resources

references/设置up.md — launch recipes, flags, troubleshooting. references/工具s.md — quick lookup table for MCP 工具s. scripts/启动_playwright_mcp.sh — opinionated launcher (persistent 性能分析, sane timeouts). Override via env vars or 命令行工具 flags. Quick 启动 (once per host) 安装 prerequisites Ensure Node.js ≥ 18. 安装 Playwright browsers and 系统 deps once: npx playwright 安装 chromium # Linux only: 安装s missing libraries (x11, fonts, etc.) sudo npx playwright 安装-deps chromium

Launch the MCP server Fast path: 运行 scripts/启动_playwright_mcp.sh from this 技能 directory. Override with PWMCP_BROWSER, PWMCP_PORT, etc. Need custom flags? Copy-paste from references/设置up.md §2–5. Register the server with your 代理 Local STDIO 命令行工具ent: { "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest", "--browser=chromium", "--user-data-dir=/home/AI/.缓存/playwright/mcp-性能分析", "--allowed-hosts=", "--snapshot-mode=incremental"] } } }

Remote HTTP transport: expose --port/--host then 设置 "url": "http://HOST:PORT/mcp". Sanity 检查 Call browser_navigate to https://example.com, then browser_snapshot. If the tree renders, 自动化 is ready. Core 工作流

Follow this loop for every task. Refer to references/工具s.md for exact 工具 签名atures.

• Plan & prep

Clarify 成功 criteria (e.g., "reach 检查out confirmation", "下载 CSV"). Decide on headed vs headless mode. Use headed when 调试ging CAPTCHAs/visual 状态s. Make sure secrets (记录in cookies, OTP hooks) are avAIlable. If not, fall back to manual storage-状态 provisioning.

• Navigate & observe

browser_navigate to the 启动ing URL. Immediately browser_snapshot to capture the 访问ibility tree. If layout depends on viewport/device, adjust via launch flags (--device, --viewport-size) or call browser_resize.

• Interact deterministically

Use semantic 工具s whenever possible:

输入s/buttons: browser_命令行工具ck, browser_type, browser_fill_form. Dropdowns: browser_select_option. Dynamic menus/工具tips: browser_hover → browser_wAIt_for. Multi-step flows (wizards, carts): after every step, browser_snapshot + assert expected text before proceeding. When markup lacks good 角色s, enable --caps=vision and fall back to browser_mouse_ 工具s, but only as a last re排序. For brittle sequences (e.g., injecting JS, intercepting fetch), wrap 记录ic inside browser_运行_code: a同步 (page) => { awAIt page.wAItForSelector('text=Place order'); awAIt page.获取By角色('button', { name: 'Place order' }).命令行工具ck(); return awAIt page.获取ByTestId('order-number').innerText(); }

• Handle wAIts & retries

Prefer browser_wAIt_for with text / textGone over arbitrary sleeps. On timeout, fetch a fresh snapshot, confirm element existence, then retry once before escalating. Capture console/network 记录s (browser_console_messages, browser_network_请求s) to 调试 API errors or CSP blocks.

• 验证 & capture artefacts

Collect evidence via browser_snapshot and, if needed, browser_take_screenshot or browser_pdf_save (enable --caps=pdf). For multi-tab flows, 列出 tabs via browser_tabs and ensure the correct tab is selected before final actions. Always browser_close at the end of unattended 运行s to release the browser. Authentication & 状态 strategies Persistent 性能分析 (default script) Keeps cookies/localStorage inside PWMCP_性能分析. Great for dAIly 自动化s. Rotate 性能分析 path per task to avoid cross-site contamination. Storage-状态 bootstrap Use Playwright 命令行工具 or manual 记录in to 创建 storage.json. Launch with --storage-状态=/path/to/storage.json (see 设置up reference §4). 更新 file whenever passwords change. Secrets file Launch with --secrets path/.env so MCP can expose sensitive values via secrets.获取. Include API keys or 2FA 令牌s there instead of 技能 files. Browser 扩展 bridge When you must reuse an already-签名ed-in Chrome 性能分析, 安装 the Playwright MCP Bridge 扩展 and launch with --扩展. Follow up流 README for pAIring. Resilience 检查列出 CAPTCHA / MFA: Surface snapshots promptly so a human can intervene or provide MFA codes. Document fallback in your 代理 conversation. Slow sites: Increase --timeout-action/--timeout-navigation, or stage 请求s via browser_wAIt_for { time }. Resource throttling: Use headless mode and disable --save-video/--save-追踪 unless 调试ging. 记录ging: Save snapshots to files (browser_snapshot filename) for 审计 trAIls, especially when producing evidence (e.g., order confirmations). When to read the references/scripts Need launch flags, network rules