告别手工编写测试脚本！Claude + Playwright MCP快速生成自动化测试脚本

1. 为什么手工写 Playwright 脚本总是“写完就废”做过 Web 回归测试的朋友大概都有同感页面一改脚本就红一片。我最早用录制工具生成 Playwright 代码跑通一次挺爽结果前端把按钮的 class 从btn-login改成login-submit整条用例直接失效。录制工具生成的定位器往往是nth-child或者深层 CSS 路径页面结构稍微动一下选择器就找不到元素了。后来大家开始把页面 HTML 复制给大模型让它帮忙写脚本。这个办法能省一点事但问题也很明显模型看不到真实的 DOM 结构只能靠你粘贴的片段“猜”。你贴得不全它写出来的选择器就是编的页面有 iframe、动态加载、Shadow DOM它更是一头雾水。来回粘贴、来回改时间全耗在沟通上。Playwright MCP 想解决的就是这个断层。MCP 全称 Model Context Protocol你可以把它理解成大模型和浏览器之间的一根“数据线”。模型不再凭空猜页面长什么样而是通过 MCP 协议真实地打开浏览器、读取可访问树accessibility tree、执行点击和输入拿到结构化反馈后再决定下一步。整个过程里模型是“看着页面”在操作而不是“想象页面”在操作。这对回归测试场景特别有价值。回归测试的特点是用例相对固定但页面迭代频繁。用 Playwright MCP你可以用自然语言描述一条测试意图让 Claude 实际跑一遍流程然后基于真实执行记录生成可运行的 Playwright 脚本。页面变了重新跑一次生成流程就行维护成本从“改代码”变成“重新描述需求”。这篇文章面向的是已经会一点 Playwright、但被脚本维护折磨的测试同学。我会从环境准备讲起给出 Claude Desktop 的 MCP 配置片段、提示词模板、生成脚本的本地执行验证步骤并且把模型请求的 endpoint 统一改到 TaoToken 的 Key/API 通道最后跑通一条登录用例。全程可跟做不需要你额外准备什么海外账号。2. 前置准备Node.js、Playwright 与 TaoToken 接入配置在动手配 MCP 之前先把地基打好。Playwright MCP 本身是一个 Node.js 程序所以 Node 环境是必须的。我实测下来Node 18 以上都能跑推荐直接用 LTS 版本。2.1 安装 Node.js 与 Playwright去 Node.js 官网下载 LTS 安装包一路下一步即可。装完后在终端验证node -v npm -v两个命令都能输出版本号说明环境 OK。接着装 Playwright 和浏览器依赖npm install -g playwright npx playwright install第一条是全局安装 Playwright 包第二条会下载 Chromium、Firefox、WebKit 三个浏览器内核。下载量有点大耐心等一会儿。装完后可以用npx playwright --version确认。2.2 安装 Playwright MCP ServerPlaywright MCP 有两个常用实现我都试过实现维护方特点适用场景playwright/mcpMicrosoft 官方基础、标准、稳定日常导航、表单、简单用例executeautomation/playwright-mcp-server社区支持多页签、截图、保存结果复杂回归、需要留证据的测试安装命令npm install -g playwright/mcp npm install -g executeautomation/playwright-mcp-server验证是否装好npx playwright/mcp --version能打印版本号就说明 MCP Server 可用了。2.3 把模型请求 endpoint 改到 TaoToken这一步是很多同学卡住的地方。Claude Desktop 官方客户端对国内用户不太友好注册要海外手机号免费额度也容易触发限制。我的做法是把模型请求统一走 TaoToken 的 API 通道用一个 Key 管理所有模型调用省去多平台切换的麻烦。TaoToken 的 API 地址是https://taotoken.net/api官网在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end。你需要在控制台创建一个 API Key然后把它填到客户端的配置里。如果你用的是支持自定义 Base URL 的客户端比如 Cline、Continue、或者自己写的调用脚本把 Base URL 指向 TaoToken 的 API 地址Model ID 填你需要的 Claude 模型即可。这里要强调一点TaoToken 在这里扮演的是统一的 Key/API 通道不是让你去搞什么网络工具。你只需要在支持自定义 endpoint 的客户端里改一个配置项就能把请求发到统一的入口。对于团队协作来说这样管理 Key 和用量会清晰很多。如果你还没创建 Key可以去控制台页面操作https://taotoken.net/console。创建完记得复制保存Key 只显示一次。模型对话调试可以用https://taotoken.net/model-chat接入文档在https://taotoken.net/doc。3. 可复制配置Claude Desktop 挂载 Playwright MCP 与 endpoint 改写这一节给你可以直接抄的配置片段。我按 Claude Desktop 的配置路径来写其他客户端Cline、Cursor 等的 MCP 配置结构类似改一下字段名就行。3.1 Claude Desktop 的 MCP 配置文件打开 Claude Desktop进入 Settings → Developer → Edit Config会打开一个名为claude_desktop_config.json的文件。默认路径大致是macOS~/Library/Application Support/Claude/claude_desktop_config.jsonWindows%APPDATA%\Claude\claude_desktop_config.json把下面这段 JSON 粘进去{ mcpServers: { playwright: { command: npx, args: [ -y, executeautomation/playwright-mcp-server ] } } }保存后重启 Claude Desktop。重启后在聊天输入框附近应该能看到 MCP 工具图标点开能看到 Playwright 提供的一系列工具比如playwright_navigate、playwright_click、playwright_fill、playwright_screenshot等。看到这些工具说明 MCP Server 挂载成功。3.2 把模型请求指向 TaoToken如果你用的是 Claude Desktop 官方客户端它本身不直接暴露 Base URL 配置项。这时候有两个思路一是用支持自定义 endpoint 的客户端来承载 MCP比如 ClineVS Code 插件或 Continue。以 Cline 为例在设置里选择 “OpenAI Compatible” 或 “Anthropic Compatible” 提供商Base URL 填https://taotoken.net/apiAPI Key 填你在 TaoToken 控制台创建的 KeyModel ID 填对应的 Claude 模型标识。这样模型请求就走 TaoToken 通道了MCP 工具照常工作。二是如果你有自己的调用脚本直接在代码里指定 base_url。比如用 Python 的 anthropic SDKfrom anthropic import Anthropic client Anthropic( api_key你的_TaoToken_Key, base_urlhttps://taotoken.net/api ) resp client.messages.create( modelclaude-sonnet-4-20250514, max_tokens1024, messages[{role: user, content: 你好}] ) print(resp.content)注意 base_url 后面不要多加/v1具体以接入文档为准。文档地址是https://taotoken.net/doc里面有各语言 SDK 的完整示例。3.3 三件套对照表不管用哪个客户端接入时都要确认这三样东西对齐配置项值说明Base URLhttps://taotoken.net/api统一请求入口API Key控制台创建只显示一次妥善保存Model ID如claude-sonnet-4-20250514按需选择填错会报模型不存在这三件套任何一项填错都会导致请求失败。下面第五节我会把常见报错和排查方法列出来。4. 实战用提示词让 Claude 生成登录用例并本地跑通配置就绪后进入正题。我以一个典型的登录页面为例演示从自然语言描述到可运行脚本的完整流程。4.1 提示词模板在 Claude 聊天窗口里用下面这个模板描述需求。模板的关键是说清楚目标 URL、操作步骤、断言点以及你希望生成的脚本风格。请使用 Playwright MCP 工具完成以下任务并基于真实执行记录生成一份可运行的 Playwright 测试脚本TypeScript使用 playwright/test。 目标页面https://example.com/login 操作步骤 1. 打开登录页 2. 在用户名输入框填入 testuser 3. 在密码输入框填入 Test1234 4. 点击登录按钮 5. 等待页面跳转断言 URL 包含 /dashboard 6. 断言页面出现文本 欢迎回来 要求 - 使用 getByRole / getByLabel 等语义化定位器不要用 nth-child - 加上合理的等待和超时设置 - 脚本保存为 login.spec.ts发送后Claude 会调用 Playwright MCP 的工具真实打开浏览器执行这些步骤。你能在聊天记录里看到它调用了playwright_navigate、playwright_fill、playwright_click等工具每一步都有返回结果。如果某一步定位失败它会根据页面快照调整策略而不是瞎猜。4.2 生成脚本示例执行完成后Claude 会输出类似下面的脚本。注意定位器都是语义化的这是它读取了真实可访问树的结果import { test, expect } from playwright/test; test(用户登录并跳转到仪表盘, async ({ page }) { await page.goto(https://example.com/login); await page.getByLabel(用户名).fill(testuser); await page.getByLabel(密码).fill(Test1234); await page.getByRole(button, { name: 登录 }).click(); await expect(page).toHaveURL(/\/dashboard/); await expect(page.getByText(欢迎回来)).toBeVisible(); });4.3 本地执行验证把脚本保存到项目里确保项目已经初始化 Playwrightnpm init playwrightlatest然后把login.spec.ts放到tests目录运行npx playwright test login.spec.ts --headed--headed参数让你能看到浏览器实际执行过程方便确认每一步是否符合预期。如果用例通过终端会显示绿色的通过标记如果失败Playwright 会自动生成 trace 文件用npx playwright show-trace可以回放整个执行过程定位是哪一步出了问题。我实测下来用 MCP 生成的脚本首次通过率比手工写的高不少因为定位器是基于真实页面结构选的不是拍脑袋写的。当然如果页面有验证码、滑块这类反自动化机制还是需要你手动处理MCP 也绕不过去。5. 常见报错排查401、local proxy failed 与 reading choices配置和调用过程中最容易撞上几个典型报错。我把它们和排查路径整理出来你对照着看。5.1 401 Unauthorized这是最常见的。终端或客户端日志里出现401基本是 Key 的问题。排查顺序第一确认 API Key 有没有复制完整。TaoToken 控制台创建的 Key 只显示一次如果你当时没存只能重新创建一个。第二确认 Base URL 填对了。是https://taotoken.net/api不要多加斜杠或/v1具体以接入文档为准。第三确认请求头里的认证字段格式正确。Anthropic 风格是x-api-keyOpenAI 兼容风格是Authorization: Bearer key。填错字段名也会 401。5.2 local proxy failed这个报错通常出现在客户端尝试走本地代理但连不上时。如果你在客户端里配置了代理相关选项先把它关掉让请求直连 TaoToken 的 API 地址。TaoToken 本身就是统一的 API 入口不需要你再套一层本地代理。检查客户端的网络设置把 proxy 相关字段清空或设为 direct。5.3 reading choices 相关报错如果你用的是 OpenAI 兼容接口报错信息里出现reading choices或Cannot read properties of undefined (reading choices)说明返回结构和你客户端预期的格式不匹配。常见原因有两个一是 Model ID 填错了请求被路由到了不存在的模型二是客户端把 Anthropic 格式的响应按 OpenAI 格式解析了。解决办法是确认客户端的提供商类型和 Model ID 对应Anthropic 模型就用 Anthropic 兼容模式别混用。5.4 MCP 工具不出现重启 Claude Desktop 后看不到 Playwright 工具先检查claude_desktop_config.json的 JSON 格式是否合法。一个多余的逗号就会导致整个配置解析失败。可以用在线的 JSON 校验工具过一遍。另外确认npx executeautomation/playwright-mcp-server能在终端单独跑起来如果这个命令本身报错说明包没装好重新npm install -g一次。5.5 OAuth 相关报错部分客户端在首次连接时会尝试 OAuth 流程如果你看到 OAuth 相关的报错说明客户端在走它自己的账号体系而不是用你填的 API Key。这时候需要在客户端设置里明确选择 “API Key” 模式关掉 OAuth 登录选项。TaoToken 走的是 Key/API 通道不需要 OAuth 授权。6. 把生成流程沉淀成团队可复用的回归方案跑通一条登录用例只是起点。真正有价值的是把这套流程沉淀成团队能复用的回归方案。我的做法是维护一个prompts/目录里面按业务模块存放提示词模板比如login.prompt.md、checkout.prompt.md。每次页面大改后不需要手动改脚本而是重新跑一遍对应的提示词让 Claude 通过 Playwright MCP 重新生成脚本再跑一次npx playwright test验证。这样维护成本从“逐行改代码”变成“重新描述需求”对测试同学友好很多。对于需要长期跑回归的团队可以考虑用 Coding Plan 来管理模型调用额度地址是https://taotoken.net/coding-plan。它适合那种每天都要生成、调试脚本的持续编码场景比按次调用更划算。如果你只是偶尔验证一下模型输出用模型对话页面就够了https://taotoken.net/model-chat。另外提醒一句MCP 工具让模型能操作浏览器但不要把它直连到生产环境的数据库或后台。回归测试应该在独立的测试环境跑用测试账号和测试数据。这是安全底线不是可选项。最后给你一个实用技巧生成的脚本不要直接合并进主分支先在一个generated/目录里跑一段时间确认稳定后再提升为正式用例。模型生成的定位器虽然比录制工具靠谱但也不是 100% 不会出错留一个观察期能省掉很多回滚的麻烦。