playwright-mcp

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Playwright MCP (Microsoft Browser Automation & Live DOM Interaction)

Playwright MCP（Microsoft 浏览器自动化与实时 DOM 交互）

Based on microsoft/playwright-mcp: official Microsoft Playwright Model Context Protocol (MCP) server providing structured browser automation through accessibility snapshots, bypassing the need for heavy screenshot parsing or vision-only models.

基于 microsoft/playwright-mcp：官方的 Microsoft Playwright Model Context Protocol (MCP) 服务器，通过可访问性快照提供结构化浏览器自动化，无需依赖大量截图解析或纯视觉模型。

🎯 When to Use

🎯 使用场景

Interactive Browser Automation: Navigating web pages, clicking buttons, selecting options, typing into inputs, and submitting forms.
Accessibility Snapshot Navigation: Inspecting web interfaces via structured ARIA/accessibility trees, drastically saving token context compared to full HTML dumps.
End-to-End (E2E) Test Execution: Validating authentication flows, checkout flows, and user journey funnels.
Screenshot & Console Capture: Taking targeted viewport screenshots and intercepting browser console logs for live debugging.

交互式浏览器自动化： 浏览网页、点击按钮、选择选项、向输入框中输入内容以及提交表单。
可访问性快照导航： 通过结构化的 ARIA/可访问性树检查 Web 界面，与输出完整 HTML 相比可大幅节省 Token 上下文。
端到端（E2E）测试执行： 验证身份验证流程、结账流程和用户旅程漏斗。
截图与控制台捕获： 截取指定视口或元素的屏幕截图，并拦截浏览器控制台日志以进行实时调试。

🚀 Setup & Registration

🚀 设置与注册

MCP Configuration

MCP 配置

.mcp.json

or IDE settings):

json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

在 Agent 的配置（

.mcp.json

或 IDE 设置）中注册 Microsoft Playwright MCP：

json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

🛠️ Key Capabilities & Tools

🛠️ 核心能力与工具

```
browser_navigate
```
: Navigates to any target URL and returns the parsed accessibility tree.
```
browser_click
```
: Clicks an element identified by its accessibility reference ID.
```
browser_type
```
: Types text into specified form inputs or content-editable elements.
```
browser_screenshot
```
: Captures full-page or element-specific screenshots.
```
browser_evaluate
```
: Evaluates custom JavaScript in the browser execution context.

```
browser_navigate
```
：导航至任意目标 URL，并返回解析后的可访问性树。
```
browser_click
```
：点击通过可访问性引用 ID 标识的元素。
```
browser_type
```
：向指定的表单输入框或 contenteditable 元素输入文本。
```
browser_screenshot
```
：捕获整页或指定元素的屏幕截图。
```
browser_evaluate
```
：在浏览器执行上下文中计算自定义 JavaScript。

⚡ Integration with REA & Security Workflows

⚡ 与 REA 及安全工作流集成

Dynamic XSS & CSP Verification: Navigate to test endpoints with live attack payloads to verify if CSP actively blocks script execution or if DOM-based XSS triggers alert dialogs.
Automated Login & Auth Flow Testing: Automate the multi-step login flow for web applications (Clerk, Supabase, OAuth) to test authenticated routes and cookie security flags.
E2E Post-Fix Validation: After implementing a security patch or header reconfiguration, run Playwright MCP to verify that the website continues to function seamlessly for real users.

动态 XSS 与 CSP 验证： 使用实时攻击载荷导航至测试端点，验证 CSP 是否有效阻止脚本执行，或 DOM 型 XSS 是否触发 alert 对话框。
自动化登录与身份验证流程测试： 自动执行 Web 应用的多步骤登录流程（Clerk、Supabase、OAuth），以测试受保护路由和 Cookie 安全标志。
修复后的 E2E 验证： 完成安全补丁或响应头重新配置后，运行 Playwright MCP，验证网站对真实用户而言仍可正常使用。