CodeBuddy中配置Playwright MCP 浏览器自动化完全指南适用环境Windows CodeBuddy配置文件C:\Users\admin\.codebuddy\mcp.json写入mcpServers节点。本文基于已实测跑通的版本playwright/mcplatest默认内核 chrome-for-testing。一、Playwright MCP 是什么Playwright MCP是微软官方出品的 MCP Server让 AI 通过真实浏览器自动完成网页操作打开页面、点击、输入、截图、跑 E2E 验证、抽取页面数据。它的核心特点是基于可访问性快照accessibility snapshot交互而非靠截图/坐标定位页面结构被抽象成带ref的元素树AI 用ref精准定位按钮/输入框如refe46页面重排也不会点错比截图 坐标更稳、token 更省本地还是公网都能访问——它跑的是真实浏览器browser_navigate填什么 URL 就开什么localhost 或https://www.bing.com无区别。注博客https://blog.csdn.net/badao_liumang_qizhi二、安装与配置2.1 写入 MCP 配置playwright:{command:D:/SoftWare/node22/npx.cmd,args:[-y,playwright/mcplatest,--browser,chromium],description:浏览器自动化Playwright可访问性快照,disabled:false}常用args参数参数说明--browser chromium指定内核chromium / firefox / webkit默认 chromium--headless无头模式默认即无头想看界面去掉此参数--no-sandboxLinux/容器常用Windows 一般不用--cdp-endpoint url连已打开的浏览器如http://127.0.0.1:9222可复用登录态--port n/--host以 HTTP 服务形式暴露远程 MCP--save-trace保存 trace 便于调试写完配置必须重启 MCP 连接禁用→启用或重启 CodeBuddy否则仍跑旧进程。2.2 安装浏览器内核关键一步否则报错首次运行会报Error: Browser chrome-for-testing is not installed. Run npx playwright/mcp install-browser chrome-for-testing to install解决在 PowerShell 执行D:/SoftWare/node22/npx.cmd-y playwright/mcplatestinstall-browserchrome-for-testing会下载约 191.9 MiB 内核到C:\Users\admin\AppData\Local\ms-playwright\装好即可复用。2.3 国内网络注意事项用国内镜像PLAYWRIGHT_DOWNLOAD_HOSThttps://cdn.npmmirror.com/binaries/playwright时可能遇到特定版本 404实测chrome-for-testing 151.0.7922.10在 npmmirror 缺失。实测去掉镜像、走官方源https://cdn.playwright.dev可正常下载约几分钟191.9 MiB。结论镜像 404 就回退官方源。三、常用工具速查工具作用browser_navigate打开 URL{url: ...}browser_snapshot抓取可访问性快照拿元素ref比截图更适合定位browser_type向可编辑元素输入文本submit:true等效输入后回车browser_click点击靠快照ref或 selector 定位browser_press_key按键如Enter、ArrowLeftbrowser_take_screenshot截图视觉验证时再用不能据此做操作browser_evaluate在页面执行 JS取回结构化结果browser_wait_for等待某条件/元素出现browser_navigate_back后退注意本版本没有browser_fill输入框用browser_type填完可submit:true自动回车。四、常用开发场景示例场景 1本地前端冒烟测试打开http://localhost:5173截图首页点登录看是否跳转。调用链navigate→take_screenshot→snapshot拿 ref→click→wait_for→take_screenshotsnapshot断言。场景 2表单 E2E 流程打开 login 页用户名填admin、密码填123456点提交验证登录成功。snapshot拿 input/button 的 ref → 两次type→click→snapshot断言。场景 3抓取页面数据打开列表页用browser_evaluate把表格前 20 行名称状态取成结构化数据。场景 4控制台 / 网络错误排查操作到报错那步看 console 红字 / 网络 500。用browser_evaluate注入监听console.error/ 失败网络或直接读browser_console_messages/browser_network_requests若提供。场景 5响应式 / 多视口检查首页分别在 375 / 768 / 1440 宽度截图查布局错位。场景 6自动化回归穷人版视觉回归改完登录页样式重跑流程截图和基线图对比。可配合--save-trace导出 trace 回放。场景 7连已登录浏览器跳过登录配--cdp-endpoint http://127.0.0.1:9222先chrome --remote-debugging-port9222手动登录AI 复用登录态操作受限页面。场景 8公网页面与本地无异打开https://www.bing.com截图、搜索、抽取结果。五、完整实战用 Bing 搜索并提取前 5 条标题目标打开https://www.bing.com→ 截图首页 → 搜Spring AI Alibaba → 取前 5 条标题。实际调用链已跑通// 1. 打开首页browser_navigate({url:https://www.bing.com})// → 自动跳转 https://cn.bing.com/// 2. 首页截图browser_take_screenshot({type:png,scale:css,filename:bing-home.png})// 3. 快照定位搜索框refe46browser_snapshot()// → searchbox 输入搜索词 [refe46]// 4. 输入并回车搜索browser_type({target:e46,text:Spring AI Alibaba,submit:true})// → 跳转 https://cn.bing.com/search?qSpringAIAlibaba// 5. 抽取前 5 条标题browser_evaluate({function:() { const nodes Array.from(document.querySelectorAll(li.b_algo h2)).slice(0,5); return nodes.map(n (n.innerText||n.textContent||).trim()).filter(Boolean); }})// 6. 结果页截图browser_take_screenshot({type:png,scale:css,filename:bing-result.png})结果前 5 条#标题1Spring AI Alibaba 概述 - Alibaba Cloud Spring Cloud …2Spring AI Alibaba实战从0到1构建企业级智能应用3GitHub - alibaba/spring-ai-alibaba: Agentic AI Framework for …4Spring AI Alibaba5快速开始 | Spring AI Alibaba截图文件bing-home.png、bing-result.png真实浏览器渲染的 PNG。六、常见问题与排错现象原因 / 解决Browser chrome-for-testing is not installed首次需npx playwright/mcp install-browser chrome-for-testing装内核。下载报 404npmmirror路径镜像缺该版本去掉PLAYWRIGHT_DOWNLOAD_HOST走官方源即可。browser_fill工具不存在本版本用browser_typesubmit:true自动回车不要调browser_fill。改配置不生效 / 仍跑旧进程禁用→启用或重启 CodeBuddy。npx拉包慢 / 缓存损坏 ENOENT清C:\Users\admin\AppData\Local\npm-cache\_npx重试。公网站登录需验证码用--cdp-endpoint连已手动登录的真实 Chrome 绕过。反爬 / 人机验证挡住Cloudflare、reCAPTCHA 等自动化浏览器过不去属正常限制。headless 被站点识别为机器人去掉--headless或连--cdp-endpoint真实 Chrome。截图中文乱码Windows 本地一般正常容器/无字体环境需装中文字体。控制台有 error多为页面自身资源告警不影响自动化可忽略或browser_evaluate排查。七、与 Puppeteer 对比 / 选型维度PuppeteerPlaywright推荐交互方式截图 选择器/坐标可访问性快照ref 定位稳定性受布局/坐标影响高语义定位Token 消耗截图多偏贵快照文本更省多浏览器Chromium 为主chromium/firefox/webkitE2E 推荐度中高截图需求强强结论做 E2E 验证、表单交互、数据抽取优先Playwright纯截图存档或习惯 Puppeteer 脚本时用后者。一句话总结Playwright MCP 真实浏览器 快照定位 全公网/本地通吃。配好内核、记牢先navigate/snapshot拿 ref再type/click最后evaluate抽数据 /screenshot留图这套流水线就能覆盖绝大多数浏览器自动化场景。