101-skills Agent Browser Skill 技能

技能简介

101-skills Agent Browser 是一款专为 AI 编程智能体设计的浏览器自动化引导技能。它将传统浏览器操作转化为可重复、可验证的结构化会话流程，让 AI Agent 能够像资深 QA 工程师一样执行重复性浏览器任务，并输出标准化的操作证据。

核心能力

• 会话式浏览器控制：基于 belt CLI 启动命名浏览器会话，通过快照（snapshot）而非脆弱的选择器定位元素，确保元素引用在会话内始终有效。
• 元素精准交互：支持点击、填写、输入、选择、拖拽、上传、滚动等常见操作，所有操作均通过快照引用（@ref）而非 XPath/CSS 选择器，天然抵御页面结构变化。
• 多媒体证据捕获：内置截图和可选的会话视频录制功能，可在关键节点自动留存操作证据，满足 QA 报告、客服培训、合规审查等场景需求。
• 认证状态管理：支持预配置认证状态保存与复用，避免每次执行都需要重新登录，大幅提升自动化流程效率。
• 工作流场景覆盖：内置新手、中级、高级三类提示模板，从「打开页面查看标题」到「执行完整多步验证流程」均有对应引导，覆盖常见使用路径。
• 安全边界控制：内置反模式（Anti Patterns）规则，明确禁止在未授权网站上执行自动化操作、禁止在日志中暴露密码或 Token，天然规避常见安全风险。

安装配置

前置要求

• 已安装 Node.js 18+ 环境
• 已安装 inference.sh belt CLI

安装步骤

1. 终端执行：npx skillstore add 101-skills/agent-browser
2. 安装完成后，通过 npx skillstore list 确认技能已加载
3. 如需认证工作流，参考技能目录内的 auth.example.md 配置凭证

可选配置

• 设置 BELT_SESSION_TIMEOUT 环境变量控制单次会话最大存活时长
• 在项目根目录创建 .belt/config.json 配置默认浏览器类型（Chromium/Firefox/WebKit）

使用步骤

1. 启动浏览器会话：向 AI 发送提示词「在新的浏览器会话中打开 https://example.com 并总结页面标题和可用交互元素」
2. 获取快照引用：AI 返回交互式快照，标注每个可操作元素的引用 ID（如 @btn-submit）
3. 执行目标操作：在提示词中引用目标元素的快照 ID，例如「使用 @form-contact 填写姓名为 Test User，邮箱为 test@example.com，然后点击 @btn-submit」
4. 验证操作结果：要求 AI 执行「对当前页面执行新的快照，与提交前的基线快照进行对比，报告任何可见差异」
5. 保存操作证据：如需留存记录，要求 AI「在此检查点截取截图并保存到 ./evidence/session-001/」

适用场景

• Web 表单自动化测试：在预发布环境重复执行表单填写与提交验证，无需人工手动操作。
• 公开页面信息采集：在已授权的公开网页上提取结构化数据，用于竞品分析、内容聚合等研究目的。
• 客服流程文档化：录制标准客服操作路径，形成可重复的培训视频或 SOP 文档，降低新员工上手门槛。
• 部署后冒烟验证：CI/CD 流水线中集成浏览器检查，在每次部署后自动验证关键页面是否正常加载。
• 合规与审计留痕：在受监管行业执行定期浏览器检查，保存操作截图作为合规证据。
• 爬虫辅助抓取：配合静态抓取工具，对 JavaScript 渲染页面执行预加载后再提取，提升动态内容采集成功率。

适用人群

• 使用 Claude Code、Codex 等 AI 编程智能体的开发者
• 需要自动化重复性浏览器操作的 QA 工程师
• 需要为内部流程录制操作证据的运营和客服团队
• 对接外部系统、需要定期执行 Web 端验证的后端工程师

工作原理

101-skills Agent Browser 基于 inference.sh belt CLI 实现浏览器会话管理。核心机制是「快照引用」（Snapshot Reference）：每次页面导航或重大 DOM 变更后，AI 会对页面执行快照，获取每个可交互元素的确定性引用 ID；后续所有操作均通过引用 ID 而非选择器执行，从而规避了传统 Selenium/Playwright 中因页面结构变化导致的选择器失效问题。快照内容包含元素类型、可见文本、位置信息，可作为 AI 决策的可靠上下文依据。

官方链接

• Skill 页面：https://skillstore.io/skills/101-skills-agent-browser
• 安装命令：npx skillstore add 101-skills/agent-browser
• GitHub 仓库：https://github.com/101-skills/skills
• 作者：101-skills（MIT License）