Smart Browser — Testing skill for Claude Code

Smart Browser MCP

面向 AI 编程助手（Claude Code / Claude Desktop / Cursor 等）的浏览器自动化 + 接口测试 MCP 服务器。 基于 Playwright + Chrome DevTools Protocol，让大模型像人一样"看得懂"页面、点得准按钮、跑得通流程。 模仿ego-lite 的windows智能浏览器工具

**仓库**：[Gitee 主仓库](https://gitee.com/zhaolibin001/smart-browser) · [GitHub 镜像](https://github.com/zhaolibins001-svg/smart-browser) · [npm](https://www.npmjs.com/package/@zhaolibin/smart-browser-mcp)

   

---

为什么需要它

传统浏览器自动化的痛点是：AI 只能拿到一大堆 HTML，靠猜测写 CSS 选择器，元素一变就全盘失效。

Smart Browser MCP 把「页面理解」这件事做成了模型的原生能力：

• 看得懂：把可交互元素扫描出来并编号（e1、e2…），模型直接点编号，不再手写脆弱选择器；
• 看得见：提供 Set-of-Mark（SoM）标注截图，元素框选 + 序号叠加在图上，视觉模型也能直接读懂；
• 记得住：页面元素映射可持久化，下次访问同一站点无需重新扫描；
• 可复用：一次录制、随时回放，把探索过程沉淀成可重跑的自动化流程；
• 闭环：内置 HTTP 接口测试工具，UI 与 API 双向验证。

---

特性

能力	说明
元素引用（ref）机制	browser_observe 扫描后返回带编号元素，后续点击/输入直接用 e1、e2
Set-of-Mark 截图	截图上叠加元素边框与序号，视觉模型可直接定位
智能兜底选择	支持 ref → selector → placeholder → 可见文本 多级降级定位
页面结构分析	文本抽取、DOM 快照、页面语义分析、站点地图提取
流程录制与回放	browser_flow_record 录制 → browser_flow_run 重放
元素记忆	browser_remember / browser_recall 跨会话保存站点元素映射
人机校验识别	自动检测验证码 / 人机验证，暂停并等待人工处理后继续
非阻塞式懒启动	首次调用工具时才拉起浏览器，不在 MCP 启动阶段占用资源
多标签页管理	列出、切换、新建标签页
控制台错误采集	自动收集页面运行时错误，支持读取与清空
接口测试套件	环境变量、登录态、请求发送、断言、套件批量执行
高度可配置	浏览器路径、用户数据目录、CDP 端口均可通过环境变量指定

---

快速开始

1. 安装

**方式一：npx（推荐，免安装）**

不需要全局安装，MCP 客户端配置里直接用 `npx` 调用即可，见下一节。

**方式二：全局安装**

npm install -g @zhaolibin/smart-browser-mcp

安装后可使用 `smart-browser-mcp` 命令（同时提供 `claude-browser-mcp`、`browser-mcp` 两个别名）。

**方式三：从源码构建**

# 任选一个源，内容一致
git clone https://gitee.com/zhaolibin001/smart-browser.git          # Gitee 主仓库
# git clone https://github.com/zhaolibins001-svg/smar