ui-test

将技能更新为使用经过验证的 Browserbase 会话 (#106)

docs: 将 bb/browse-cli 引用重命名为统一的 browse CLI (#111) * docs: 将 bb/browse-cli 引用重命名为统一的 browse CLI `@browserbasehq/cli` (bb) 和 `@browserbasehq/browse-cli` 包 已合并为单一的 `browse` 包（`npm install -g browse`）。 更新所有技能文档、脚本和示例以使用新的命令 接口： - `bb fetch|search|sessions|projects|contexts|extensions` → `browse cloud ...` - `bb functions ...` → `browse functions ...` - `bb templates ...` → `browse templates ...` - `bb skills install` → `browse skills install` - `bb browse ` → 顶层 `browse ` (open, get, click, …) - `pnpm bb dev|publish` → `browse functions dev|publish` - `# bb call N/TOTAL` 强制注释 → `# browse call N/TOTAL` - extract_page.mjs 中的 `bbFetch`/`bbBrowseMarkdown` 辅助函数已重命名并 重构为调用新的 `browse cloud fetch` / `browse get markdown` 接口。 - bb-capture.mjs / bb-finalize.mjs 通过 shell 调用 `browse cloud sessions ...` SDK 变量名（`const bb = new Browserbase()`）和 `x-bb-api-key` HTTP 头保持不变。 Co-Authored-By: Claude Opus 4.7 (1M context) * fix: 使 browse 命令示例与 0.6 保持一致 * docs: 注明已弃用的 context 上传刷新 * docs: 阐明 trace 示例中 cdp 标志的用法 * docs: 在 trace 示例中依赖 cdp 守护进程持久化 * docs(browser-trace): 在后续命令中去掉多余的 target 标志 browse 守护进程在第一条命令后会缓存 target，因此 在 `browse open --cdp 9222`（或 `--remote --session "$SID"`）之后的命令 无需重复 target 标志。回应 PR #111 审查意见 中关于 EXAMPLES.md 里 `--cdp` 重复的问题。 Co-Authored-By: Claude Opus 4.7 (1M context) * docs: 阐明 cdp 守护进程行为 * fix(extract_page): 在 `browse get` 上去掉多余的 --local --headless browse 守护进程在 `browse open --local --headless` 后会缓存 target， 因此后续的 `browse get markdown` 调用不应重复模式标志。 与 skills/browser/SKILL.md 的约定一致（“将 --local、--remote、 --auto-connect 或 --cdp 放在第一条浏览器命令上”），也与 Shrey 在 5468e0e 中对 browser-trace 应用的相同修复一致。 回应 PR #111 上的 Cursor Bugbot 发现。 Co-Authored-By: Claude Opus 4.7 (1M context) * docs: 使 browse 生命周期示例保持一致 * docs: 移除过时的 fill 标志引用 * docs: 收紧 browse 技能迁移措辞 * docs: 阐明 browse stop 模式切换 * docs: 验证 browse 命令注意事项 --------- Co-authored-by: Claude Opus 4.7 (1M context) Co-authored-by: Shrey Pandya

[STG-1745] 添加 ui-test 技能 — 使用 browse CLI 进行对抗性 UI 测试 (#56) * 添加 ui-test 技能 — 使用 browse CLI 进行对抗性 UI 测试 在 #52 的基础上构建，包含三个关键新增内容： 1. 本地/远程模式选择 — localhost 使用本地浏览器（无需 API 密钥）， 已部署的站点通过 cookie-sync 使用 Browserbase 进行认证测试 2. 差异驱动测试 — 分析 git diff，针对变更内容生成定向测试， 执行前后快照对比 3. 结构化断言协议 — 带证据的 STEP_PASS/STEP_FAIL 标记， 确定性检查（axe-core、控制台错误、溢出检测），以及 对抗性测试模式（XSS、空提交、快速点击、仅键盘操作） 针对本地 Next.js 应用进行了冒烟测试：发现了真实 bug（Escape 未关闭 模态框、移动端触摸目标过小），证实对抗性模式 有效。修复了 browse eval 配方（无顶层 await，控制台捕获在页面上而非 about:blank）。 Co-Authored-By: Claude Opus 4.6 (1M context) * 添加使用 Browserbase 命名会话的并行测试工作流（工作流 C） 通过利用 browse CLI 的 --session 标志为每个测试组启动独立的 Browserbase 浏览器，实现并发测试执行，并通过 Agent 工具 扇出并合并结果报告。 Co-Authored-By: Claude Opus 4.6 * 添加权限设置文档以避免 browse 命令的审批疲劳 记录如何将 Bash(browse:*) 添加到项目或用户设置中， 以便用户不会在每个 browse snapshot/click/eval 时被提示。 Co-Authored-By: Claude Opus 4.6 * 移除 YAML 套件格式并简化代码库分析 — 让 agent 自行处理 - 移除 .ui-tests/suite.yml 格式和生成流水线 - 用轻量级探索性测试替换工作流 B（8 步代码库分析） - 将 references/codebase-analysis.md 简化为快速提示（框架检测、路由查找） - 移除示例 YAML 套件文件 - 更新 README 以反映无产物理念 - 从 allowed-tools 中移除 Write 工具（无需生成文件） 代码生成/套件方法可在以后作为 v2 发布。 Co-Authored-By: Claude Opus 4.6 * 修复 Cursor Bugbot 审查中的 3 个 bug - XSS 检查：用输入值检查替换误报的内联脚本计数 - 控制台捕获：在示例 6 片段中保留原始 console.error - 表单标签：在 browser-recipes.md 中使用原生 i.labels API（与 SKILL.md 一致） Co-Authored-By: Claude Opus 4.6 * 添加权限设置文档以避免 browse 命令的审批疲劳 同时强化自动选择规则：localhost → browse env local， 已部署 URL → browse env remote，在所有工作流中一致应用， 包括并行会话。 Co-Authored-By: Claude Opus 4.6 * 简化 env 规则：只说 localhost → local，不规定 remote Co-Authored-By: Claude Opus 4.6 * 修复并行测试文档：本地也可用，修复权限模式 - 移除“仅远程”限制 — 命名会话在本地模式下也可用 - 添加 BROWSE_SESSION=* 权限模式以避免并行运行时的审批疲劳 Co-Authored-By: Claude Opus 4.6 * 添加设计一致性检查 — 从应用本身学习品味 如果 references/design-system.md 存在，则将其用作基准。 否则，截取 2-3 个现有页面的截图以建立基线 模式（间距、圆角、颜色、排版），并将变更页面 与之对比。 Co-Authored-By: Claude Opus 4.6 * 添加失败时的截图捕获以作为视觉 bug 证据 当测试步骤失败时，该技能现在指示 agent 截取 截图并保存到 .context/ui-test-screenshots/.png， 在 STEP_FAIL 标记和最终报告中引用，以便开发者 确切看到出了什么问题。 Co-Authored-By: Claude Opus 4.6 * 添加 Browserbase 设计系统参考以实现品味感知测试 从 browserbase-brand-guidelines 技能中提取：颜色、排版、 边框圆角、间距网格、组件模式和视觉原则。 ui-test 技能在存在时会将变更页面与此对比。 Co-Authored-By: Claude Opus 4.6 * 为子代理架构重构预算系统 重写预算与限制部分以使用协调者/子代理模型： 主代理规划和委派，子代理执行实际测试， 每个子代理有 20 步硬上限。默认运行的墙钟时间目标约 10 分钟。 * 添加工艺质量判断和运气视角以进行更深入的 UI 评估 将两个外部框架集成到测试技能中： - 判断（Emil Kowalski + Josh Puckett + UI Wiki）：9 个参考文件 涵盖动画、表单、触摸/无障碍、排版、打磨、组件 设计、营销、性能，以及 152 条 UI wiki 规则。添加确定性 eval 检查，用于触摸目标、iOS 缩放、transition:all、z-index 滥用 和表单标签。添加基于截图的评审方法。 - 运气（soleio）：组装理论元评估视角 — 7 个方面改编 到 UI（偿付能力、梯度耦合、兼容性、生态位构建、 循环、集成、路径敏感性），用于“这个 UI 会繁荣吗？” Co-Authored-By: Claude Opus 4.6 * 移除工艺质量判断和运气视角以保持技能专注 删除工艺质量判断部分、运气视角元评估， 以及所有 references/judgement/ 文件。保持技能专注于功能 测试、无障碍和 UX 启发式。 Co-Authored-By: Claude Opus 4.6 * 将 design-system.md 设为用户提供的文件，示例作为模板发布 将 design-system.md 重命名为 design-system.example.md，并附上 用户复制并填写自己品牌令牌的说明。该技能读取 design-system.md（用户创建），而非示例。 Co-Authored-By: Claude Opus 4.6 * 修复 Cursor Bugbot 审查中的 5 个 bug（第 2 轮） - 在 axe-core 脚本注入后添加 browse wait timeout 3000（SKILL.md、browser-recipes.md） - 修复表单标签检查以包含 aria-label 和 aria-labelledby（SKILL.md） - 修复焦点环检测以同时检查 box-shadow，而不仅是 outline（browser-recipes.md） - 修复示例 8 中的 window.__capturedErrors → window.__logs（EXAMPLES.md） - design-system.md 已在先前提交中修复（重命名为 .example.md） Co-Authored-By: Claude Opus 4.6 * 移除 codebase-analysis.md — 没有测试生成流程则不需要 Co-Authored-By: Claude Opus 4.6 * 再修复 3 个 Bugbot 问题：aria-labelledby、示例中的 axe-core 等待 - 在 browser-recipes.md 的 hasLabel 检查中添加 aria-labelledby - 在示例 4 和 7 中 axe-core 注入后添加 browse wait timeout 3000 - hasFocus box-shadow 检查已在先前提交中修复 Co-Authored-By: Claude Opus 4.6 * 重构 SKILL.md 以符合 agentskills.io 规范（→459 行） - 修复 allowed-tools 分隔符：按规范从逗号改为空格 - 提取对抗性模式 → references/adversarial-patterns.md - 提取并行测试 → references/parallel-testing.md - 提取设计一致性 → references/design-consistency.md - 用摘要表 + 链接替换内联确定性检查 - 移动 rules/ux-heuristics.md → references/（消除非标准目录） - 为所有参考文件添加条件加载触发器 - 更新 README.md 文件树 零内容丢失 — 所有提取的部分都存在于参考文件中，并带有 “何时加载”指导以实现渐进式披露。 Co-Authored-By: Claude Opus 4.6 (1M context) * fix: 从预算部分移除不准确的时间计算 删除“每条 browse 命令约 30 秒”的说法及所有推导出的墙钟 估算。预算现在纯粹以步骤/轮次定义，这才是 限制支出的实际约束。 Co-Authored-By: Claude Opus 4.6 (1M context) * feat: 添加带嵌入截图的 HTML 报告生成（阶段 7） 添加一个自包含的 HTML 报告，审查者可在浏览器中打开。 截图以 base64 嵌入，因此该文件可作为单个产物离线工作。 失败的测试默认展开渲染并内联截图； 通过的测试折叠。 Co-Authored-By: Claude Opus 4.6 (1M context) * style: 将 Browserbase 品牌指南应用于 HTML 报告模板 浅色主题，暖调米白（#F9F6F4）背景，通过 Google Fonts 使用 Inter 字体， 失败用品牌橙红（#F03603），通过用品牌绿 （#90C94D），建议用品牌蓝（#4DA9E4）。页眉和页脚内联 Browserbase logo SVG。按品牌设计系统，边框优先于阴影。 Co-Authored-By: Claude Opus 4.6 (1M context) * fix: 使页眉 logo 链接到 browserbase.com 并带“Powered by”标签 Co-Authored-By: Claude Opus 4.6 (1M context) * 添加多轮扫描测试以实现更一致的 bug 发现 将测试运行重构为从不同角度的 2-3 轮扫描： 1. 确定性扫描：固定清单（axe-core、控制台错误等）— 每次运行结果相同 2. 探索性功能：交互、边缘情况、对抗性输入 3. 探索性视觉：响应式布局、键盘导航、设计一致性 还添加了强制页面发现步骤，以便覆盖每条路由。 这解决了重复运行会浮现不同 bug 的不一致问题。 Co-Authored-By: Claude Opus 4.6 * 回退“添加多轮扫描测试以实现更一致的 bug 发现” 本次回退提交 379e4af97640376763aeb9e9aefc200c4a221690。 * docs(ui-test): 使本地环境指导与 browse CLI 保持一致 * 重构预算系统：原则优先于固定数字，多角度规划 - 用指导原则替换僵化的预算表（20 步、5 个代理、快速/默认/彻底 模式），由 agent 自行决定投入规模 - 添加多角度规划流程：从 3 个视角规划，去重， 执行一次 — 在不重复运行相同检查的情况下产生广泛覆盖 - 保留 20 步安全阀作为失控上限，而非目标 - 完全移除调整预算模式 — 只有一种测试方式 Co-Authored-By: Claude Sonnet 4.6 (1M context) * 将多角度规划强制为执行前的必需步骤 使三轮规划成为强制且输出可见 — agent 必须在允许启动任何子代理之前写出全部三轮 和合并后的计划。防止直接跳到执行。 Co-Authored-By: Claude Sonnet 4.6 (1M context) * 修复规划/执行分离：规划在主代理中进行，而非子代理 - 规划轮次发生在主代理自己的响应中，绝不委派 - 子代理接收特定的编号测试列表并仅运行这些测试 - 子代理不探索或规划 — 执行分配的测试并停止 - 在每个子代理提示中添加明确的步骤预算要求 - 步骤启发式（25/40/75）是起点，而非规则 Co-Authored-By: Claude Sonnet 4.6 (1M context) * 防止子代理生成 HTML 报告 子代理必须仅以文本形式返回 STEP_PASS/STEP_FAIL 标记。 只有协调的主代理生成最终 HTML 报告。 Co-Authored-By: Claude Sonnet 4.6 (1M context) * 在报告中用“测试”替换“步骤” — 步骤是管道，不是指标 - 报告标题：Tests | Passed | Failed | Agents（而非 Total Steps） - 将 {{TOTAL_STEPS}} 替换为 {{TOTAL_TESTS}}，添加 {{AGENT_COUNT}} - 移除多余的 {{TEST_COUNT}} 占位符 Co-Authored-By: Claude Sonnet 4.6 (1M context) * 为预算命中添加 STEP_SKIP，防止主代理重试 - 子代理对未完成的测试报告 STEP_SKIP||budget reached - 主代理按原样接受部分结果，绝不重新运行子代理 - 在子代理预算指导中添加 25/40/75 步骤启发式 - 跳过的测试出现在最终报告中，以便开发者了解覆盖缺口 Co-Authored-By: Claude Sonnet 4.6 (1M context) * feat: 在 HTML 报告标题中添加可点击的 PR 链接 报告 h1 现在使用 {{TITLE_HTML}}，支持将 PR 引用包裹在 标签中。链接以品牌红色样式显示， 悬停时带下划线。 Co-Authored-By: Claude Opus 4.6 (1M context) * fix(ui-test): 添加预检以验证分支和服务器健康 阶段 3 之前仅扫描端口。现在它还指示 agent： - 测试 PR 时检出正确的分支 - 切换分支后安装依赖 - 验证服务器实际渲染内容（而不仅是 HTTP 200 但存在构建错误） 从一次真实失败中学习：针对运行错误分支且构建损坏的 开发服务器进行测试，在发现应用未渲染之前 将整个步骤预算浪费在登录尝试上。 Co-Authored-By: Claude Opus 4.6 (1M context) --------- Co-authored-by: Claude Opus 4.6 (1M context) Co-authored-by: shubh24