想在 Claude Code 里让模型自己点本地页面看效果,搜了一圈官方推荐包是 @playwright/mcp,仓库在 microsoft/playwright-mcp。走 MCP 之后,工具名会挂在当前会话里,输出里也能看到 playwright 前缀,比把一大段 Playwright 脚本贴进对话好管。
装法按 Claude Code 文档,在项目目录的终端跑(别塞进已经开着的 claude 会话):
claude mcp add playwright -- npx -y @playwright/mcp@latest
-- 后面才是真正启动命令;-y 免得 npx 卡住问要不要装。只想自己本机用,默认 local scope 就行;想所有项目都带上,加 --scope user。要写进仓库给同事共用,就在项目根放 .mcp.json:
{
"mcpServers": {
"playwright": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@playwright/mcp@latest"]
}
}
}
项目级第一次会弹审批,拒绝过的话得 claude mcp reset-project-choices 再来。配完用 claude mcp list 看状态,第一次常显示 Failed to connect,多半是 npx 还在拉包,等一会再 list。文档里也说了:Added 只说明写进了配置,不代表已经连上。会话里也可以 /mcp 看工具列表,确认 browser_navigate 这类名字在不在。
连上之后能干什么:默认 headed,会弹出真实浏览器窗口,方便盯着它点哪。常用流程是 browser_navigate 打开 URL → browser_snapshot 拿无障碍树(节点带 ref=,后续点击、填表靠这个引用,别指望靠截图像素猜坐标)→ browser_click / browser_type / browser_fill_form。截图有 browser_take_screenshot,官方写得很清楚:截图只适合给人核对,不要拿它当操作依据。等文案出现或消失可以用 browser_wait_for。断言侧可开 testing 能力,有 browser_verify_text_visible、browser_verify_element_visible 这类;网络 mock、cookie / localStorage、PDF、坐标点击分别对应 --caps 里的 network / storage / pdf / vision。本地改完 UI,直接让它打开 http://localhost:xxxx 走一遍表单或回归路径,比自己手点省事。复杂交互还有 browser_run_code_unsafe,能在 Playwright 进程里跑任意 JS,权限等同本机 RCE,只适合信任的本地客户端。
几个常见的坑:
浏览器没装。报错常见是 executable doesn’t exist,或提示 Browser not installed。直接跑 npx playwright install 未必和 MCP 自带的 playwright-core 版本目录对得上;按报错提示用包自带的安装路径,或让模型调安装相关工具。装浏览器本身可能跑半分钟以上,客户端超时会误以为挂了,其实还在下。
headless。默认是有界面的。无显示环境(CI、远端、纯 SSH)要在 args 里加 --headless;有显示但想少弹窗也可以加。反过来,在无 DISPLAY 的机器上硬开 headed,容易起不来,官方建议单独 npx @playwright/mcp@latest --port 8931,客户端改连 http://localhost:8931/mcp。
权限。页面要剪贴板、地理位置之类,用 --grant-permissions(例如 clipboard-read)。这是给浏览器 context 授权,跟伪装定位不是一回事。
超时。动作默认大约 5s(--timeout-action),导航默认约 60s(--timeout-navigation)。MCP 进程本身启动慢时,可把环境变量 MCP_TIMEOUT 调大再开 claude。headless 浏览器闲置约一小时会自动关,可用 --idle-timeout 改;headed 默认不因闲置关。页面一直转圈,先看导航超时和网速,别一上来就怪 MCP。
Node 版本:仓库写 ≥18,Playwright 文档更倾向 20+。换 browser 就加 --browser=firefox(还支持 chrome / webkit / msedge)。持久化登录态默认落在本机 ms-playwright 缓存目录,换项目会按 workspace 分开;要每次干净环境可加 --isolated。
官方文档: