Cursor自动化测试零基础入门到精通:用Playwright+MCP搭建可复用测试流,收藏这篇就够了
1. 为什么零基础也能在 Cursor 里跑通自动化测试很多人第一次听到“自动化测试”这四个字脑子里浮现的是 Selenium 那一套装驱动、配路径、写一堆等待跑十次挂五次。我最早也是这么过来的直到把 Cursor、Playwright 和 MCP 这三样东西拼在一起才发现原来从零到第一条用例跑通真的可以压缩到一个下午。先说清楚这三个东西分别是什么以及它们凑在一起能干什么。Cursor 是一个带 AI 能力的代码编辑器你可以把它理解成“会写代码的 VS Code”。它的价值不在于编辑器本身而在于它能根据你的自然语言描述直接生成可运行的测试脚本骨架。对于零基础的人来说这一步省掉了大量查 API 文档的时间。Playwright 是微软开源的浏览器自动化测试工具支持 Chromium、Firefox、WebKit 三大内核。它最大的好处是自带等待机制元素没出现它会自动等不用你手写 sleep。而且它下载的是自己固定版本的浏览器二进制不会因为你本机 Chrome 升级导致脚本突然跑不起来。MCP 在这里指的是 Model Context Protocol你可以把它当成 Cursor 和外部工具之间的一座桥。Playwright 官方提供了 playwright-mcp 这个服务配好之后Cursor 里的 AI 就能直接调用浏览器操作能力比如打开页面、点击元素、截图、读取页面结构。这意味着你描述一句“打开百度搜索 playwright 并截图”它就能真的去执行而不是只给你一段代码让你自己跑。适合谁看这篇如果你是完全没写过测试脚本的运维、后端、前端或者刚转测试岗的新人只要你会用命令行、能装 Node.js就能跟着走完。整篇的节奏是先装环境再配 MCP然后写第一条用例最后教你怎么看结果、怎么排错。我试过带几个完全没接触过自动化测试的同事走这套流程最快的一个小时就跑通了登录用例。关键不在于你多聪明而在于每一步的配置别抄错。下面我把每个环节的命令和配置文件都写全你照着复制就行。需要提前说明的是这篇不涉及任何网络访问工具所有依赖都从官方源安装。Node.js 从官网下Playwright 和 MCP 都通过 npm 拉取全程在正常网络环境下完成。2. 前置准备Node.js 环境与 TaoToken 接入配置这一章解决两件事一是把 Node.js 装好二是把 TaoToken 的模型接入配好让 Cursor 里的 AI 有可用的模型来生成和调整测试脚本。2.1 安装 Node.js 并验证Playwright 和 playwright-mcp 都依赖 Node.js 运行。打开 nodejs.org 的下载页选 LTS 版本Windows 下直接下 .msi 安装包macOS 下可以用 .pkg 或者 Homebrew。安装时记得勾选“Add to PATH”这样命令行里才能直接调用 node 和 npm。装完之后打开终端执行node -v npm -v正常会输出类似v20.11.0和10.2.4的版本号。如果提示“command not found”说明 PATH 没配好Windows 下重新运行安装包选 RepairmacOS 下检查~/.zshrc里有没有把 node 的 bin 目录加进去。Node.js 版本建议 18 以上Playwright 较新的版本对 Node 版本有要求太低会报 engine 不匹配的错。2.2 创建工程目录并初始化找一个你放代码的目录执行mkdir cursor-playwright-demo cd cursor-playwright-demo npm init -ynpm init -y会生成一个默认的 package.json这是整个工程的依赖清单。接着装 Playwrightnpm init playwrightlatest这个命令会交互式地问你几个问题用 TypeScript 还是 JavaScript、测试目录叫什么、要不要加 GitHub Actions 工作流。零基础建议选 TypeScript测试目录保持默认的 testsGitHub Actions 可以先选 No等本地跑通了再加。执行完之后目录里会多出几个关键文件playwright.config.ts是全局配置tests/example.spec.ts是官方给的示例用例package.json里会多出playwright/test依赖。然后下载浏览器二进制npx playwright install这一步会下载 Chromium、Firefox、WebKit 三个内核加起来几百 MB耐心等一会儿。下载完成后Playwright 用的就是自己这份固定版本跟你本机的 Chrome 互不干扰。2.3 配置 TaoToken 模型接入Cursor 里要用 AI 生成测试脚本得先给它配一个可用的模型。TaoToken 提供了兼容 OpenAI 协议的接口配置起来很直接。在 Cursor 里打开设置找到 Models 这一栏添加一个自定义模型。Base URL 填https://taotoken.net/apiAPI Key 从控制台生成。模型 ID 根据你需要的场景选写测试脚本用通用的对话模型就够。对应的配置片段如下你可以直接对照着填{ baseUrl: https://taotoken.net/api, apiKey: sk-你的密钥, modelId: 你选择的模型ID }如果你用的是 Claude Code 这类工具配置方式类似Base URL 和 Key 是通用的。需要生成 Key 的话去 API Keys 页面操作想先试试模型对话效果可以用模型对话页面直接聊几句确认接口通不通。配好之后在 Cursor 里新建一个文件输入一句“用 Playwright 写一个打开百度并断言标题包含百度的测试”看它能不能正常生成代码。如果能生成说明模型接入没问题可以进入下一步配 MCP。这里提醒一句API Key 不要硬编码在提交到 Git 的文件里测试工程里建议用环境变量读取后面章节会讲怎么配。3. 可复制配置Playwright MCP 接入 Cursor 全流程这一章是整篇的核心操作部分。配好 MCP 之后Cursor 里的 AI 就不只是“给你写代码”而是能直接驱动浏览器执行操作。配置本身不复杂但路径和 JSON 格式容易写错我把每一步都拆开。3.1 理解 MCP 配置文件的存放位置Cursor 的 MCP 配置有两种作用域全局和项目级。全局配置放在用户目录下项目级配置放在项目根目录的.cursor/mcp.json。零基础建议先用项目级这样配置跟着工程走换项目不会互相干扰。在工程根目录下创建.cursor文件夹里面新建mcp.json。如果你用的是 Windows路径就是cursor-playwright-demo\.cursor\mcp.jsonmacOS 下是cursor-playwright-demo/.cursor/mcp.json。这个文件的内容是一个 JSON 对象key 是mcpServers下面挂各个 MCP 服务的配置。Playwright 官方的 MCP 服务通过 npx 拉起不需要额外全局安装。3.2 写入 Playwright MCP 配置片段把下面这段 JSON 完整复制进mcp.json{ mcpServers: { playwright: { command: npx, args: [ playwright/mcplatest ] } } }这段配置的含义是Cursor 启动时会通过npx去拉取playwright/mcp的最新版本并作为子进程运行。command是启动命令args是传给命令的参数数组。如果你本机 npx 路径有问题可以把command改成 npx 的绝对路径。Windows 下通常在C:\Program Files\nodejs\npx.cmdmacOS 下用which npx查一下。保存文件后回到 Cursor 的 MCP 面板应该能看到 playwright 这个服务状态是绿色的 running。如果显示红色或者一直转圈先检查 npx 能不能在终端里直接跑再检查 JSON 有没有多余的逗号。3.3 验证 MCP 是否真的连上了配置写完不代表就能用得验证一下。在 Cursor 的对话窗口里输入用 playwright 打开 https://example.com 并截图如果 MCP 正常工作你会看到它调用浏览器、打开页面、截图然后把截图路径返回给你。这个过程是真实执行的不是模拟。如果它只回了一段代码而没有实际动作说明 MCP 没被调用大概率是配置文件位置不对或者 Cursor 没重启。改完 mcp.json 之后建议重启一次 Cursor让它重新加载配置。3.4 把模型和 MCP 串起来用MCP 负责“能操作浏览器”模型负责“理解你的需求并生成步骤”。两者都配好之后你就可以用自然语言描述测试场景让 Cursor 生成完整的 spec 文件。比如你输入“帮我写一个测试打开百度搜索 playwright断言结果页标题包含 playwright用 TypeScript 写放到 tests 目录下。”Cursor 会结合 MCP 对页面结构的感知生成一份可运行的.spec.ts文件。生成之后不要直接信先跑一遍看结果。定位器selector有时候会不准尤其是动态渲染的页面需要你手动调一下。调的时候可以让 AI 根据报错信息重新生成定位方式比你自己翻 DOM 快得多。3.5 工程级配置的补充项在playwright.config.ts里有几个配置建议零基础就设好能省掉后面很多麻烦import { defineConfig, devices } from playwright/test; export default defineConfig({ testDir: ./tests, timeout: 30000, retries: 1, use: { headless: true, screenshot: only-on-failure, trace: on-first-retry, }, projects: [ { name: chromium, use: { ...devices[Desktop Chrome] } }, ], });timeout是单条用例超时时间30 秒对大多数页面够用。retries: 1表示失败重试一次能过滤掉一部分偶发不稳定。screenshot: only-on-failure只在失败时截图避免报告目录塞满图片。trace: on-first-retry在重试时记录完整轨迹方便回放排查。这些配置改完不需要额外命令下次跑测试自动生效。4. 跑通第一条用例从脚本模板到结果验证配置都就绪之后这一章带你写第一条真正能跑的测试并教你怎么确认它跑对了。4.1 用 Cursor 生成测试脚本模板在 Cursor 里新建tests/first.spec.ts然后让 AI 生成一个基础模板。你可以直接输入需求也可以手动写一个最小可用版本。下面这份是手动写的结构清晰适合零基础对照理解import { test, expect } from playwright/test; test(百度搜索 playwright 并验证标题, async ({ page }) { await page.goto(https://www.baidu.com); await page.fill(#kw, playwright); await page.click(#su); await expect(page).toHaveTitle(/playwright/i); });逐行解释一下test定义一个用例第一个参数是用例名称第二个参数是异步函数page是 Playwright 注入的页面对象。goto打开网址fill往输入框填内容click点按钮expect加断言。toHaveTitle检查页面标题是否匹配正则。这份脚本里没有手写等待因为 Playwright 的fill和click自带可操作性检查元素不可交互时会自动等待。4.2 运行测试的几种方式命令行运行npx playwright test默认无头模式不弹浏览器窗口结果直接输出在终端。想看到浏览器实际动作加--headednpx playwright test --headed只想跑某一个文件npx playwright test tests/first.spec.ts跑完终端会显示通过数量和耗时。如果失败会给出具体哪一行断言没过以及实际值是什么。4.3 查看测试报告Playwright 默认生成 HTML 报告放在playwright-report目录。跑完之后执行npx playwright show-report浏览器会自动打开报告页面里面有用例列表、通过状态、失败截图、trace 回放。trace 回放特别有用它能像录像一样把每一步操作和页面快照串起来定位问题时比看日志直观得多。报告里每条用例可以点开看详情失败用例会标红附带错误堆栈和截图。如果开了 trace还能点“Trace”标签逐帧回看。4.4 用 MCP 辅助调整定位器第一次跑很可能遇到定位器失效比如#kw这个 ID 在某些页面改版后变了。这时候不用自己翻源码直接在 Cursor 里说“百度搜索框的定位器失效了帮我用 playwright mcp 看一下当前页面的输入框元素给出新的定位方式。”MCP 会去实际页面里读取 DOM 结构返回可用的选择器。你把它给的新定位器替换进去再跑一次。这个循环比手动调试快很多尤其是面对不熟悉的页面。4.5 把登录和关闭封装成前置后置当用例多起来之后重复的登录步骤会拖慢执行。Playwright 提供了beforeEach和afterEach钩子可以把公共操作抽出来import { test, expect } from playwright/test; test.beforeEach(async ({ page }) { await page.goto(https://www.baidu.com); }); test.afterEach(async ({ page }) { await page.close(); }); test(搜索 playwright, async ({ page }) { await page.fill(#kw, playwright); await page.click(#su); await expect(page).toHaveTitle(/playwright/i); });这样每条用例执行前都会先打开页面执行后关闭页面用例本身只关注业务逻辑。封装哪些操作取决于你的项目登录、清理数据、切换环境都适合放进去。5. 常见报错排查401、local proxy failed 与定位失败跑测试的过程中一定会遇到报错这一章把最常见的几类列出来给出排查路径。你遇到问题时可以先在这里对号入座。5.1 模型接口返回 401报错信息里出现401 Unauthorized说明 API Key 不对或者没带上。检查三件事Key 有没有复制完整、有没有多余空格、Base URL 是不是https://taotoken.net/api。如果 Key 是在控制台新生成的确认一下有没有启用。还有一种情况是 Key 配在了错误的位置。Cursor 的模型配置和 MCP 配置是两套东西模型 Key 填在 Models 设置里不要填到 mcp.json 里。5.2 local proxy failed 报错这个报错通常出现在 MCP 服务启动阶段提示本地代理失败。原因一般是 npx 拉取包的时候网络不通或者端口被占用。先在终端里手动执行一次npx playwright/mcplatest看它能不能正常启动。如果卡在下载检查 npm 源是否可用。如果提示端口占用换一个端口或者关掉占用进程。另外如果你本机设了 HTTP_PROXY 之类的环境变量MCP 子进程可能会继承这些变量导致连接异常。临时清掉再试unset HTTP_PROXY HTTPS_PROXY5.3 reading choices 相关报错这个报错一般出现在模型返回内容解析阶段提示读取 choices 字段失败。多数情况下是模型返回格式和预期不一致或者请求被截断。检查你的请求有没有超过模型的最大 token 限制测试脚本生成这种任务输出较长容易触顶。解决办法是把需求拆小一次只生成一个用例而不是让 AI 一口气生成整个测试套件。另外确认模型 ID 填对了填错模型可能导致返回结构不同。5.4 OAuth 相关报错如果你在配置过程中看到 OAuth 字样通常是因为误用了需要 OAuth 流程的接入方式。TaoToken 的 API 接入用的是 Key 认证不需要走 OAuth。检查你的配置里是不是混入了其他平台的配置模板把认证方式改回 API Key 即可。5.5 定位器失效与超时报错Timeout 30000ms exceeded且指向某个 selector说明元素没找到。先用 MCP 去实际页面里查一下当前的选择器替换掉旧的。如果页面是动态加载的可以在goto之后加一个等待条件await page.waitForSelector(#kw, { state: visible });但不要滥用固定 sleep优先用 Playwright 自带的状态等待。waitForSelector比waitForTimeout可靠得多。5.6 浏览器启动失败报错里出现browserType.launch失败通常是浏览器二进制没装好。重新执行npx playwright install --with-deps--with-deps会顺带装系统依赖Linux 环境下尤其需要。Windows 和 macOS 一般不加也行但加上更保险。6. 把测试流用起来从单条用例到可复用流程跑通第一条用例只是起点真正省时间的是把重复场景沉淀成可复用的流程。这一章讲怎么把前面搭好的东西用起来。6.1 用 Coding Plan 支撑长期测试开发如果你打算把自动化测试长期做下去比如给项目加回归测试、接 CI那模型调用量会上去。TaoToken 的 Coding Plan 适合这种长期编码和 Agent 场景比按次调用更划算。配置方式和你现在用的 API 接入一致Base URL 和 Key 通用只是计费模式不同。对于测试开发这种需要反复生成、调整脚本的场景用 Coding Plan 能省掉不少成本。你可以在控制台里看用量根据实际消耗决定要不要切。6.2 把用例组织成测试套件单条用例跑通后按功能模块拆成多个 spec 文件。比如login.spec.ts、search.spec.ts、checkout.spec.ts。Playwright 会自动扫描 testDir 下的所有 spec 文件一次跑完。跑整个套件npx playwright test跑某个标签的用例可以在用例上加test.describe分组或者用--grep过滤npx playwright test --grep 搜索6.3 接入 CI 的时机本地稳定跑一周之后再考虑接 GitHub Actions。npm init playwrightlatest时如果选了 Yes它会生成.github/workflows/playwright.yml推代码就自动跑。没选的话也可以手动加核心步骤就是装 Node、装依赖、装浏览器、跑测试、上传报告。CI 里跑建议开retries: 2因为 CI 环境比本地慢偶发失败更多。报告用 artifact 上传方便回看。6.4 让 AI 帮你维护用例页面改版导致一批用例失效时不用一条条改。把报错信息贴给 Cursor让它根据 MCP 读到的当前页面结构批量更新定位器。这个操作比手动改快很多而且不容易漏。维护的时候注意一点AI 改完的脚本一定要跑一遍确认不要直接提交。定位器这种东西看起来对不代表真的对跑过才算数。6.5 一个实际可用的目录结构跑顺之后建议把工程整理成下面这样cursor-playwright-demo/ ├── .cursor/ │ └── mcp.json ├── tests/ │ ├── login.spec.ts │ ├── search.spec.ts │ └── fixtures/ │ └── auth.ts ├── playwright.config.ts ├── package.json └── playwright-report/fixtures放公共的登录态、测试数据。mcp.json跟着工程走换机器时把整个目录拷过去装完依赖就能跑。报告目录不用提交到 Git加到.gitignore里。整套流程走下来你会发现零基础的门槛其实不在写代码而在配置别写错。配置对了剩下的就是描述需求、跑测试、看报告、调定位器这个循环。循环转起来之后自动化测试就从“要学的东西”变成了“在用的工具”。需要生成 API Key 或者查看接入文档的话可以从 API Keys 页面和控制台进入。模型对话页面适合先验证接口通不通接入文档里有更细的参数说明。长期做测试开发的话Coding Plan 的入口在控制台里能找到。