告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度1. 先把目标定清楚让 Cursor 真的“动手”点页面Playwright MCP 解决的是一个很具体的问题大模型能写代码但看不到你本地浏览器里到底渲染成了什么样。把 Playwright 封装成 MCP Server 之后Cursor 就多了一双手——能开页面、能截图、能读 DOM、能点击。这次要跑通的三步很朴素打开本地5173端口的页面、截一张图、读几个 DOM 节点、点掉一个弹窗。做完这三步一条前端回归用例的半自动执行链路就成立了。适合谁手上已经有 Cursor、本地起了前端 dev server、想用自然语言驱动浏览器做回归的人。不需要你精通 Playwright API但要知道 MCP 是什么——简单说它是模型和外部工具之间的插头插上之后模型就能调用工具。产物清单先摆出来后面逐条落地一份mcp.json配置片段、三条可以直接复述给 Cursor 的提示词、截图落盘路径、每次调用的耗时记录。模型侧我选 Qwen3.7 Flash 这类便宜档做工具调用因为 MCP 场景里模型主要干的是“决定调哪个工具、传什么参数”不需要顶配推理。2. 拿 Key 与装环境十分钟里的前两分钟第一步是拿 Key。打开 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_generateutm_mediumcsdnutm_campaigngenerate 注册后进控制台在 API Keys 页面创建一个新 Key。创建时给它起个能认出来的名字比如cursor-mcp-playwright方便以后按用途吊销。Key 只在创建时完整显示一次复制到本地密码管理器或临时环境变量里别直接写进会提交到 git 的文件。控制台入口在这里https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_generateutm_mediumcsdnutm_campaigngenerate Key 管理页在 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_generateutm_mediumcsdnutm_campaigngenerate 。这两个页面建议都收藏后面排障会反复回来。第二步装 Playwright MCP Server。它是 Node 包用npx直接跑最省事不用全局安装# 确认 Node 版本Playwright MCP 需要 18 以上 node -v # 预拉一次包避免首次调用时卡在下载 npx -y playwright/mcplatest --help如果--help能打印出参数列表说明包已经就位。第一次运行会顺带下载 Chromium几百 MB网络慢的话这一步会吃掉几分钟——所以“10 分钟跑通”的前提是你提前把浏览器二进制拉好了。踩过的坑基本都在这里不是配置写错是 Chromium 还没下完Cursor 那边一直转圈。3. 把 TaoToken 写进 MCP 配置环境变量是关键Cursor 读 MCP 配置的位置在项目根目录的.cursor/mcp.json或者全局的~/.cursor/mcp.json。我建议放项目级因为不同项目的浏览器任务不一样配置跟着项目走更清晰。核心思路Playwright MCP Server 本身不直接调模型它只暴露工具真正需要模型能力的是 Cursor 的 Agent。但如果你想让 MCP 链路里某些步骤走 TaoToken 的模型比如让一个便宜的模型先做页面结构摘要就把 TaoToken 的地址和 Key 通过环境变量注入进去。https://taotoken.net/api是兼容 OpenAI 风格的接入地址写进env即可。{ mcpServers: { playwright: { command: npx, args: [-y, playwright/mcplatest], env: { OPENAI_BASE_URL: https://taotoken.net/api, OPENAI_API_KEY: sk-你的TaoToken密钥, PLAYWRIGHT_MCP_OUTPUT_DIR: ./.mcp-artifacts, PLAYWRIGHT_MCP_HEADLESS: false } } } }几个参数值得解释。PLAYWRIGHT_MCP_OUTPUT_DIR决定截图和快照落盘的位置我设成项目下的.mcp-artifacts记得加进.gitignore。PLAYWRIGHT_MCP_HEADLESS设false是为了让你肉眼看到浏览器在动调试阶段非常有用跑稳定了再改true提速。模型选择上工具调用场景用 Qwen3.7 Flash 这类便宜档就够。它的响应快、单价低适合“读 DOM → 决定点哪里”这种高频小决策。具体可用模型和计费以官网为准https://taotoken.net/?utm_sourcetaotoken_aicg_blog_generateutm_mediumcsdnutm_campaigngenerate 。改完配置后重启 Cursor在设置里能看到playwright这个 MCP Server 变成绿色已连接状态。4. 三条提示词把三步任务跑完配置生效后在 Cursor 的 Agent 对话里直接说人话就行。下面三条是我实测下来最稳的表述你可以原样复述。第一条开页面并截图用 playwright 工具打开 http://localhost:5173 等页面网络空闲后截一张全页图保存到 .mcp-artifacts/home.png然后告诉我这张图的绝对路径和这次调用花了多少毫秒。第二条读 DOM 节点在当前页面上用 playwright 读取所有带 data-testid 属性的元素列出它们的 testid 和文本内容。如果超过 20 个只列前 20 个。第三条点掉弹窗页面上应该有一个弹窗找它的关闭按钮通常是 aria-label 含 close 或文本是“关闭”的按钮点掉它然后再截一张图存成 .mcp-artifacts/after-close.png确认弹窗已经消失。三条提示词对应三个可验证结果截图文件存在、DOM 列表返回、弹窗消失后第二张图里没有遮罩层。每次调用 Cursor 都会在工具调用面板里显示耗时把它抄进你的记录表。5. 验证结果与失败分支跑通之后你应该看到.mcp-artifacts/目录下出现home.png和after-close.pngCursor 回复里带着 DOM 节点列表工具调用面板显示每次调用 800ms 到 3s 不等首次调用因为要启动浏览器会偏慢。失败分支我列几个高频的。如果 Cursor 报“找不到 playwright 工具”八成是mcp.json路径不对或没重启检查文件是否在.cursor/下。如果报连接超时先手动跑一次npx -y playwright/mcplatest --help确认包能拉下来。如果截图是空白多半是localhost:5173没起服务或者页面还在加载——把提示词里的“等网络空闲”改成“等 3 秒”试试。如果返回 401检查OPENAI_API_KEY有没有多余空格以及 Key 是否被吊销。耗时记录建议用一张小表每次回归跑完追加一行步骤工具耗时结果打开页面browser_navigate1.2s成功截图browser_take_screenshot0.9shome.png读 DOMbrowser_evaluate0.6s18 个节点点弹窗browser_click0.8s成功6. 限制、成本与模型选择Playwright MCP 的能力边界要说清楚它能操作浏览器但不会替你判断“这个弹窗该不该点”。业务逻辑还得你写进提示词或断言里。另外它默认操作的是真实浏览器涉及登录态、支付这类敏感流程时别把生产环境的 Key 塞进去。成本主要两块TaoToken 的模型调用费和本地浏览器资源。工具调用场景 token 消耗不大Qwen3.7 Flash 这类便宜档跑一条回归用例通常几分钱级别具体价格以官网为准。模型选择上如果你的任务只是“点按钮、读文本”便宜档完全够如果要做复杂的视觉判断比如“这个布局有没有错位”再考虑上更强的多模态模型。最后给个实用技巧把三条提示词存成 Cursor 的自定义命令或 snippets下次回归直接调用不用每次重打。截图目录定期清理不然.mcp-artifacts会悄悄涨到几百 MB。跑顺之后把PLAYWRIGHT_MCP_HEADLESS改成true整条链路能再快一截。 告别海外账号与网络限制稳定直连全球优质大模型限时半价接入中。 点击领取海量免费额度