用 AI+MCP 打通业务数据，自动生成高质量 Playwright 自动化测试脚本

1. 为什么 AI 直接写 Playwright 脚本总是不准你可能也遇到过这种情况把需求丢给 AI让它写一段 Playwright 自动化测试脚本结果跑起来不是选择器找不到就是接口参数对不上断言写得像猜谜。问题不在于模型不够聪明而在于它压根不知道你的业务长什么样——页面结构、接口字段、登录态、埋点参数这些信息全靠你口述模型只能靠“想象”补全准确率自然上不去。我试过把接口文档贴给模型效果会好一点但文档往往滞后字段名和真实请求对不上。真正靠谱的做法是让 AI 模型通过 MCPModel Context Protocol直接读取业务运行时的数据浏览器里真实发出的网络请求、页面 DOM、控制台日志。MCP 可以理解成给 AI 装了一组“USB 接口”模型通过标准协议调用外部工具比如驱动浏览器、抓取请求、读取文件。这样模型拿到的是一手数据而不是你转述的二手信息。这篇内容聚焦一条可复现的落地路径用 MCP 把业务数据喂给 AI 模型让它自动产出能跑的 Playwright 测试脚本。我会给出 MCP 服务端的 config.toml 骨架、TaoToken 统一 Key 与 API 通道的配置示例以及脚本生成后如何运行验证、检查断言。适合已经在写 Playwright、但被脚本维护成本拖住的测试和前端同学也适合想把 AI 接进现有测试流水线的团队。整条链路分四步准备 MCP 服务端并配置模型通道 → 让模型通过 MCP 抓取真实业务数据 → 基于数据生成 Playwright 脚本 → 本地运行并校验断言。下面按顺序拆开讲每一步都给到能直接抄的配置和命令。2. TaoToken 前置统一 Key 与 API 通道MCP 服务端要调用 AI 模型就得有一个稳定的模型入口。如果每个项目各自维护一套 Key换模型、换环境时非常容易乱。这里用 TaoToken 做统一通道一个 Key 走通对话模型和编码模型MCP 服务端只需要读环境变量不用把密钥写死在代码里。先拿到 Key。打开 https://taotoken.net/api-keys 登录后创建一个 API Key复制保存。注意这个 Key 只在创建时完整显示一次丢了就重新建一个。拿到 Key 之后在 MCP 服务端的运行环境里配置两个变量。Linux/macOS 直接 exportWindows 用系统环境变量或者项目根目录的.envexport TAOTOKEN_API_KEYsk-你的Key export TAOTOKEN_BASE_URLhttps://taotoken.net/api如果你用的是支持 OpenAI 兼容协议的 SDKBase URL 填https://taotoken.net/api即可模型名按你实际开通的填。MCP 服务端里读取这两个变量去构造请求代码里不出现明文 Key提交到仓库也安全。注意Base URL 不要带多余的路径后缀SDK 一般会自己拼/v1/chat/completions。如果你手动拼 URL确认最终请求地址是https://taotoken.net/api/v1/...这种形式。模型选择上生成测试脚本这种任务对代码理解要求高建议用编码能力强的模型。如果你要长期跑 Agent 式的脚本生成、批量维护用例可以看下 Coding Plan 的额度方案https://taotoken.net/coding-plan 。只是偶尔生成几段脚本用按量计费的 Key 就够了。配置完可以先验证通道是否通curl https://taotoken.net/api/v1/models \ -H Authorization: Bearer $TAOTOKEN_API_KEY返回模型列表就说明 Key 和通道都正常。这一步别跳过后面 MCP 报错时能快速排除是通道问题还是工具问题。3. 可复制配置MCP 服务端 config.toml 骨架MCP 服务端负责两件事一是暴露工具给模型调用打开页面、抓请求、读 DOM二是把抓到的数据整理后通过 TaoToken 通道发给模型。下面给一份config.toml骨架字段按你的项目改。[server] name playwright-monitoring transport stdio log_level info [model] # 统一走 TaoToken 通道Key 从环境变量读取 base_url https://taotoken.net/api api_key_env TAOTOKEN_API_KEY model 你的编码模型名 timeout_seconds 120 max_retries 2 [browser] headless true channel chromium viewport_width 1440 viewport_height 900 # 抓取请求时忽略静态资源减少噪音 ignore_url_patterns [ \\.(png|jpg|jpeg|gif|svg|woff2?|css)(\\?.*)?$, analytics, sentry ] [monitor] # 记录网络请求的字段 capture_request_headers true capture_request_body true capture_response_body true # 只保留业务接口按你的域名改 include_url_patterns [/api/, /orch/] max_records 200 [output] script_dir ./generated_tests language typescript几个关键点解释一下。transport stdio表示 MCP 服务端通过标准输入输出和客户端通信这是本地开发最省事的方式。api_key_env指向环境变量名而不是直接写 Key避免泄露。ignore_url_patterns和include_url_patterns是过滤噪音的核心不配的话模型会被一堆图片、埋点请求淹没生成的脚本里全是无关断言。如果你用 Cursor 作为 MCP 客户端在 Cursor 的 MCP 设置里加一段{ mcpServers: { playwright-monitoring: { type: stdio, command: uv, args: [ --directory, /你的路径/mcp_playwright/, run, main.py ], env: { TAOTOKEN_API_KEY: sk-你的Key, TAOTOKEN_BASE_URL: https://taotoken.net/api } } } }Windows 路径记得用双反斜杠转义。配置保存后重启客户端MCP 面板里能看到playwright-monitoring处于 connected 状态就对了。如果显示 failed先看日志里是不是TAOTOKEN_API_KEY没读到这是最常见的坑。4. 让模型读取业务数据并生成脚本MCP 服务端起来之后模型就能调用工具了。整个流程分两段先抓数据再生成脚本。第一段让模型打开目标页面并触发业务操作。你可以直接对模型说“用 playwright-monitoring 打开登录页用测试账号登录然后进入订单列表页把列表接口的请求和响应抓下来。”模型会依次调用 MCP 暴露的工具browser_navigate、browser_click、browser_type、get_network_records。抓到的请求会以结构化 JSON 返回包含 URL、method、headers、request body、response body。这里有个实用技巧如果你的项目里已经有封装好的 Playwright 工具类比如统一的登录方法、请求等待方法把文件路径告诉模型让它先读一遍再生成。这样产出的脚本会复用你现有的封装而不是自己造一套。你可以说“先读tests/utils/auth.ts和tests/utils/api.ts理解我们的封装风格再生成脚本。”第二段生成脚本。把抓到的接口数据作为上下文让模型输出 Playwright 测试文件。一个典型的生成结果长这样import { test, expect } from playwright/test; import { login } from ../utils/auth; test.describe(订单列表接口, () { test(登录后拉取订单列表并校验字段, async ({ page }) { await login(page); const [response] await Promise.all([ page.waitForResponse( (res) res.url().includes(/api/order/list) res.status() 200 ), page.goto(/order/list), ]); const body await response.json(); expect(body.code).toBe(0); expect(Array.isArray(body.data.items)).toBeTruthy(); expect(body.data.items.length).toBeGreaterThan(0); const first body.data.items[0]; expect(first).toHaveProperty(orderId); expect(first).toHaveProperty(amount); expect(typeof first.amount).toBe(number); }); });注意断言部分。模型是根据真实响应体生成的所以字段名、类型、层级都对得上而不是瞎猜。waitForResponse的 URL 匹配串也是从抓到的真实请求里提取的比手写靠谱。生成后把文件落到generated_tests/目录。如果一次生成多个用例建议让模型按接口分组每个接口一个test.describe方便后续维护。5. 运行验证与断言检查脚本生成完不能直接信必须跑一遍。先装依赖再执行npm install -D playwright/test npx playwright install chromium npx playwright test generated_tests/ --reporterlist跑完看结果。如果全绿说明选择器和接口匹配都对。如果有失败重点看三类报错第一类waitForResponse超时。多半是 URL 匹配串写得太死比如带了具体的订单 ID。改成用includes(/api/order/list)这种宽松匹配或者用正则。第二类断言字段不存在。说明模型抓到的响应和你运行时的不一致可能是登录态不同导致返回了不同的数据结构。这时候回到 MCP用相同的登录态重新抓一次把新数据喂给模型重新生成。第三类login方法找不到。这是封装路径没对上检查 import 路径或者让模型读一遍你真实的工具类再改。断言检查这块建议加一层“软校验”先跑一次只打印响应体确认结构再补断言。可以在脚本里临时加console.log(JSON.stringify(body, null, 2));确认字段无误后再换成expect。这样比反复跑失败用例快得多。跑通之后把generated_tests/接进 CI。Playwright 原生支持--shard分片和 HTML 报告团队里谁改了接口跑一遍就能发现脚本失效比人工维护用例省事。6. 常见报错排查MCP 连接失败日志报api_key_env not found环境变量没传到 MCP 进程。Cursor 的配置里要在env字段显式传或者确认系统环境变量在启动客户端前已经生效。Windows 改完环境变量要重启客户端。抓不到网络请求检查include_url_patterns是否匹配你的接口域名。如果接口是相对路径/api/...pattern 写/api/就行如果是完整域名要写全。另外确认headless true时页面确实触发了请求有些懒加载在无头模式下行为不同可以临时改headless false观察。模型生成的脚本用了不存在的选择器说明抓取阶段没拿到 DOM 快照。让模型在生成前先调用get_page_snapshot或类似工具把页面结构也作为上下文。只靠接口数据生成 UI 操作步骤是不够的。请求返回 401/403登录态没带上。MCP 抓取时用的浏览器上下文和生成脚本运行时的是两个环境。确保脚本里的login方法能复现抓取时的登录流程token 存储位置localStorage/cookie要一致。TaoToken 通道返回 429请求频率超了。MCP 服务端里把max_retries设成 2并在重试之间加退避。批量生成脚本时不要并发太高串行跑更稳。生成的断言太脆弱比如断言了具体的时间戳或自增 ID。在提示词里明确要求“不要断言动态字段只校验结构和类型”或者生成后人工过一遍把易变字段换成expect.any(Number)这类宽松匹配。排查顺序建议先确认 MCP 连接和 Key 通道再确认数据抓取是否完整最后才看生成脚本的质量。大部分问题出在前两步而不是模型本身。如果你在接入过程中卡在 Key 配置或通道报错直接看接入文档https://taotoken.net/doc 里面有各语言 SDK 的完整示例。想先验证模型对业务数据的理解能力可以到模型对话页面试几轮https://taotoken.net/chat 把抓到的接口 JSON 贴进去看它能不能准确说出字段含义。长期做脚本生成和 Agent 编排的团队Coding Plan 的额度更划算https://taotoken.net/coding-plan 。