1. 为什么要在 Trae 里接 Chrome MCP 做端到端验证浏览器自动化测试最烦的从来不是写断言而是「环境搭不起来」。Selenium 要配 driverPlaywright 要装浏览器内核Puppeteer 要处理版本对齐等你把环境跑通测试用例还没写一行。Chrome MCP 换了个思路它把已经装好的 Chrome 浏览器本身变成一个 MCP ServerTrae 作为 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_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 注册后在控制台生成 Key。拿 Key 的路径是进控制台 → API Keys → 新建 Key。控制台地址 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite Key 管理页 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 。生成后复制保存后面 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下的binWindows 是%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 传输模式键名可以写成streamableurl 不变{ mcpServers: { streamable: { url: http://127.0.0.1:12306/mcp } } }同时把模型通道配成 TaoToken让 Trae 的对话和 MCP 工具调用走统一 Key。模型 provider 的 base URL 填https://taotoken.net/apiKey 填你在控制台生成的那串。这样 Trae 里模型推理和浏览器操作是两条独立链路但凭证统一。配置项对照表配置项值说明mcpServers.chrome.urlhttp://127.0.0.1:12306/mcpChrome MCP 本地服务地址模型 base URLhttps://taotoken.net/apiTaoToken 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_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面有各语言 SDK 的调用示例。想先在网页里试模型效果模型对话入口 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite 。Claude Code 相关的接入说明在 https://taotoken.net/claude-code-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentClaudeCodeAnthropicutm_campaignrewrite 。我自己的习惯是MCP 地址写死在settings.jsonKey 用环境变量注入测试脚本里所有断言都带超时和重试。这样跑 CI 的时候浏览器操作和模型调用互不干扰出问题也好定位是哪条链路断的。