用 Trae + MCP 让 AI 自动测试页面

前言

想必大家在前段时间关于 "豆包手机" 一定有所耳闻，说实话在看过了不少博主的体验和测评之后呀，不禁有点感叹现代的AI发展了🤯。

但是有一个让我比较好奇的功能🤔，那就是 AI Agent是如何通过用户提供的提示词来直接操控应用的呢？ 毕竟对于大多数人来说 AI 还停留在聊天对话的阶段，是什么东西让 AI 突然拥有了自己的 "手"与"眼" 呢？

因此我就去稍微了解了一下与这方面有关的一些知识，结果碰到了 mcp协议 和 playwright。

于是我抱着一颗学徒的心，来试试在目前很火的 AI 编译器 Trae 来看看会摩擦出怎样的火花🔥。

MCP 协议是一个开放、标准化的通信协议，而它的核心作用是：

让大语言模型能够安全、结构化地调用外部工具、访问上下文数据，并与真实世界交互。

说白了，MCP 是给 AI 装上"手"和"眼"的接口。

在 MCP 出现之前，AI 编程助手存在严重局限：

但是通过 MCP 这个"桥梁"，让 AI 作为客户端通过标准协议，连接一个或多个 MCP Server从而把外部程序（比如 Playwright、Shell 脚本等）接入到 AI 编译器中，让 AI 能调用它们。

例如："模型 + 工具生态"协同

在这整个过程中，用户仅仅只是向 AI Agent 下达了测试登录的命令，在此之后的过程都无需人工干预，AI 可以自主协调多个工具完成闭环。

AI 就像公司的 CEO，通过 MCP 协议向多个部门（MCP Server）下达命令

如果你想得到更官方的解释，可以去官网What is the Model Context Protocol (MCP)?

Playwright 是由 Microsoft 开发的 现代化端到端（E2E）Web 测试工具，用于自动化 Chromium、WebKit 和 Firefox 浏览器的 Node.js/Python/Java/.NET 库。

但是由于 AI + MCP 的存在，我们并不需要精通这个工具，把事情交给AI，让我们更注重于功能。

下述示例都是通过使用 Trae 来实现的

打开我们的 Trae 编辑器

在设置页面找到 MCP

点击右边的添加按钮，这里有两种方法添加，从市场添加 / 手动添加，这里我们点击从市场添加即可

在市场这里可以添加任何你需要的 MCP Server ，并且可以输入你需要配置的 MCP Server 信息。这里我们添加 playwright

安装好后回到主页面上，在 TRAE 智能体聊天框中选择 @Builder with MCP

注：

不要忘记 playwright 只适配 Chromium、WebKit 和 Firefox浏览器，各位只需提前安装好其一即可

给 AI 提示词：

markdown 复制代码

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

最后实现结果：

现在我test文件夹下有一个 1.html文件，给 AI 提示词让它帮我测试页面的基本效果。

markdown 复制代码

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

这正是 "Agentic AI"（智能体式开发） 的核心：AI 不再只是生成代码，而是能自主执行、验证、迭代。