1. 为什么我放弃了手写 Playwright 脚本
前端回归测试这件事，写过的人都知道痛点在哪。一个表单提交按钮改了样式，你得跑一遍完整用例；一个路由守卫逻辑调整了，又得重新验证登录跳转。用 Playwright 或 Puppeteer 写脚本当然能覆盖，但每次小改动都要改选择器、调等待时间，维护成本比写业务代码还高。
我试过用纯脚本跑端到端，一个中型项目维护了 40 多个测试文件，后来重构一次 UI，三分之一的用例全红，排查选择器失效花了大半天。这种投入产出比在快速迭代的项目里很难接受。
Claude Code + Chrome MCP 这套组合解决的就是这个问题。Chrome MCP 基于 Chrome DevTools Protocol（CDP）直接控制浏览器，Claude Code 负责理解你的自然语言指令并翻译成浏览器操作。你不需要写page.click('#submit')，直接说"打开登录页，填入测试账号，点击登录，检查是否跳转到首页"就行。它支持打开页面、填写表单、点击元素、读取控制台日志、检查 DOM 结构、截图等操作，覆盖了端到端测试的常见动作。
适合谁用？需要快速验证页面交互的开发者、想降低自动化测试门槛的团队、以及临时要做一轮回归检查但不想写脚本的场景。下面我把从环境准备到跑通第一条用例的完整链路拆开讲，配置可以直接复制。
2. TaoToken 前置：把模型接入这一步做稳
Claude Code 本身是个 CLI 工具，它需要调用模型来完成指令理解和代码生成。如果你直接用官方渠道，网络和额度问题会卡住很多人。TaoToken 在这里的角色是提供一个稳定的 API 接入层，让你把 Claude Code 的模型请求指向可用的端点。
先拿到 API Key。访问 https://taotoken.net/api-keys 注册后在控制台创建密钥，格式通常是sk-开头的一串字符。这个 Key 后面要写进 Claude Code 的环境变量里。
然后确认你的接入地址。TaoToken 的 API 端点是https://taotoken.net/api，注意这里不要加 UTM 参数，直接用于程序调用。如果你在浏览器里访问官网了解产品，可以用 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= 这个带追踪的链接，但代码里配置的 base URL 必须是干净的 API 地址。
注意：API Key 不要硬编码在会提交到 Git 的文件里。用环境变量或者本地
.env文件管理，.gitignore里加上对应条目。
配置方式是在 Claude Code 的 settings.json 里指定模型端点和密钥。这个文件的位置后面会讲。先把 Key 准备好，下一步我们装工具。
3. 可复制配置：Chrome MCP + settings.json 骨架
3.1 环境检查
Node.js 版本必须 v18 及以上，低版本跑不了 chrome-devtools-mcp。先确认：
node -v npm -v如果 node 低于 18，去官网升级。Chrome 浏览器也需要装好，MCP 会调用本地的 Chrome 实例。
3.2 安装 Claude Code
npm install -g @anthropic-ai/claude-code装完后验证：
claude --version能输出版本号就说明 CLI 可用了。
3.3 添加 Chrome MCP
这是最关键的一步。执行：
claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest参数解释一下：chrome-devtools是 MCP 服务名，-s user表示作用域是当前用户级别，--后面的npx chrome-devtools-mcp@latest是实际启动命令。执行成功后 Claude Code 就知道有这个 MCP 服务可以调用。
3.4 settings.json 配置模型接入
Claude Code 的配置文件在~/.claude/settings.json（Linux/Mac）或%USERPROFILE%\.claude\settings.json（Windows）。没有就新建，写入：
{ "env": { "ANTHROPIC_BASE_URL": "https://taotoken.net/api", "ANTHROPIC_API_KEY": "sk-你的密钥" } }ANTHROPIC_BASE_URL指向 TaoToken 的 API 端点，ANTHROPIC_API_KEY填你刚才创建的 Key。保存后 Claude Code 启动时会读取这个配置。
如果你更习惯用环境变量，也可以在 shell 里 export：
export ANTHROPIC_BASE_URL="https://taotoken.net/api" export ANTHROPIC_API_KEY="sk-你的密钥"两种方式选一种就行，settings.json 的好处是持久化，不用每次开终端都设。
4. 验证链路：从启动到跑通一条用例
4.1 启动 Claude Code
claude进入交互界面后，它会加载你配置的模型端点和 MCP 服务。如果配置有问题，这里会报连接错误。
4.2 确认 MCP 已加载
在 Claude Code 里输入：
/mcp应该能看到chrome-devtools出现在服务列表里，状态是 connected。如果没有，检查前面的claude mcp add命令是否执行成功。
4.3 执行第一条测试指令
直接输入自然语言：
打开 Chrome 浏览器，访问 bing.com，等待页面加载完成后截取全屏截图正常情况下，Chrome 会被自动拉起，页面加载后截图保存到本地。你可以在终端看到操作日志，截图路径也会打印出来。
这一步跑通说明整条链路是通的：Claude Code 收到指令 → 调用模型理解 → 通过 MCP 发送 CDP 命令 → Chrome 执行 → 结果返回。
4.4 跑一条真实用例
截图只是验证连通性，真正有用的是交互测试。试这条：
打开 Chrome，访问 https://example.com/login，在用户名输入框填入 testuser，密码框填入 testpass123，点击登录按钮，等待 3 秒，检查页面是否出现"欢迎"文字，并截图保存如果页面有对应的表单结构，Claude Code 会自动定位元素、填入内容、触发点击、等待跳转、检查文本。整个过程你只写了一句中文，没有选择器，没有等待逻辑。
实测下来，对于结构清晰的页面，这套流程的首次成功率很高。遇到动态加载的元素，可以在指令里加"等待元素出现后再操作"来增加稳定性。
5. 常见报错排查
5.1 MCP 服务连不上
报错MCP server chrome-devtools failed to start。先手动跑一下启动命令：
npx chrome-devtools-mcp@latest看是否报错。常见原因是 Node 版本太低，或者 npx 缓存损坏。清缓存：
npm cache clean --force再重新添加 MCP。
5.2 Chrome 没有自动打开
检查 Chrome 是否在默认路径。Linux 下如果用的是 snap 安装的 Chromium，路径可能不对。可以手动指定 Chrome 可执行文件路径，在 MCP 启动参数里加--executablePath。
另外确认没有其他进程占用调试端口。Chrome MCP 默认会用一个调试端口启动独立实例，如果已有 Chrome 开着且占用了端口，会冲突。关掉现有 Chrome 再试。
5.3 模型请求 401 或超时
401 通常是 API Key 错了或者没生效。检查settings.json里的 Key 有没有多余空格，以及ANTHROPIC_BASE_URL是不是写成了带 UTM 的官网地址。必须是https://taotoken.net/api，不能带查询参数。
超时的话看网络能不能通到taotoken.net。如果公司网络有限制，换个网络环境试。
5.4 元素定位失败
Claude Code 找不到输入框或按钮。这种情况在指令里补充元素特征，比如"找到 placeholder 为'请输入用户名'的输入框"，比单纯说"用户名输入框"更准。也可以先让它输出页面 DOM 结构，确认元素存在后再操作。
5.5 截图保存路径找不到
默认保存在当前工作目录。如果你在某个项目目录下启动 Claude Code，截图就在那里。指令里可以指定绝对路径，比如"截图保存到 /tmp/test.png"。
6. 把这条链路用起来
配置跑通之后，日常用法就很直接了。改完代码，在 Claude Code 里说一句"打开本地 3000 端口，走一遍注册流程，检查有没有报错"，它就会自动操作浏览器并返回结果。比切到终端跑npx playwright test再等报告快得多。
几个实用技巧。第一，把常用指令存成片段，比如登录流程、下单流程，每次改一下参数就能复用。第二，让它同时检查控制台日志，指令里加"如果有 console error 就列出来"，能抓到不少隐藏问题。第三，截图对比可以用在视觉回归上，虽然不如专业工具精细，但临时验证够用。
如果你要长期在项目里跑这套流程，建议了解一下 Coding Plan，https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，额度上更适合高频调用。模型对话的入口在 https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，想先试试模型理解能力可以用这个。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，里面有完整的参数说明。
回到测试本身。Chrome MCP 的价值不是替代 Playwright，而是覆盖那些"写脚本太重、手动点太累"的中间场景。快速验证、临时回归、探索性测试，这几类需求用它刚好。真正要进 CI 的稳定用例，还是建议沉淀成脚本。两者配合，日常开发会舒服很多。
