1. 为什么要在 Trae 里接 Chrome MCP 做端到端验证
浏览器自动化测试最烦的从来不是写断言，而是「环境搭不起来」。Selenium 要配 driver，Playwright 要装浏览器内核，Puppeteer 要处理版本对齐，等你把环境跑通，测试用例还没写一行。Chrome MCP 换了个思路：它把已经装好的 Chrome 浏览器本身变成一个 MCP Server，Trae 作为 MCP 客户端直接调用浏览器能力，导航、点击、输入、截图、抓网络请求全都能做，不用再单独维护一套 driver。
Chrome MCP 全称是 Chrome Model Context Protocol Server，本质是一个 Chrome 扩展加一个本地桥接服务。扩展负责在浏览器里执行动作，桥接服务把浏览器能力暴露成 MCP 协议接口，Trae 通过settings.json里的mcpServers配置连上这个接口，就能在对话里让 AI 直接操作浏览器。它适合三类人：需要端到端验证 Web 页面的前端开发者、想给 AI Agent 加浏览器操作能力的工具党、以及不想折腾 driver 版本但要做 UI 回归的测试同学。
这篇按「装桥接 → 装扩展 → 配 Trae → 跑一次点击加断言」的顺序走，每一步都给可复制的命令和配置。中间会顺带说清楚 TaoToken 的统一 Key 通道怎么接进来，让 Trae 里的模型调用和 MCP 工具调用走同一套凭证，省得东一个 Key 西一个 Key。
2. 前置准备：Node、Chrome 与 TaoToken 统一通道
先把三样东西备齐。Node.js 建议 18 或更高，低版本跑桥接会报fetch is not defined之类的错。Chrome 用你日常那个就行，不用单独装测试版。Trae IDE 装好并登录。
TaoToken 在这里的角色是统一模型通道。Trae 里不管是让模型规划测试步骤，还是让模型根据截图判断元素状态，都要调模型。与其在 Trae、脚本、CI 里各配一份 Key，不如统一走 TaoToken 的 API 通道，一个 Key 覆盖对话和 coding 场景。官网入口在 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content= ，注册后在控制台生成 Key。
拿 Key 的路径是：进控制台 → API Keys → 新建 Key。控制台地址 https://taotoken.net/console?utm_source=taotoken_aicg_blog_end&utm_content=console&utm_campaign=rewrite ，Key 管理页 https://taotoken.net/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api-keys&utm_campaign=rewrite 。生成后复制保存，后面 Trae 的模型配置里会用到。
注意：Key 只显示一次，丢了只能重建。别把 Key 直接写进会提交到 Git 的
settings.json，用环境变量或本地私有配置文件。
API 基础地址是 https://taotoken.net/api ，不带任何查询参数。这个地址在 Trae 的模型 provider 配置里填，和 MCP 的本地地址是两回事，别混。
3. 可复制配置：桥接安装、扩展加载与 settings.json 骨架
3.1 安装 mcp-chrome-bridge
桥接工具的作用是让 Chrome 能作为 MCP Server 被 Trae 访问。全局装：
npm install -g mcp-chrome-bridge装完验证一下版本，能打印出来就说明 PATH 没问题：
mcp-chrome-bridge --version如果提示command not found，检查 npm 全局 bin 目录有没有进 PATH。macOS/Linux 一般是npm config get prefix下的bin，Windows 是%APPDATA%\npm。
3.2 加载 Chrome 扩展
去 Chrome MCP Server 的 release 页下载扩展包并解压。打开 Chrome，地址栏输入chrome://extensions/，右上角打开「开发者模式」，点「加载已解压的扩展程序」，选中解压出来的目录。
加载成功后把扩展固定到工具栏，点开扩展面板，依次点「连接」和「重新初始化」，等两个状态都变成已完成。这一步做完，本地会起一个 MCP 服务，默认监听http://127.0.0.1:12306/mcp。
3.3 Trae 的 settings.json 配置骨架
Trae 的 MCP 配置写在settings.json里。打开 Trae 设置，找到 MCP 配置入口，填入下面这段骨架：
{ "mcpServers": { "chrome": { "url": "http://127.0.0.1:12306/mcp" } } }如果你用的是 streamable 传输模式，键名可以写成streamable，url 不变：
{ "mcpServers": { "streamable": { "url": "http://127.0.0.1:12306/mcp" } } }同时把模型通道配成 TaoToken，让 Trae 的对话和 MCP 工具调用走统一 Key。模型 provider 的 base URL 填https://taotoken.net/api，Key 填你在控制台生成的那串。这样 Trae 里模型推理和浏览器操作是两条独立链路，但凭证统一。
配置项对照表：
| 配置项 | 值 | 说明 |
|---|---|---|
| mcpServers.chrome.url | http://127.0.0.1:12306/mcp | Chrome MCP 本地服务地址 |
| 模型 base URL | https://taotoken.net/api | TaoToken API 通道 |
| 模型 Key | 控制台生成 | 统一凭证 |
| Node 版本 | ≥18 | 桥接运行要求 |
保存后重启 Trae，让 MCP 配置生效。
4. 验证请求：跑一次页面点击与断言
配置对不对，跑一次就知道。在 Trae 对话里输入下面这段指令，让它导航到一个测试页、点击按钮、再断言结果：
// 1. 导航到测试页面 await chrome.navigate({ url: 'https://example.com/test-page' }); // 2. 查找目标按钮 const buttons = await chrome.getInteractiveElements({ textQuery: '提交' }); if (buttons.length === 0) { throw new Error('未找到提交按钮'); } // 3. 点击按钮 await chrome.clickElement({ selector: '#submit-btn' }); // 4. 截图留证 const shot = await chrome.screenshot({ storeBase64: true, fullPage: true }); // 5. 断言结果文本出现 const result = await chrome.getInteractiveElements({ textQuery: '提交成功' }); console.log(result.length > 0 ? '断言通过' : '断言失败');如果 Trae 能返回「断言通过」，说明 MCP 链路通了。想更直观，让它顺手截个图，你能在对话里看到页面快照。
再补一个网络请求验证，确认点击真的触发了接口：
await chrome.networkDebuggerStart(); await chrome.clickElement({ selector: '#submit-btn' }); const net = await chrome.networkDebuggerStop(); net.requests.forEach(r => { if (r.url.includes('/api/')) { console.log('API:', r.url, '状态:', r.status); } });成功结果长这样：控制台打印出 API 地址和 200 状态，截图里能看到「提交成功」文案。到这一步，Trae 加 Chrome MCP 的自动化测试环境就算跑通了。
5. 本篇常见错排查
连接失败是最常见的。先确认 Chrome 扩展面板里「连接」和「重新初始化」都是已完成状态，再看http://127.0.0.1:12306/mcp能不能访问。如果端口被占，扩展面板里会提示，换个端口后记得同步改settings.json里的 url。
元素定位失败，多半是选择器太宽或者页面还没加载完。把textQuery换成更精确的文案，或者用selector直接定位。页面异步渲染的场景，加一个轮询等待：
const waitFor = async (selector, timeout = 5000) => { const start = Date.now(); while (Date.now() - start < timeout) { const els = await chrome.getInteractiveElements({ selector }); if (els.length > 0) return els[0]; await new Promise(r => setTimeout(r, 100)); } throw new Error(`${selector} 超时未出现`); };Trae 里 MCP 工具不出现，检查settings.json的 JSON 格式有没有多余逗号，保存后必须重启 Trae。模型调用报 401，回去核对 TaoToken 的 Key 有没有填错、base URL 是不是https://taotoken.net/api。
性能问题一般是截图太频繁或者标签页开太多。测试跑完及时关掉无用标签页，截图只在关键断言点做，别每步都截。
6. 把通道固定下来，后面就顺了
环境跑通之后，建议把 MCP 配置和模型通道分开管理：settings.json只管 MCP 地址，模型 Key 走环境变量。这样换机器或者多人协作时，不会因为 Key 泄露或者地址写死而返工。
长期做编码和 Agent 场景的话，可以看下 Coding Plan，把 Trae 里的模型调用额度固定下来：https://taotoken.net/coding-plan?utm_source=taotoken_aicg_blog_end&utm_content=coding-plan&utm_campaign=rewrite 。接入文档在 https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite ，里面有各语言 SDK 的调用示例。想先在网页里试模型效果，模型对话入口 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_content=model-chat&utm_campaign=rewrite 。Claude Code 相关的接入说明在 https://taotoken.net/claude-code-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=ClaudeCodeAnthropic&utm_campaign=rewrite 。
我自己的习惯是：MCP 地址写死在settings.json，Key 用环境变量注入，测试脚本里所有断言都带超时和重试。这样跑 CI 的时候，浏览器操作和模型调用互不干扰，出问题也好定位是哪条链路断的。
