AI自动化执行web自动化测试-Trae结合MCP

一、什么是MCP

MCP在25年大火，如果你还不知道什么是MCP，那么请跟着这篇文章，博主将带你认识并快速使用上MCP，整个过程不需要深奥的编程知识，新手也能跟着步骤快速理解MCP并上手玩起来！

那么第一个问题：什么是MCP?

专业一点来说：MCP 指的是 Model Context Protocol（模型上下文协议），是由 Anthropic 于 2024 年 11 月开源发布的一项技术，整合了之前各大模型不同的 Function Call 标准，形成统一的标准协议，使不同的 AI 模型、工具和数据源能通过一个标准接口互联互通。

专业的说法太绕，不好理解，那么我们简单一点来说：MCP 就是一个 AI 大模型的标准化工具箱，旨在打通 AI 模型与外部工具、数据源的桥梁。让 AI 不仅能回答问题，还能直接调用 API、操作本地文件、访问数据库等，实现自动化任务处理。而很多开发者都基于MCP协议开发了一些工具，统一都叫做MCP Server，也就是MCP服务（或者叫MCP工具）。

其实MCP在24年11月份就发布了，为什么到了25年4月份，MCP才开始爆发式走红呢？核心原因主要由于4月份科技巨头集体押注+开源生态爆发：

• 科技巨头集体押注：阿里、腾讯、谷歌、字节跳动等企业在 4 月集中宣布接入 MCP 服务，例如阿里云推出全生命周期
  MCP平台，支付宝上线国内首个支付 MCP Server，谷歌为 Gemini 模型添加 MCP 支持。
• 开源生态爆发：魔搭社区 4 月推出 MCP 广场，上架超千款 MCP 服务；开发者群体中 MCP Server
  数量从数百激增到2000+，覆盖支付、地图、数据分析等场景。

二、让你只会聊天的AI动起来

以前我们使用的AI，主要都是聊天问答式的，那今天结合MCP, 杨叔将一步步教你如何通过Trae+MCP工具，实现AI自动化进行web测试，让你只会聊天的AI动起来！

小白同学也不用担心，过程非常简单，通俗点来说：基于这些开发者开发的这些MCP工具，我们只需要简单的进行一些配置，就能通过MCP协议和大模型连接起来，成为了大模型的工具箱里的工具，大模型自己在合适的时候，去挑选工具用起来。

三、下载AI IDE工具-Trae

Trae是字节跳动旗下的AI IDE工具，对标工具是国外的Cursor。选择Trae的原因一方面相比Cursor, Trae目前完全免费。另一方面相比于Windsurf，Trae也不需要自己去配置API key，国内版可以免费使用Deepseek/Doubao, 国际版可以免费使用Claude/Gemini/GPT。因此直接使用Trae, 也算是支持国产（薅羊毛）了~

Trae官方下载地址：https://www.trae.com.cn/

下载后安装，非常简单，跟着提示一步步安装即可，这里不再赘述。

四、Trae中创建智能体

Trae中创建智能体非常简单，既不需要你去编程，也不需要你去配置复杂的工作流，只需要配工具+填写提示词。

首先打开Trae后，右侧AI窗口点击齿轮图标，选择“智能体”，然后“创建智能体”：

在创建智能体页面，我们就可以看到需要做的核心2步，选择MCP工具+配置智能体的提示词：

五、选择MCP工具

在MCP工具区域，我们可以看到Trae已经帮我们内置了几款MCP工具，像“文件系统”–>用来操作文件，“终端”–>用来执行命令行语句操作等。

那分析我们目前的需求，我们需要一款MCP工具去帮助我们自动化操作浏览器，因此点击“+添加MCP Servers”:

在MCP市场中我们可以看到提供了很多的MCP Server，由于我们是想自动化操作浏览器，因此我们选择playwright这个MCP Server:

对于Playwright，相信做过web自动化测试的同学都不会陌生，本身就是用于web自动化的一套框架。我这里是已经配置过了，没有配置过的点击后面的+号按钮，会弹出配置窗口：

点击窗口中的“介绍页面”，你会发现左侧打开了该MCP工具的github readme页面，在这个页面里面滑动找到配置信息，复制这段配置信息粘贴到右侧我们MCP配置的弹窗页面中，再点击“确认”即可：

然后Trae就会开始添加Playwright这个MCP Server，过程可能需要稍微等待一会儿，看到下面这个打了绿色的勾，显示可使用，则表示已经添加完成：

除了Playwright之外，我这里还额外添加了一个多步思考的MCP Server，用于当我们提的需求比较复杂或者需求描述不清晰时，能让AI 系统性地分析和解决复杂问题，更有条理地进行推理，将复杂问题拆解成可管理的小步骤，使问题解决过程更清晰高效：

补充说明1：很多MCP Server都是基于node.js 来运行实现的，所以如果你之前电脑上没有安装过node.js, 需要自己安装一下。你也可以在Trae中，通过它内置的@Builder，让它自动帮你安装一下node.js，像下面这样一句话就行，AI时代就是这么简单：

补充说明2：如果在这个MCP市场里面没有找到你想要的MCP Server，这里也直接你手工添加其他的MCP Server。点击“手动配置”，添加对应MCP Server的配置文件完成添加即可：

现在有非常多的MCP Server网站，包括官网的、聚合网站的，这里给大家推荐smithery.ai这个网址，工具比较全面。地址：https://smithery.ai/

选择你需要的MCP Server, 点进去右侧Install这里点"JSON"，就可以看到对应的配置：

六、填写智能体提示词

现在只剩最后一步了，就是填写一下这个智能体的提示词。一份完整的提示词主要应该包含下面3个内容：

1、描述任务目标，也就是告诉智能体它是干什么的，比如我们这个智能体的描述内容如下：

2、描述执行方式，告诉它要用到哪些MCP工具去完成什么样的事情，比如下面这样描述:

3. 描述最后的测试报告页面，我们需要它生成一份长什么样子的测试报告，比如我们下面的描述：

补充说明：测试报告这里，很多时候大家都只会简单写一句“帮我生成测试报告”，太简单的提示词，导致生成出来的报告不是我们想要的。而像上面这种专业的提示词我们自己写又很难，这就到了该用魔法打败魔法的时候了，我们直接让AI来帮我们生成提示词就可以了。

七、实际操作展示

前面的步骤都准备好了之后，保存智能体。然后接下来我们就实际操作一下，看看效果如何。在Trae界面，我们选择刚才创建的智能体，然后输入我们的需求：

访问百度，搜索“程序员杨叔”，访问搜索结果中页面标题为:程序员杨叔-优快云博客的页面。

接下来就会看到智能体根据我们提的需求：
1、先使用sequential-thinking开始分解操作
2、然后使用Playwright操作浏览器执行对应的步骤动作
3、最后再生成我们想要的格式内容的测试报告

实际操作效果如下面视频展示：

MCP自动化操作浏览器

上面我们做的这个智能体只是一个例子，抛砖引玉，大家可以去做自己想要的任何的智能体，比如我们让它自动去搜集一些信息然后定时发送给某某某、自动批量操作文件等等。

最后，希望以上内容对你有帮助，喜欢的同学麻烦点个赞+收藏+关注，一键三连！欢迎关注下方我的公众号：程序员杨叔，各类文章都会第一时间在上面发布，持续分享各类测试开发知识干货，你的支持就是作者更新最大的动力。