Trae加Chrome MCP实现浏览器自动化测试((玩转100个MCP系列第五弹)

大家好呀，我是程序员夏叶，深度AI编程使用者，专注于分享AI编程方面的使用技巧、经验以及前沿资讯，有兴趣的可以关注我的公众号，一起学习，共同进步。

今天这篇文章介绍一个好用的MCP，那就是Chrome Mcp Server，它与传统的传统的浏览器自动化工具不一样，它是通过与chrome浏览器插件通信来实现自动化测试的，直接操作我们日常使用的chrome浏览器，无缝集成用户本身的浏览器环境。

先来看一个简单的案例，就是我之前项目有个改动，因为拆分文件导致页面样式失效了，正常情况下我们是给AI一个描述，它去猜测原因，然后进行修改，但是当我使用这个mcp以后，它可以自己去控制台读取错误，实现精准修改。

一、Chrome Mcp Server下载和配置

Chrome Mcp Server的github地址如下：

github.com/hangwin/mcp...

使用这个mcp的前置条件有两个：

Node.js >= 18.19.0 and pnpm/npm
安装有谷歌浏览器

1、全局安装mcp-chrome-bridge

复制代码

npm install -g mcp-chrome-bridge

使用如上命令在终端中先安装一个。

2、下载Chrome Mcp Server插件

下载地址是这个: github.com/hangwin/mcp...

直接下载里面的zip包就可以了，下载完成后解压，记住路径。

3、安装Chrome Mcp Server插件

打开谷歌浏览器，输入chrome://extensions/打开浏览器扩展管理界面，然后启用右侧的开发者模式，最后点击按钮加载未打包的扩展程序。

选在上面一步解压的目录，然后插件就安装完成了。

接下来在插件详情中把插件固定到工具栏，然后再工具栏打开插件，点击连接和 重新初始化两个按钮，等待连接完成和初始化完成。

一切准备就绪后，就可以在Trae中去配置这个mcp了。

4、Trae中配置Chrome mcp server

打开Trae IDE，找到设置->AI功能管理，在MCP标签页选择手动添加，然后输入如下配置：

json 复制代码

{
  "mcpServers": {
    "streamable-mcp-server": {
      "type": "streamable-http",
      "url": "http://127.0.0.1:12306/mcp"
    }
  }
}

保存后等一下，出现绿色的勾，就说明配置成功啦。

5、自定义智能体使用Chrome mcp server

接下来还是在AI功能管理面板，切换到智能体标签，选择创建智能体，定义一个名为前端测试工程师的自定义智能体，输入提示词，我的提示词是这样：

markdown 复制代码

你是一个智能测试助手，负责处理前端web测试请求。当接收到测试请求时，你需要自主调用chrome mcp server进行测试，并自动读取控制台日志。如果发现问题，你要自行修改，修改完成后继续测试。
以下是前端web测试请求：
<web_test_request>
{{WEB_TEST_REQUEST}}
</web_test_request>
具体操作步骤如下：
1. 接收到测试请求后，立即调用chrome mcp server开始进行测试。
2. 测试过程中，自动读取控制台日志。
3. 仔细检查日志内容，判断是否存在问题。
4. 如果发现问题，分析问题产生的原因，并自行进行修改。
5. 修改完成后，再次调用chrome mcp server进行测试，重复步骤2 - 4，直到测试通过。
请在<测试结果>标签内详细记录测试过程和最终结果，包括是否发现问题、问题的处理情况以及最终测试是否通过等信息。
<测试结果>
[在此记录测试过程和最终结果]
</测试结果>

然后再工具中选中Chrome mcp server，点击保存就可以使用这个智能体了。

二、使用Chrome mcp server实现浏览器自动化操作

1、前端页面自动化测试

用Trae开发了几个项目以后，我发现AI编程中有一个很大的痛点，那就是测试，后端测试其实相对比较好处理，可以让AI自己写测试案例进行自动化测试，但是前端还要自己一直点点点，前期的一些比较初级的问题，自己点就很费时间。

现在有了chrome mcp server，前期测试一些小问题，就很方便了，下面我来说几个案例。

比如我这个项目里面有个这个问题：

我丢给了前端测试工程师这个智能体去处理，看看它是怎么处理的:

这是智能体回复的一部分截图，它自动的打开网站，输入内容，点击按钮，然后读取控制台日志，修复问题，并进行最终的验证。

非常的nice，在此之前我要自己测试，然后去控制台复制日志丢给它，万一控制台日志过长还比较麻烦，现在这些过程都省略了，很提效。

再比如下面这个问题：

一个很典型的关闭按钮不明显，存在部分被遮挡的问题，我让前端测试工程师这个智能体去处理：

复制代码

嗯，接下来我有一个问题，就是页面点击注册后，弹框出来的注册框关闭按钮可能会被遮挡，但是要注意，不是全部遮挡，只是关闭按钮"X"被遮挡了一半，可以点击，但是不够美观，你可以自行测试一下这个问题，看看能不囊修复下

然后它开始了测试和修改：

最后处理后，界面被优化成如下的样子：

前后两张截图看，可以看到很明显的对比，关闭按钮完全暴露出来了。

2、操作书签

比如我忘记之前部署在vercel上的网址了，我记得是放在收藏夹的，但是没有找到，我可以让它帮我找：

看，它找出来以后直接告诉我在哪个文件夹下面，网址是多少，就很方便了。

同样的，这个mcp也支持添加书签和删除书签，这里就不多做测试了。

3、分析网络请求和返回

比如我想知道我的登录接口返回的token是保存在哪个字段，就可以让它去进行分析：

最后它也成功的获取到了token字段，并且把整个json响应都输出来了，真的很方便。

当然，这个mcp还有更多很强力的功能，github上也有介绍，大家可以自行查看，因为我是编程的时候用，所以比较聚焦于它在自动化测试方面的能力。

好了，今天的分享就到这里，既然已经看到最后了，麻烦来个三连支持一下吧，十分感谢！