Cursor + Playwright MCP 实战落地：把浏览器自动化接进 AI 编辑器

1. 为什么要在 Cursor 里接 Playwright MCP如果你最近在折腾 AI 编辑器大概率听过 Cursor 和 MCP 这两个词。Cursor 本身已经能补全代码、改 bug、跑终端命令但它默认看不到浏览器里发生了什么。而 Playwright 是微软开源的浏览器自动化框架能开页面、点按钮、填表单、截图、断言。把 Playwright 通过 MCPModel Context Protocol接进 Cursor 之后你就能在对话框里直接说“打开本地 3000 端口点登录断言跳转到 dashboard”Cursor 会调用 Playwright 去真实浏览器里执行再把结果回传。这套组合最适合三类人一是写前端页面、需要反复验证交互的开发者二是做端到端测试、不想每次手写一堆 selector 的测试同学三是想让 AI 帮忙跑回归、但又不想把浏览器操作写成死脚本的人。核心检索词就是 cursor playwright mcp 配置本文会从零把这条链路跑通。我试过在几个项目里用这套流程最大的感受是配置本身不复杂坑基本都集中在 Node 环境、npx 缓存和 MCP 进程启动这几步。下面按“先备环境、再写配置、最后验证”的顺序来每一步都给可复制的片段。先说清楚整体结构Cursor 作为 MCP Client读取一份 JSON 配置按配置里的 command 去启动一个 MCP Server 进程这个进程就是playwright/mcp。Cursor 通过标准输入输出和它通信Playwright 再去驱动 Chromium。所以你要保证的是Node 能跑、npx 能拉到包、Playwright 的浏览器二进制装好了。2. 前置准备Node、Playwright 与 TaoToken 接入在写 MCP 配置之前先把运行环境铺好。这一步没做好后面 90% 的报错都出在这里。首先是 Node.js。playwright/mcp是一个 npm 包靠 npx 拉起所以本机必须有 Node。建议 18 LTS 以上用node -v确认。如果版本太低npx 拉包时可能报 engine 不匹配。装完 Node 后先手动跑一次浏览器安装npx playwright install chromium这条命令会把 Chromium 的二进制下载到本地缓存目录。很多人跳过这步直接在 Cursor 里让 MCP 启动结果第一次调用就报 “Executable doesnt exist”因为 MCP Server 启动时并不会自动帮你下浏览器。接着是模型侧。Cursor 自己可以填 API Key如果你想让对话和代码补全走一个稳定的入口可以在 Cursor 的模型设置里填自定义 Base URL 和 Key。TaoToken 提供的就是这样一个统一入口官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 。在 Cursor 里配置时Base URL 填https://taotoken.net/apiKey 在控制台生成。生成 Key 的入口在 https://taotoken.net/console/api-keys 登录后新建一个复制出来。模型 ID 按你实际要用的填比如对话用通用模型编码场景可以选偏代码的。填完之后 Cursor 的对话和补全就走这个入口了。这一步和 MCP 是两条独立的线MCP 负责“让 AI 能操作浏览器”模型入口负责“AI 本身能正常回话”两个都要通。如果你后面想长期跑编码和 Agent 任务可以看下 Coding Planhttps://taotoken.net/coding-plan 。它更适合高频调用场景这里先不展开重点是先把 MCP 跑通。环境清单确认一下Node 18、npx playwright install chromium成功、Cursor 已装、模型入口可用。这四样齐了再往下走。3. 可复制的 Playwright MCP 配置片段Cursor 的 MCP 配置有两种放法全局和项目级。全局配置对所有项目生效项目级只对当前工作区生效。建议先放全局跑通后再按项目拆。在 Cursor 里打开设置找到 MCP 相关面板点添加 Server它会让你编辑一份 JSON。标准结构长这样{ mcpServers: { playwright: { command: npx, args: [playwright/mcplatest] } } }这段就是最小可用配置。command是启动命令args是传给它的参数。latest表示每次拉最新版好处是能拿到新特性坏处是偶尔新版本有兼容问题。如果你想要稳定可以锁版本比如playwright/mcp0.0.28这种具体版本号去 npm 上看当前稳定版。有些环境里 npx 不在默认 PATHCursor 启动子进程时找不到命令会报 “spawn npx ENOENT”。这种情况把 command 换成 npx 的绝对路径比如 macOS 上可能是/usr/local/bin/npx或~/.nvm/versions/node/v20.x.x/bin/npx。用which npx查一下填进去。如果你用的是 Windowscommand 可能要写成npx.cmd或者用cmd /c npx包一层。这是 Windows 下 spawn 的常见坑。再给一个带参数的进阶配置比如指定浏览器和视口{ mcpServers: { playwright: { command: npx, args: [ playwright/mcplatest, --browser, chromium, --viewport-size, 1280,720 ] } } }参数含义--browser指定用哪个浏览器内核--viewport-size设默认视口。这些参数会作为 Playwright 启动时的默认值省得每次在对话里重复说。配置写完后保存Cursor 会尝试启动这个 MCP Server。面板上一般会显示状态绿色表示已连接红色或转圈表示启动失败。失败时先看 Cursor 的 MCP 日志里面会有子进程的 stderr报错信息基本都在那。这里提醒一句MCP 配置里的 command 和 args 是给 Cursor 启动子进程用的不是给你在终端里手敲的。你在终端里能跑通npx playwright/mcplatest不代表 Cursor 里一定能起来因为两者的 PATH 和环境变量可能不一样。排查时以 Cursor 日志为准。4. 端到端验证让 Cursor 真的操作一次浏览器配置显示已连接后别急着上复杂场景先做一个最小验证打开一个页面读标题断言内容。在 Cursor 对话框里输入类似这样的话“用 playwright 打开 https://example.com 读取页面标题并告诉我”。如果 MCP 通了Cursor 会调用 Playwright 的 navigate 和 snapshot 工具返回页面标题 “Example Domain”。这一步能过说明链路是通的。接下来上强度做一个本地页面的操作加断言。假设你本地有个前端项目跑在 3000 端口页面上有个登录按钮。你可以说“打开 http://localhost:3000点击文本为‘登录’的按钮然后断言页面出现了‘欢迎’两个字”。Playwright MCP 会依次执行navigate、click按文本定位、再取一次页面快照做断言。如果按钮文本对不上它会报找不到元素这时候你就能在对话里看到真实的 DOM 结构直接改 selector 或文案。再给一个更接近测试场景的例子用代码块写清楚期望动作1. 打开 http://localhost:3000/login 2. 在 name 为 username 的输入框填入 testuser 3. 在 name 为 password 的输入框填入 testpass 4. 点击 type 为 submit 的按钮 5. 断言当前 URL 包含 /dashboard把这段贴进 Cursor 对话框让它用 playwright 执行。执行过程中你能看到浏览器窗口真的被拉起来输入框被填、按钮被点。这就是 MCP 的价值AI 不再只是“建议你写测试”而是直接帮你跑。如果第 5 步断言失败Cursor 会把当前 URL 和页面快照返回给你你就能判断是登录逻辑问题还是选择器问题。这种“执行—反馈—修正”的循环比手写脚本再跑要快得多。验证通过后你可以把常用操作沉淀成对话模板下次直接复用。比如把“打开本地、登录、断言跳转”存成一个片段每次回归时改改参数就行。5. 常见报错排查对照这一节按真实报错来遇到哪个查哪个。401 或鉴权失败这类报错通常不在 MCP 本身而在模型入口。检查 Cursor 里填的 Base URL 和 Key 是否正确Base URL 应该是https://taotoken.net/apiKey 从控制台复制注意别带多余空格。如果 Key 失效去 https://taotoken.net/console/api-keys 重新生成一个。local proxy failed / 连接被拒Cursor 启动 MCP 子进程时如果本机有网络层拦截或端口占用会报这个。先确认npx playwright/mcplatest在终端能独立跑起来。如果终端能跑、Cursor 不能多半是 Cursor 子进程的 PATH 或代理环境变量不一致。把 command 换成 npx 绝对路径试试。reading choices 相关报错这通常是模型返回结构不符合预期常见于 Base URL 填错、把非兼容接口当成了 OpenAI 兼容接口。确认你填的入口支持对话补全格式模型 ID 拼写正确。OAuth 相关报错如果你在配置里误加了需要 OAuth 的远程 MCP Server而本地没做授权会卡在 OAuth 流程。Playwright MCP 是本地 stdio 模式不需要 OAuth配置里不要混入远程 server 的字段。Executable doesnt existPlaywright 浏览器没装。跑npx playwright install chromium装完重启 Cursor 的 MCP Server。spawn npx ENOENT找不到 npx。用which npx查路径填绝对路径Windows 用npx.cmd。版本冲突latest拉到新版本后行为变了。锁一个已知稳定版本比如把 args 改成[playwright/mcp0.0.28]。排查顺序建议先看 Cursor MCP 日志的 stderr再看终端能否独立复现最后查模型入口。大部分问题在前两步就能定位。6. 把这条链路用起来跑通之后你可以把 Playwright MCP 当成 Cursor 的一个“手”。写前端时改完样式直接让它打开页面截图对比写测试时让它先跑一遍交互再生成断言代码做回归时把关键路径写成对话模板批量执行。如果后面要接更多 MCP Server比如文件系统、数据库查询配置结构是一样的往mcpServers里加就行。每个 server 独立进程互不影响。想深入看接入细节文档在 https://taotoken.net/doc 想直接验证模型对话效果可以打开 https://taotoken.net/models 试一轮。长期跑编码和 Agent 任务的话Coding Plan 在 https://taotoken.net/coding-plan 。最后留一个实用习惯每次改完 MCP 配置先在终端手动跑一遍对应的 command确认能起来再回 Cursor 保存。这样能把“配置问题”和“Cursor 环境问题”分开省一半排查时间。