SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场test-browser

test-browser

测试与质量

查看项目

更新于 10-15 14:56

技能介绍

用途

test-browser 是一个浏览器测试技能（Skill），用于对当前 PR 或分支改动所影响的页面运行端到端浏览器测试。它通过 agent-browser CLI 打开页面、点击元素、填写表单、截图并抓取渲染后的内容。

该工作流明确要求只使用 agent-browser CLI 进行浏览器自动化，不使用任何替代的浏览器自动化系统、浏览器 MCP 集成或内置浏览器控制工具。平台相关提示：在 Claude Code 中不要使用 Chrome MCP 工具（mcp__claude-in-chrome__*）；在 Codex 中不要替换为不相关的浏览工具。

前提条件

  • 本地开发服务器正在运行（例如 bin/dev、rails server、npm run dev）
  • 已安装 agent-browser CLI
  • Git 仓库中存在待测试的改动

使用方式

快速用法示例：

  • 测试当前分支改动（自动检测端口）：/test-browser
  • 测试指定 PR：/test-browser 847
  • 测试指定分支：/test-browser feature/new-dashboard
  • 在指定端口测试：/test-browser --port 5000

工作流

  1. 验证安装：检查 agent-browser 是否可用（command -v agent-browser），若未安装则提示“agent-browser is not installed. Run /ce-setup to install required dependencies.”并停止。

  2. 询问浏览器模式：询问用户以有头（headed，可视窗口观察测试）或无头（headless，后台更快但不可见）运行。选择有头时使用 --headed 标志。

  3. 确定测试范围：若提供 PR 号，使用 gh pr view [number] --json files -q '.files[].path'；若为 current 或空，使用 git diff --name-only main...HEAD；若提供分支名，使用 git diff --name-only main...[branch]。

  4. 将文件映射为路由：如 app/views/users/* 对应 /users、/users/:id、/users/new；app/controllers/settings_controller.rb 对应 /settings；app/javascript/controllers/_controller.js 对应用该 Stimulus 控制器的页面；app/components/_component.rb 对应用渲染该组件的页面；app/views/layouts/* 对应所有页面（至少首页）；app/assets/stylesheets/* 对应关键页面的视觉回归；app/helpers/_helper.rb 对应用该 helper 的页面；src/app/（Next.js）对应相应路由；src/components/* 对应用这些组件的页面。

  5. 检测开发服务器端口：优先级为显式参数（--port 5000）、项目说明文件（AGENTS.md、CLAUDE.md 等）、package.json 的 dev/start 脚本、环境文件（.env、.env.local、.env.development 中的 PORT=），默认回退到 3000。

  6. 验证服务器运行：使用 agent-browser open http://localhost:${PORT} 和 agent-browser snapshot -i；若未运行，提示用户启动开发服务器（Rails: bin/dev 或 rails server；Node/Next.js: npm run dev；自定义端口：带 --port <your-port> 重新运行）。

  7. 测试每个受影响页面：对每个路由执行 open 与 snapshot -i，验证标题/标题元素存在、主要内容渲染、无错误信息、表单字段符合预期；测试关键交互（click @e1 后再次 snapshot -i）；使用 agent-browser screenshot 和 --full 截图。

  8. 人工验证（必要时）：当测试涉及 OAuth、邮件、支付、短信或外部 API 时暂停并要求人工确认，例如“Please sign in with [provider] and confirm it works”“Check your inbox for the test email and confirm receipt”“Complete a test purchase in sandbox mode”“Verify you received the SMS code”“Confirm the [service] integration is working”。随后询问是否正常工作，选项为“Yes - continue testing”或“No - describe the issue”。

  9. 处理失败：截图错误状态、记录精确复现步骤，然后询问如何继续：立即修复（协助调试并重跑失败测试）、创建待办（使用 todo-create 技能，创建优先级 p1、描述为 browser-test-{description} 的待办）、或跳过（记录为 skipped 并继续）。

  10. 测试汇总：输出报告，包含测试范围（PR 号/分支名）、服务器地址、已测页面表（路由、状态、备注）、控制台错误列表、人工验证项、失败项、创建的待办，以及最终结果 PASS/FAIL/PARTIAL。

agent-browser CLI 参考

导航：agent-browser open <url>、back、close。

快照（获取元素引用）：agent-browser snapshot -i（交互元素及引用 @e1、@e2 等）、snapshot -i --json（JSON 输出）。

交互（使用快照中的引用）：click @e1、fill @e1 "text"、type @e1 "text"、press Enter。

截图：screenshot out.png（视口截图）、screenshot --full out.png（整页截图）。

有头模式：agent-browser --headed open <url>、--headed click @e1。

等待：agent-browser wait @e1、agent-browser wait 2000。

运行 agent-browser --help 可查看所有命令。

适用场景

适用于对 PR 或分支改动所影响的页面进行端到端浏览器测试，尤其适合需要按变更文件定位受影响路由、并在本地开发服务器上验证页面渲染、交互与关键流程的场景。

限制

依赖本地开发服务器运行和 agent-browser CLI 已安装；如未安装 agent-browser，该技能无法运行。涉及 OAuth、邮件、支付、短信或外部 API 的流程需要人工介入验证。关于收费、价格、平台支持范围、效果指标等信息暂未提供。