Claude Code教程(九)| MCP 之 Playwright
Claude Code教程九| MCP 之 Playwright一、是什么二、前置条件三、接入方式方式一claude mcp add推荐方式二手动 JSON 配置方式三Docker 模式四、Windows 注意事项五、验证六、使用方式七、常用配置参数八、核心工具一览九、浏览器持久化一、是什么Playwright MCP 是 Microsoft 官方提供的 MCP Server基于 Playwright 实现浏览器自动化。它通过浏览器的accessibility tree无障碍树获取页面结构化数据而非依赖像素截图因此速度快、结果确定性强、不消耗 vision 模型。接入后 Agent 可直接控制浏览器打开页面、点击、填表、截图、执行 JS、网络拦截等。二、前置条件Node.js 18首次运行时 Playwright 会自动下载浏览器二进制Chromium / Firefox / WebKit三、接入方式方式一claude mcp add推荐场景一全局所有项目生效推荐配置文件~/.claude.json→ 根节点claude mcpadd-suser playwright npxplaywright/mcplatest卸载claude mcp remove-suser playwright场景二当前项目可团队共享配置文件 项目根.mcp.jsonclaude mcpadd-sproject playwright npxplaywright/mcplatest卸载claude mcp remove-sproject playwright场景三仅当前目录配置文件~/.claude.json→ 该目录节点claude mcpaddplaywright npxplaywright/mcplatest卸载claude mcp remove playwright方式二手动 JSON 配置全局 → 编辑~/.claude.json{mcpServers:{playwright:{command:npx,args:[playwright/mcplatest]}}}项目级 → 编辑项目根目录.mcp.json内容同上可提交 Git 供团队共享。卸载删除配置文件中对应的playwright条目或直接删除.mcp.json文件。方式三Docker 模式dockerrun-p8931:8931 mcr.microsoft.com/playwright/mcp仅支持 headless Chromium功能受限一般不推荐。卸载dockerstop容器IDdockerrm容器ID四、Windows 注意事项Playwright MCP 只有本地 npx 模式没有远程 HTTP 服务端。如果出现MCP error -32000: Connection closed改为cmd /c包裹{mcpServers:{playwright:{command:cmd,args:[/c,npx,playwright/mcplatest]}}}五、验证claude mcp list看到playwright且状态为 ✓ Connected 即成功。六、使用方式重启 Claude Code 会话后新 MCP server 不会在当前会话加载直接描述浏览器操作“用 playwright mcp 打开 example.com截个图”“playwright 打开百度首页搜索 Claude Code”Agent 会依次调用browser_navigate→browser_snapshot→browser_click等工具自动完成。七、常用配置参数claude mcpadd-suser playwright npxplaywright/mcplatest--headless--isolated参数作用默认值--headless无头模式不显示窗口关闭headed--browser浏览器类型chromefirefoxwebkitmsedgechrome--isolated每次启动干净浏览器不保存登录态关闭--caps vision启用像素级鼠标操作坐标点击、拖拽关闭--caps pdf启用 PDF 生成关闭--caps devtools启用 trace、录像、元素高亮关闭--timeout-action操作超时单位毫秒5000--timeout-navigation导航超时单位毫秒60000添加后如需修改先claude mcp remove -s user playwright卸载再claude mcp add重新添加新参数。八、核心工具一览工具用途browser_navigate打开指定 URLbrowser_snapshot获取页面无障碍树结构browser_click点击元素browser_type输入文本browser_take_screenshot截屏browser_evaluate执行 JavaScriptbrowser_fill_form批量填表browser_network_requests查看网络请求browser_console_messages查看控制台日志browser_close关闭浏览器更多工具鼠标像素操作、PDF 生成、录屏等通过--caps参数启用。九、浏览器持久化默认浏览器登录态保存到~/.cache/ms-playwright/mcp-{channel}-{hash}关浏览器再开会话丢失。需要每次干净环境 → 加--isolated需要指定保存位置 → 加--user-data-dir 路径