关于 agent-browser
agent-browser 是使用已安装的 agent-browser CLI 验证渲染界面的 Skill 指南。它提供基于无障碍快照、可观察结果、控制台与网络检查及截图的验证流程。
主要功能
- 01加载与 CLI 版本匹配的说明
- 02通过无障碍快照检查界面
- 03使用角色和标签进行交互
- 04检查控制台错误与网络请求
- 05捕获并检查截图
适用场景
- 01验证 UI 修改后的用户界面
- 02测试依赖会话状态的交互流程
- 03收集测试所需的视觉与行为证据
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/agent-browser确认已加载。
详细介绍
使用 agent-browser 测试界面
使用已安装的 agent-browser CLI 进行面向用户的渲染验证。在依赖命令语法前，先加载与其版本匹配的说明：
agent-browser skills get core --full
如果目标需要专门指南，请使用随附的指南。agent-browser skills list 会显示可用指南。
验证循环
- 启动或确认目标应用，并记录准确的 URL 和视口尺寸。
- 在一个命名会话中打开页面。
- 获取无障碍快照，并通过角色、标签或快照引用定位控件。
- 执行用户操作。
- 等待状态变化，然后获取新的快照。导航或 DOM 发生重大更新后，引用可能会失效。
- 验证可观察到的结果、控制台错误和相关网络行为。
- 如果视觉证据有助于确认结果，请截取屏幕截图。
测试 EmDash 管理界面时，请通过开发绕过机制进行身份验证，而不要尝试自动化通行密钥：
agent-browser open 'http://localhost:4321/_emdash/api/setup/dev-bypass?redirect=/_emdash/admin'
如果已完成设置，请改用 auth/dev-bypass。
交互指南
- 如果角色和标签能够清楚描述面向用户的控件，请优先使用相应定位器。探索时可使用快照引用提高效率。
- 对话框打开、路由变更或内容被替换后，请重新获取快照。
- 等待选择器或可见状态，而不是添加固定延迟；除非测试内容本身就是时序。
- 对依赖 Cookie 或存储的流程，请使用命名会话。关闭不再需要的会话。
- 如果 UI 行为异常，请检查
agent-browser console和agent-browser errors。 - 如果结果取决于请求或响应边界，请使用
agent-browser network requests。
证据
记录测试路径、输入、视口尺寸、预期结果、实际结果以及任何控制台错误或请求失败。对于 UI 变更，请截取每个受影响屏幕的变更前后截图。
将截图以描述性文件名保存在任务工作区内。报告成功前，请检查保存的图像；截图命令已完成并不能证明预期状态确实可见。
如果稳定的自动化覆盖能够保护相关行为，浏览器探索不能替代回归测试。如果任务包含实现工作，请将已确认的缺陷转化为范围最小且有意义的自动化测试。
评论
支持 Markdown