使用Playwright MCP实现UI自动化测试：从环境搭建到实战案例（TaoToken统一Key接入版）

1. 为什么我放弃了纯脚本转向 Playwright MCP 做 UI 自动化UI 自动化测试最让人头疼的不是写脚本而是脚本写完就开始腐烂。页面改一个 class 名昨天还绿的用例今天就红了产品经理临时加个弹窗定位器全部失效。我维护过一套三百多条的 Playwright 用例每周光修定位器就要花掉大半天。Playwright MCP 的出现改变了这个局面——它把浏览器操作能力封装成 MCP 工具让大模型通过自然语言驱动浏览器你描述测试意图AI 负责决策每一步点击和输入。Playwright MCP 是什么简单说它是 Playwright 官方生态里的一个 MCP 服务器把navigate、click、fill、snapshot这些浏览器动作暴露成标准工具接口。任何支持 MCP 协议的客户端Cursor、VS Code、Claude Desktop都能调用它。适合谁适合已经会用 Playwright 写基础脚本、但被定位器维护折磨的测试工程师也适合想让 AI 帮忙跑回归的研发同学。但这里有个现实问题MCP 客户端背后要接大模型模型调用需要 API Key。如果你同时用 Cursor 写代码、用 Claude Desktop 跑测试、又想在脚本里调模型三套 Key 三套计费管理起来很烦。我试过用 TaoToken 的统一 Key 把这几条通道合并一个 Key 走所有模型请求配置一次到处能用。下面从环境搭建讲到跑通一条登录用例配置骨架可以直接复制。2. 前置准备TaoToken 统一 Key 与 MCP 环境2.1 为什么需要统一 KeyPlaywright MCP 本身不调模型它只负责浏览器操作。真正做决策的是 MCP 客户端背后的大模型。当你在 Cursor 里让 AI 执行测试登录功能Cursor 会把页面快照发给模型模型返回下一步动作Cursor 再调用 Playwright MCP 执行。这条链路里模型调用是刚需。TaoToken 的作用是提供一个统一的 API 通道兼容 OpenAI 风格的接口格式。你拿到一个 Key就能在 Cursor、Claude Desktop、以及自己写的 LangChain 脚本里共用。官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_end 注册后在控制台创建 API Key 即可。API 基础地址是 https://taotoken.net/api 注意这个地址不带查询参数直接作为 base_url 使用。2.2 环境依赖清单开始之前确认你的机器上有这些依赖项版本要求检查命令Node.jsv18 及以上node -vnpm随 Node 附带npm -vPython3.10 及以上可选python --versionMCP 客户端Cursor / VS Code / Claude Desktop任选其一Node.js 版本建议 18 以上因为 Playwright MCP 最新版用到了较新的 ESM 特性。如果你还在用 Node 16升级一下能省掉很多莫名其妙的报错。2.3 安装 Playwright MCP 服务器全局安装 MCP 服务器和浏览器驱动npm install -g playwright/mcplatest npx playwright install chromium如果你只需要 Chromium 做测试不用装全部三个浏览器省时间和磁盘。装完后验证一下npx playwright/mcplatest --help能看到参数列表说明安装成功。国内网络环境下如果playwright install卡住可以设置镜像set PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright npx playwright install chromium3. 可复制配置MCP 客户端接入 TaoToken 通道3.1 Cursor 配置骨架在 Cursor 的 MCP 设置里添加 Playwright 服务器同时把模型通道指向 TaoToken。Cursor 的模型配置在 Settings 的 Models 面板填入{ openai.apiKey: 你的TaoToken Key, openai.baseUrl: https://taotoken.net/api }MCP 服务器配置部分{ mcpServers: { playwright: { command: npx, args: [playwright/mcplatest, --headless], env: { BROWSER: chromium } } } }--headless参数让浏览器在后台跑调试阶段可以先去掉看着浏览器一步步操作更直观。3.2 Claude Desktop 配置找到 Claude Desktop 的配置目录编辑claude_desktop_config.json{ mcpServers: { playwright: { command: npx, args: [playwright/mcplatest], env: { BROWSER: chromium, PLAYWRIGHT_HEADLESS: false } } } }Claude Desktop 的模型通道需要在应用内设置里配置自定义 API 端点填入 TaoToken 的 base_url 和 Key。这样 Claude 做决策、Playwright 做执行两条链路都走通了。3.3 脚本方式接入LangChain 示例如果你想把 MCP 集成到自己的测试框架里用 LangChain 的 MCP 适配器import asyncio from langchain_mcp_adapters.client import MultiServerMCPClient from langchain_openai import ChatOpenAI from langchain.agents import AgentExecutor, create_tool_calling_agent from langchain_core.prompts import ChatPromptTemplate async def run_ui_test(): client MultiServerMCPClient({ playwright: { command: npx, args: [playwright/mcplatest, --headless], transport: stdio } }) tools await client.get_tools() llm ChatOpenAI( modelgpt-4o, temperature0, base_urlhttps://taotoken.net/api, api_key你的TaoToken Key ) prompt ChatPromptTemplate.from_messages([ (system, 你是UI自动化测试工程师使用Playwright工具操作浏览器。每步操作前先获取页面快照确认元素存在再操作。), (human, {input}) ]) agent create_tool_calling_agent(llm, tools, prompt) executor AgentExecutor(agentagent, toolstools, verboseTrue) result await executor.ainvoke({ input: 打开 https://example.com/login用 testexample.com / 123456 登录验证是否跳转到 dashboard }) print(result[output]) asyncio.run(run_ui_test())这段代码的关键点base_url指向 TaoToken 的 API 地址api_key填你创建的 Key。模型选gpt-4o是因为它在工具调用上比较稳你也可以换成其他支持的模型。4. 验证请求跑通一条登录用例并检查通道4.1 启动 MCP 服务配置写好后重启客户端。在 Cursor 里打开 MCP 面板应该能看到playwright服务器状态是绿色。如果显示红色点开看错误日志通常是npx路径问题或者 Node 版本不对。手动验证 MCP 服务器能独立启动npx playwright/mcplatest --headless --port 8931看到监听端口的输出就说明服务本身没问题。4.2 执行登录测试指令在 Cursor 的对话窗口输入请使用 Playwright 工具测试登录页面 https://example.com/login。步骤1) 打开页面 2) 在用户名输入框填入 testexample.com 3) 在密码框填入 123456 4) 点击登录按钮 5) 检查页面是否出现 dashboard 元素。每步操作后报告当前状态。AI 会依次调用browser_navigate、browser_snapshot、browser_type、browser_click等工具。你可以在 Cursor 的工具调用面板看到每一步的实际参数和返回结果。4.3 检查请求日志确认通道生效这是最关键的一步——确认模型请求真的走了 TaoToken 通道。有两种检查方式方式一在 TaoToken 控制台的请求日志页面看是否有对应的模型调用记录。每次 AI 决策都会产生一条请求包含时间戳、模型名、token 消耗量。方式二在脚本模式下打印请求详情import httpx def check_channel(): resp httpx.post( https://taotoken.net/api/v1/chat/completions, headers{Authorization: Bearer 你的TaoToken Key}, json{ model: gpt-4o, messages: [{role: user, content: ping}], max_tokens: 5 }, timeout30 ) print(状态码:, resp.status_code) print(响应:, resp.json()[choices][0][message][content]) check_channel()返回 200 且内容正常说明 Key 和通道都没问题。如果返回 401检查 Key 是否复制完整返回 404检查 base_url 是否写成了https://taotoken.net/api不要多加/v1SDK 会自动补。4.4 成功结果长什么样跑通后你会看到类似这样的输出[Step 1] navigate - https://example.com/login ✓ [Step 2] snapshot - 发现 username 输入框 (idusername) ✓ [Step 3] type - username testexample.com ✓ [Step 4] type - password 123456 ✓ [Step 5] click - 登录按钮 ✓ [Step 6] snapshot - 检测到 .dashboard 元素 ✓ 测试通过登录成功并跳转到仪表盘整个过程不需要你写一行定位器代码AI 根据页面快照自己判断该操作哪个元素。5. 本篇常见错误排查5.1 MCP 服务器启动失败报错Error: Cannot find module playwright/mcp说明全局安装没生效。检查npm root -g路径是否在系统 PATH 里。Windows 上常见问题是 npm 全局目录没加到环境变量。解决方式是用npx代替全局命令npx 会自动下载。5.2 浏览器启动超时报错browserType.launch: Timeout 30000ms exceeded通常是 Chromium 没装好。重新执行npx playwright install chromium如果下载慢就设镜像。另一个原因是系统缺少 Chromium 依赖库Linux 上跑npx playwright install-deps chromium补依赖。5.3 模型请求 401 或超时401 基本都是 Key 问题。确认三件事Key 有没有多余空格、base_url 是不是https://taotoken.net/api、请求头是不是Bearer格式。超时的话检查网络能不能访问到 API 地址用 curl 测一下curl -X POST https://taotoken.net/api/v1/chat/completions \ -H Authorization: Bearer 你的Key \ -H Content-Type: application/json \ -d {model:gpt-4o,messages:[{role:user,content:hi}],max_tokens:5}5.4 快照信息丢失导致 AI 误判Playwright MCP 返回的是精简后的可访问性树快照不是完整 DOM。如果页面用了大量自定义组件没有 ARIA 属性AI 可能找不到元素。解决办法是在关键元素上加data-testid或aria-label或者在指令里明确告诉 AI 元素的特征比如登录按钮是一个 typesubmit 的 button 元素。5.5 元素定位不稳定AI 倾向于用文本内容定位页面文案一改就失效。建议在测试环境给关键交互元素加稳定的data-testid然后在系统提示词里引导 AI 优先使用 testid 定位。比如在 prompt 里加一句优先使用>test_cases [ 测试登录功能账号 testexample.com / 123456, 测试搜索功能搜索关键词 playwright验证结果数大于 0, 测试购物车添加一件商品后检查数量变为 1 ] async def run_all(): for case in test_cases: result await executor.ainvoke({input: case}) print(f[{case[:20]}] - {result[output][:100]})配合 TaoToken 的请求日志你能清楚看到每个用例消耗了多少 token哪些用例的模型调用次数异常多通常意味着页面结构复杂或 AI 在反复试错。这些数据反过来帮你优化页面可访问性。如果你主要用 Cursor 做开发建议把 Coding Plan 也用起来编码和测试走同一个 Key省去切换配置的麻烦。API Key 在控制台的 API Keys 页面管理接入文档在 doc 页面有完整的参数说明。模型对话功能可以快速验证 Key 是否生效不用写代码就能测通道。最后提醒一点MCP 驱动测试适合探索性测试和回归验证但不适合替代精确的断言逻辑。关键业务路径还是建议保留传统 Playwright 脚本做硬断言MCP 用来做补充覆盖和快速验证。两者结合才是效率最高的方案。