Trae与MCP实现AI页面自动测试

前言

近期，“豆包手机”相关话题在科技圈引发广泛关注。在浏览多位博主的实际体验与深度测评后，不禁让人感叹：现代人工智能的发展速度，确实已远超预期。

然而，最令人好奇的核心问题是：AI Agent 究竟如何根据用户输入的提示词，实现对应用程序的直接操控？毕竟，对绝大多数用户而言，AI 仍停留在简单的聊天对话框范畴——你说一句，它回一句。到底是什么核心技术，让 AI 突然之间拥有了自己的“双手”和“双眼”？

带着这个疑问，我查阅了相关的技术文献，偶然遇到了两个关键概念：mcp协议 和 playwright。既然机缘巧合，我决定以学徒心态，借助当前热门的 AI 编译器 Trae 进行实际验证，看看它们组合起来能释放出怎样的效能。

一、什么是 MCP（模型上下文协议）？

定义：

MCP 协议是一个开放且标准化的通信协议。它的核心作用可以用一句话清晰概括：

MCP 就是为 AI 系统提供“双手”与“双眼”的标准化接口。

在 MCP 出现之前，AI 编程助手存在一个明显短板：

• 仅能对话，无法执行操作。AI 可以生成代码，但缺乏直接运行、测试或验证代码是否真正满足需求的能力。
• 信息获取完全依赖人工。AI 无法感知你本地环境中的文件、依赖项等信息，很多时候需要用户手动将上下文信息“喂”给 AI。

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

来看一个实际案例：“模型 + 工具生态”协同工作的场景——

在整个过程中，用户只需向 AI Agent 下达一个“测试登录”的指令，后续所有步骤均由 AI 自主协调多个工具完成闭环。无需人工干预，也无需手动编写脚。

打个比方：AI 就像公司的首席执行官，通过 MCP 协议向各个职能部门（MCP 服务器）下达任务，各部门执行具体工作，CEO 只管验收最终成果。

如需查看更官方的技术说明，可直接查阅 MCP 官方网站（What is the Model Context Protocol）。

二、什么是 Playwright？

Playwright 是微软开发的一款现代化端到端（E2E）Web 测试工具，支持 Chromium、WebKit 和 Firefox 等主流浏览器，并为 Node.js、Python、Java、.NET 等多种编程语言提供了库支持。

然而，借助 AI + MCP 的组合方案，你无需精通该工具本身的所有细节——只需将具体操作交由 AI 处理，你只需要专注于功能逻辑的验证即可。

三、MCP + Playwright 的协同工作流程

以下所有示例均通过 Trae 编辑器实现。

前期准备工作

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

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

在市场中可以搜索你需要的任何 MCP 服务器，输入名称即可找到。此处我们搜索 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. 通过截图提供最终的视觉证据。

四、这预示着未来的发展方向