Playwright MCP 技能

由 Playwright MCP 服务器驱动的浏览器自动化能力。可编程控制 Chrome、Firefox 或 WebKit 浏览器。

安装

npm install -g @playwright/mcp
# 或者
npx @playwright/mcp

首次安装浏览器：

npx playwright install chromium

快速开始

启动 MCP 服务器（STDIO 模式）

npx @playwright/mcp

带参数启动

# 无头模式
npx @playwright/mcp --headless

# 指定浏览器
npx @playwright/mcp --browser firefox

# 设置视口尺寸
npx @playwright/mcp --viewport-size 1280x720

# 忽略 HTTPS 错误
npx @playwright/mcp --ignore-https-errors

常见使用场景

1. 页面跳转与数据提取

# 可用的 MCP 工具：
# - browser_navigate：打开 URL
# - browser_click：点击元素
# - browser_type：在输入框中键入文本
# - browser_select_option：选择下拉菜单选项
# - browser_get_text：提取文本内容
# - browser_evaluate：执行 JavaScript
# - browser_snapshot：获取页面结构快照
# - browser_close：关闭浏览器

2. 表单交互

1. 使用 browser_navigate 跳转至表单页面 URL
2. 使用 browser_type 向输入字段填写内容
3. 使用 browser_click 提交表单
4. 使用 browser_get_text 验证结果

3. 数据提取

1. 使用 browser_navigate 跳转至目标页面
2. 使用 browser_evaluate 执行数据提取脚本
3. 解析返回的 JSON 数据

MCP 工具参考

配置选项

# 安全性
--allowed-hosts example.com,api.example.com
--blocked-origins malicious.com
--ignore-https-errors

# 浏览器设置
--browser chromium|firefox|webkit
--headless
--viewport-size 1920x1080
--user-agent "Custom Agent"

# 超时设置
--timeout-action 10000      # 操作超时（毫秒）
--timeout-navigation 30000  # 导航超时（毫秒）

# 输出设置
--output-dir ./playwright-output
--save-trace
--save-video 1280x720

示例

网站登录

browser_navigate: { url: "https://example.com/login" }
browser_type: { selector: "#username", text: "user" }
browser_type: { selector: "#password", text: "pass" }
browser_click: { selector: "#submit" }
browser_get_text: { selector: ".welcome-message" }

提取表格数据

browser_navigate: { url: "https://example.com/data" }
browser_evaluate: { 
  script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" 
}

截图

browser_navigate: { url: "https://example.com" }
browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" }
# 截图将通过 --output-dir 参数保存，或直接作为响应内容返回

安全说明

• 默认限制文件系统访问范围为 workspace 根目录
• 主机验证机制防止跳转至不受信任的域名
• 默认启用沙箱隔离（谨慎使用 --no-sandbox 参数）
• 默认禁用 Service Worker

故障排查

# 更新浏览器
npx playwright install chromium

# 启用调试模式
npx @playwright/mcp --headless=false --output-mode=stdout

# 检查安装状态
playwright-mcp --version

相关链接

• Playwright 文档
• MCP 协议
• NPM 包