chrome-mcp-server-尧图网站建设

📅 发布时间：2026/7/8 4:43:02

简介：

官方文档：mcp-chrome/README_zh.md at master · hangwin/mcp-chrome · GitHub
Chrome MCP Server 是一个基于chrome插件的模型上下文协议 (MCP) 服务器，它将Chrome 浏览器功能暴露给 Claude、Cursor等 AI 助手，实现复杂的浏览器自动化、内容分析和语义搜索等。

一、安装

安装node.js和chrome

接口自动化MCP阶段有介绍如何安装nodejs

Node.js >= 18.19.0 和（npm 或 pnpm）

Node.js下载链接：Node.js — 下载 Node.js®t，下载下来的mis⽂件双击安装即可

检查是否安装成功

node -v
v20.18.0(出现版本号即可，版本可以不⼀致)
npm -v
10.8.2(出现版本号即可，版本可以不⼀致)

Chrome/Chromium 浏览器

电脑上基本都安装有chrome浏览器，该步骤可跳过

安装mcp-chrome-bridge

使用上面安装好的npm工具来安装

npm install -g mcp-chrome-bridge

安装chrome扩展

扩展下载地址：Releases · hangwin/mcp-chrome

下载好之后解压

在chrome浏览器上添加扩展

连接chrome扩展

默认为断开，点击连接，显示服务运行中即可

在cursor中添加MCP配置

在打开的mcp.json中添加chrome-mcp-server配置

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

当状态变为“绿色”，表示启动成功。至此，所有内容安装完成

二、使用

完成了安装教程后，我们就可以手动尝试前面的演示内容，在cursor中输入提示词，cursor将按照指令完成和chrome浏览器的交互。

登录测试用例

1.提示词

使用chrome MCP执行以下操作
用例1：正常登录功能验证
操作步骤：
1. 打开chrome访问登录页面http://49.235.61.184:19090/blog_login.html
2. 在用户名输入框中输入"zhangsan"
3. 在密码输入框中输入"123456"
4. 点击"提交"按钮
预期结果：
1. 检查页面是否登录成功，页面跳转到blog_list.html

2.运行结果

列表页测试用例

1.提示词

使用chrome MCP执行以下操作
用例1：博客列表正常显示验证
操作步骤：
1. 打开chrome浏览器，访问博客列表页面http://49.235.61.184:19090/blog_list.html
2. 页面标题显示"博客列表页"
3. 左侧显示用户信息卡片，包含头像、用户名、GitHub链接、文章和分类统计
4. 右侧显示博客列表，每个博客包含标题、创建时间、内容描述和"查看全文"链接
5. 关闭chrome浏览器

2.运行结果

编辑博客测试用例

1.提示词

使用chrome MCP执行以下操作
用例1：博客详情内容显示验证
操作步骤：
1. 打开chrome浏览器，访问博客编辑页面http://49.235.61.184:19090/blog_edit.html
2. 输入博客标题：Chrome MCP博客标题
3. 输入博客内容：Chrome MCP博客内容（使用的是markdown插件，需要注意输入的方式，可能会输入失败）
4. 点击发布文章
预期结果：
1. 页面跳转到列表页blog_list.html
2. 列表中最后一条博客为刚增加的博客文章

2.运行结果

至此，cursor已经可以完全使用零编码方式来实现web ui自动化测试了。接下来我们按照cursor实现自动化实战内容，变成零代码的项目自动化实战。

三、MCP零代码项目自动化实战

生成登录页测试用例

1.提示词

根据页面图片生成登录页面的测试用例
1）包含功能和界面等方面来设计
2）按照优先级，每个页面设计用例数量在10以内

2.结果

生成列表测试用例

1.提示词

@列表页面图片
根据页面图片生成列表页面的测试用例
1）包含功能和界面等方面来设计
2）按照优先级，每个页面设计用例数量在10以内

2.生成结果

生成博客详情页测试用例

1.提示词

@详情页面图片
根据页面图片生成详情页面的测试用例
1）包含功能和界面等方面来设计
2）按照优先级，每个页面设计用例数量在10以内

2.生成结果

生成博客编辑页测试用例

1.提示词

@写博客页面图片
根据页面图片生成写博客页面的测试用例
1）包含功能和界面等方面来设计
2）按照优先级，每个页面设计用例数量在10以内

2.生成结果

运行自动化

1.提示词

@登录页面测试用例.md @列表页面测试用例.md @详情页面测试用例.md @编辑页面测试用例.md
使用chrome MCP执行操作所有页面测试用例文件中内容
前置：打开chrome浏览器，访问页面URL：http://49.235.61.184:19090/blog_list.html，若页面显示“注销”按钮，则点击
后置：关闭chrome浏览器
要求:
1)执行所有测试用例之前要进行一次前置操作,所有用例执行结束要执行一次后置操作
2)严格按照用例中规定的操作步骤,执行每一个测试用例（用例里面说未登录状态请自行注销来）
3)分别统计执行成功和失败的用例数量
4）测试用例执行过程中只能打开一个标签页，不需要在执行过程中打开多个标签

2.生成结果

遇到弹窗就阻塞了，去掉弹窗继续执行

结论

能满足部分web ui自动化要求。仍然存在问题：
1）存在bug：无法处理页面弹窗---自动化常见场景
2）不支持无头模式
3）自动化执行时间比传统方式长5倍+

Cursor生成的测试用例需要自己手动调整一下，因为在执行的过程中可能会出现不少问题