1. 从手写脚本到自然语言Playwright MCP 到底解决了什么如果你做过 Web 自动化测试大概率经历过这样的循环打开 Playwright 文档翻 API写page.click()、page.fill()跑一遍发现选择器失效再改再跑。一个简单的「搜索并翻页截图」流程写加调可能要半小时。而 Playwright MCP 做的事情是把这套流程交给大模型来驱动——你用中文描述操作模型通过 MCP 协议调用浏览器工具实时完成点击、输入、截图甚至把验证过的操作固化成可重复运行的脚本。Playwright MCP 是微软官方维护的 Model Context Protocol 服务端它把 Playwright 的浏览器控制能力封装成一组标准工具navigate、click、type、screenshot 等任何支持 MCP 的客户端Claude Code、Cline、Cursor 等都能直接调用。适合谁三类人最受益一是测试经验不多但想快速验证页面功能的前端开发者二是已经在用 Claude Code 写代码、想把「验证 UI」这一步也交给 AI 的工程师三是受限于本地网络环境、调用模型时频繁遇到local proxy failed报错的开发者——这篇会重点讲怎么把 MCP 客户端的 Base URL 改到 TaoToken让整条链路稳定跑通。我试过在本地直接跑 Playwright MCP浏览器能起来但模型请求经常卡在代理层。后来把 Claude Code 的接入地址换成 TaoToken 的 API 端点问题才彻底消失。下面按「装 MCP → 改 Base URL → 验证请求 → 排错」的顺序一步步来。2. 前置准备装好 Playwright MCP 并统一浏览器缓存在动模型配置之前先把 Playwright MCP 本身装利索。这一步和模型无关但缓存没设好会重复下载约 1GB 的 Chromium浪费时间。2.1 设置全局浏览器缓存路径macOS 下建议先固定缓存目录避免每次在项目里重新下载浏览器。编辑 shell 配置# 编辑配置文件 vim ~/.zshrc # 在文件末尾添加把 YOUR_HOME 换成你的实际用户名 export PLAYWRIGHT_BROWSERS_PATH/Users/YOUR_HOME/.cache/ms-playwright # 保存退出后重新加载 source ~/.zshrc # 验证 echo $PLAYWRIGHT_BROWSERS_PATH输出应该是/Users/YOUR_HOME/.cache/ms-playwright。Windows 用户对应设置系统环境变量即可路径换成C:\Users\你的用户名\.cache\ms-playwright。2.2 安装 MCP 包与浏览器驱动固定版本能避免上游更新导致的兼容问题这里用 1.55.0# 安装 Playwright MCP 包固定版本 npx playwright/mcp1.55.0 # 安装 Chromium 驱动走共享缓存 npx playwright install chromium # 把 MCP 工具注册到 Claude Code claude mcp add playwright npx playwright/mcp1.55.02.3 确认 MCP 已连接npx playwright --version # 输出Version 1.55.0 claude mcp list | grep playwright # 输出playwright: npx playwright/mcp1.55.0 - ✓ Connected看到✓ Connected说明 MCP 服务端已经就绪。但此时模型请求走的还是默认通道如果你的网络环境对模型 API 有限制下一步的 Base URL 改造就是关键。3. 把 Claude Code 的 Base URL 改到 TaoToken可复制配置这一步是整篇的核心。Claude Code 默认会去请求 Anthropic 官方端点在部分网络环境下会触发local proxy failed或连接超时。TaoToken 提供了兼容 Anthropic 协议的接入端点把 Base URL 和 Key 换掉即可。3.1 获取 API Key先到 TaoToken 控制台创建密钥控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentconsoleAPI Keys 管理https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentapi-keys创建后复制以sk-开头的 Key只显示一次记得存好。3.2 配置 Claude Code 的 settings.jsonClaude Code 读取的是用户级配置文件~/.claude/settings.json。把下面这段 JSON 写进去路径和字段名保持原样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-5-20250929 } }三个字段的作用要分清ANTHROPIC_BASE_URL指向 TaoToken 的 API 端点注意这里不带 UTM 参数就是纯 API 地址ANTHROPIC_AUTH_TOKEN填你刚创建的 KeyANTHROPIC_MODEL指定模型 ID按你账号可用的模型填。3.3 如果你用 Codex改 auth.json部分开发者同时用 Codex CLI它的配置在~/.codex/auth.json结构不同但三件套一样{ base_url: https://taotoken.net/api, api_key: sk-你的TaoToken密钥, model: claude-sonnet-4-5-20250929 }Base URL、Key、Model ID 这三样必须成套出现缺一个都会在请求阶段报错。改完保存重启 Claude Code 让配置生效。4. 验证请求让自然语言驱动浏览器跑通一次配置改完不能只看文件得实际发一次请求确认链路通。下面用「访问百度并截图」这个最小案例验证。4.1 基础验证导航加截图在 Claude Code 对话框输入访问 https://www.baidu.com 并截图正常情况你会看到类似输出⏺ playwright - Navigate to a URL (MCP)(url: https://www.baidu.com) ⏺ playwright - Take a screenshot (MCP)(filename: baidu_homepage.png, fullPage: true) ⏺ 已成功访问百度首页并截图 截图已保存到.../.playwright-mcp/baidu_homepage.png如果这一步成功说明 MCP 工具调用和模型请求两条链路都通了。截图文件会落在项目下的.playwright-mcp/目录。4.2 进阶验证搜索加翻页再试一个多步操作确认模型能连续调用工具访问 https://www.baidu.com在搜索框输入 pets点击搜索按钮点击第2页截取全页面截图模型会依次调用Navigate、Type text、Click、Take a screenshot中间还会读取页面结构定位元素。实测下来只要页面结构不是特别动态这套流程基本一次过。4.3 固化成可重复脚本验证通过后可以让模型把刚才的操作转成 JS 脚本把上述的逻辑整成 js playwright 脚本可以重复跑请自行验证脚本是否正确模型会生成baidu-pets-search.js、package.json等文件并自己跑一遍验证。之后你就能用node baidu-pets-search.js重复执行不再依赖对话。5. 常见报错排查401、local proxy failed、reading choices配置过程中最容易踩的坑集中在几个报错上逐个对照排查。5.1 401 UnauthorizedError: 401 Unauthorized原因通常是 Key 填错或没生效。检查~/.claude/settings.json里的ANTHROPIC_AUTH_TOKEN是否完整有没有漏掉sk-前缀以及是否重启了 Claude Code。如果 Key 是在别的环境创建的确认它没有过期或被删除。5.2 local proxy failedError: local proxy failed / connect ECONNREFUSED这是最常见的网络层报错本质是客户端还在往默认端点发请求。确认ANTHROPIC_BASE_URL已经改成https://taotoken.net/api并且没有多余的空格或换行。改完必须重启客户端环境变量在进程启动时读取热改不生效。5.3 reading choices of undefinedTypeError: Cannot read properties of undefined (reading choices)这个报错说明返回体结构不符合预期通常是 Base URL 指向了不兼容的端点或者模型 ID 写错导致服务端返回了错误格式。核对ANTHROPIC_MODEL是否为你账号下真实可用的模型 IDBase URL 是否严格是https://taotoken.net/api。5.4 OAuth 相关报错Error: OAuth token expired / invalid_grant如果你之前登录过官方账号本地可能残留 OAuth 凭证和新的 Token 配置冲突。清掉旧的凭证缓存通常在~/.claude/下的凭证文件只保留 settings.json 里的 Token 配置。5.5 MCP 工具没被调用如果模型回复了文字但没有触发playwright - Navigate这类工具调用先跑claude mcp list确认 playwright 是✓ Connected。没连接就重新执行claude mcp add playwright npx playwright/mcp1.55.0。另外确认 prompt 里明确提到了「访问」「截图」这类动作词模型才会判断需要调用工具。6. 把这条链路用起来从验证到长期编码跑通之后你可以把这套组合用在日常开发里。短期验证类任务比如「打开本地 dev server 检查登录流程」直接用自然语言在 Claude Code 里描述MCP 会实时驱动浏览器完成截图留档。需要长期维护的测试用例就让模型把验证过的操作固化成脚本纳入 CI。如果你打算把这类 AI 驱动的编码和测试流程常态化Coding Plan 比按量调用更划算适合高频使用 Agent 的场景模型对话体验https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentmodelsCoding Plan 订阅https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentcoding-plan接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_contentdoc一个实用技巧每次让模型生成脚本后别急着删掉对话记录。把「自然语言描述 → MCP 验证 → 脚本固化」这三步的 prompt 存成一个模板下次换页面时只改描述部分效率会高很多。另外截图目录建议加进.gitignore避免测试产物污染仓库。