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 "自定义代理"

# 超时设置
--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: "用户" }
browser_type: { selector: "#password", text: "密码" }
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 保存截图或在响应中返回

安全说明

• 默认限制文件系统访问工作区根目录
• 主机验证防止导航到不受信任的域名
• 默认启用沙盒 (谨慎使用--no-sandbox)
• 默认阻止 Service Worker

故障排除

# 更新浏览器
npx playwright install chromium

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

# 检查安装
playwright-mcp --version

链接

• Playwright 文档
• MCP 协议
• NPM 包