Trae + MCP 实战：AI 自动测试页面效率榜单

引言

“豆包手机”近期引发热议，翻阅多篇博主评测后，一个感受尤为明显：现代AI的演进速度确实远超预期。

更令人好奇的是，AI Agent究竟如何依据用户输入的提示词，直接操控应用？对多数人而言，AI仍停留在聊天界面——你说一句它回一句。是什么机制让AI突然拥有了自己的“手”和“眼”？

带着这个疑问，我查阅了相关技术资料，最终聚焦于两个关键概念：MCP协议 和 Playwright。既然撞上了，不如以学徒心态，借助当前热门的AI编译器Trae，探究它们能碰撞出怎样的实践效果。

一、什么是 MCP（Model Context Protocol）？

定义：

MCP 协议是一种开放、标准化的通信协议，其核心作用可以浓缩为一句话：

MCP 就是为 AI 装配“手”和“眼”的标准化接口。

在 MCP 问世前，AI 编程助手存在一个明显的短板：

• 只能对话，无法执行。AI 可以生成代码，但无法直接运行、测试或验证它是否达到预期效果。
• 信息获取依赖手动投喂。AI 不清楚本地文件结构、依赖关系，用户需要手动将上下文喂给模型。

而 MCP 像一座桥梁，让 AI 作为客户端，通过标准协议连接一个或多个 MCP Server，将外部工具（如 Playwright、Shell 脚本等）接入 AI 编译器，使 AI 真正具备调用它们的能力。

看一个示例：“模型 + 工具生态”协同工作——

整个流程中，用户只需向 AI Agent 下达“测试登录”指令，后续步骤均由 AI 自主协调多个工具完成闭环。无需人工介入，也无需编写脚本。

打个比方：AI 好比公司的 CEO，通过 MCP 协议向各部门（MCP Server）下发指令，部门执行，CEO 只看结果。

如需更官方的解读，可直接查阅 MCP 官网（What is the Model Context Protocol）。

二、什么是 Playwright？

Playwright 是微软开发的现代化端到端（E2E）Web 测试框架，支持 Chromium、WebKit 和 Firefox 三大浏览器引擎，并提供 Node.js、Python、Java、.NET 等多语言 SDK。

不过，在 AI + MCP 的组合下，你无需精通该工具本身——将具体操作交给 AI，你只需关注功能逻辑的验证结果即可。

三、MCP + Playwright 的协同实战

以下所有示例均基于 Trae 编辑器实现。

准备工作

打开 Trae 编辑器，进入设置页面找到 MCP 配置入口。

点击右侧的“添加”按钮，提供两种方式：从市场添加 / 手动添加。直接选择“从市场添加”。

在市场搜索任何所需的 MCP Server，输入名称即可找到。此处搜索 playwright，直接安装。

安装完成后返回主界面，在 Trae 智能体聊天框中切换至 @Builder with MCP 模式。

示例一：AI 自动访问页面

向 AI 输入的提示词：

请帮我测试掘金网站的插件页面：
1. 打开 https://juejin.cn/
2. 点击顶部导航栏的"插件"按钮
3. 等待页面加载完成
4. 截图并保存到当前目录

最终实现效果如下（截图略）。

示例二：AI 自动测试页面

在 test 文件夹下有一个 1.html 文件，让 AI 协助测试页面的基本功能：

请确认 1.html 文件的以下能力：
1. 测试是否能正确通过文件路径加载本地 HTML。
2. 测试 fill 和 click 是否精准。
3. 通过验证结果文本，确保页面逻辑正常运行且被测试工具正确捕获。
4. 通过截图提供最终的视觉证据。

四、这预示的未来