关于 control-ui-e2e
用于通过浏览器端到端测试验证 Control UI 改动的技能，并要求保留可检查的证据。它指导 UI 开发者和测试人员设置夹具、操作可见界面、断言 Gateway 请求及保存测试产物。
主要功能
- 01按改动类型选择验证方式
- 02复用类型化 Gateway 夹具
- 03断言界面结果与 Gateway 请求
- 04捕获并保留测试产物
- 05运行针对性浏览器测试
适用场景
- 01验证路由和 Gateway 握手
- 02测试完整用户流程
- 03采集改动前后的视觉证据
- 04利用留存产物调查界面超时
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/control-ui-e2e确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
agents/openai.yamlreferences/interaction-performance.mdrun-inspector.mdvisual-proof.md详细介绍
控制界面端到端测试
工作流
- 选择验证方式。 路由、启动、Gateway 握手和完整用户流程使用现有的浏览器端到端测试流程；孤立的渲染逻辑使用浏览器测试／单元测试。阅读下方与所需结果相符的分支。 完成标准： 每项变更的行为都有明确命名的场景和验证边界。
- 准备测试数据。 使用
ui/src/test-helpers/control-ui-e2e.ts中的合成 Gateway 数据。扩展其类型化场景选项，以覆盖缺失的响应。使用现有的依赖安装；保留其他任务所用的安装。使用真实 Gateway／提供商凭据需要明确授权进行实时验证。 执行位置遵循测试政策。 完成标准： 目标流程针对预期源码或生产构建运行，并且已定义所有必需的测试响应。 - 验证行为。 在导航前安装模拟。通过可见控件执行操作，并断言渲染结果和相关 Gateway 请求。在重放前，先与产品或测试数据负责人一起解决异常行为。 完成标准： 每个场景都达到断言的结果，或者保留能够指出未满足断言的失败记录。
- 提交证据。 遵循下方的产物规则及所选分支的检查要求。分别报告已验证的结果、失败项和未测试状态。 完成标准： 每项声称的结果都有可检查的证据；并明确指出剩余缺口。
UI 压力测试
对于大幅布局／组件变更或多状态设计反馈，在构建压力测试图库前阅读视觉验证。 小幅文案／图标变更可以使用针对性验证。
默认视觉验证
对于外观变更、截图、瞬时状态捕获或视频，请阅读视觉验证。外观变更需要检查变更前后的证据；对于非视觉修复，行为断言本身可以满足要求。
交互性能审计
对于 UI 卡顿、响应能力审计或自动 Chrome 跟踪收集，在选择构建、测试数据和测量边界前阅读交互性能分析。
Run Inspector 证据
对于运行／执行／决策证据，在选择回执前阅读 Run Inspector 捕获。
产物
- 每次尝试或独立调用分配一次目录，使用
createControlUiE2eArtifactDir(scope, parentDir?)。将该目录传递给捕获辅助函数；使用不同的阶段文件名，并将报告、截图、跟踪记录和视频保存在一起。 - 辅助函数负责选择父目录。保留现有的输出控制、门禁、视口和录制选项；在最终报告中使用其返回的路径。
- 保留失败和成功的尝试。检查后，只清理明确由自己拥有的目录；绝不要清空共享产物父目录或覆盖先前的验证证据。
- 超时诊断使用现有诊断父目录中新建的子目录。Mantis 会保留每次尝试。Real-Gateway、
chat-outbox-*和chat-attachment-read-lifecycle测试套件各有独立负责人：声称可安全重放捕获前，请先确认其保留行为。
运行针对性测试
使用 package.json 中的当前脚本和
测试政策。对于工作树中的针对性浏览器测试：
node scripts/run-vitest.mjs run --config test/vitest/vitest.ui-e2e.config.ts --configLoader runner ui/src/e2e/chat-flow.messaging.e2e.test.ts
评论
支持 Markdown