使用 control-ui-e2e 按状态验证 OpenClaw 界面变更
機械翻訳 / Machine-translated
機械翻訳 / Machine-translated
原文链接：使用 control-ui-e2e 按状态验证 OpenClaw 界面变更（cccskills）
技能页面：control-ui-e2e
本文结论
control-ui-e2e 是一个面向 OpenClaw Control UI 开发者的技能。
安装后，可以通过按状态分类的画廊和真实浏览器的交互测试来验证界面变更。
同时也提供了保存变更前后截图及用户评论的机制。
以下将依次介绍执行请求后会返回什么、安装方式，以及使用时的前提条件和注意事项。
修改界面后只需一句话，Agent 便会生成一个按状态排列显示示例的画廊，并保存变更前后的截图。
请求的示例如下：
我修改了聊天界面的输入框布局。
请生成一个并排展示正常、加载中、空内容、报错状态的画廊，并保存变更前后的截图。
Agent 首先会阅读附带的外观确认操作说明文档，
然后生成一个包含正常、加载中、空内容、报错各状态的 HTML 画廊。
每个显示示例都可以添加评论，并支持保存和导出。
由于是影响外观的修改，Agent 会在确认内容后拍摄变更前和变更后的截图并予以保存。
报告、截图、操作追踪记录（Trace）和视频均会统一存放在每次执行时创建的文件夹中。
最终报告中，已确认的结果、失败项以及尚未验证的状态会分别列出。
control-ui-e2e 是一个负责从外观和交互两个维度验证界面变更、并留存证据的技能。
它属于 OpenClaw 仓库 openclaw/openclaw 中面向 Control UI 开发者的技能。
根据请求内容的不同，技能所执行的操作如下表所示：
| 请求内容 | 技能执行的操作 |
|---|---|
| 大规模布局变更、多状态设计确认 | 生成按状态分类的压力测试画廊 |
| 外观变更、截图、视频 | 保存已确认的变更前后截图 |
| 页面响应缓慢、操作不流畅 | 收集 Chrome Trace 并分析交互性能 |
| 需要执行和判断的记录 | 导入 Run Inspector 记录 |
当需要修改具有多种状态的界面或组件时，可以使用并排展示各状态的画廊。
由于能够基于具体的显示效果收集意见，画廊可作为设计评审的参考材料。
如果只是文字或图标等小范围修改，仅针对相关部分进行确认即可。
对于需要同时验证网络通信和界面显示的场景（如聊天消息发送），可以使用基于 Vitest 和 Playwright 运行的真实浏览器测试。
该机制会模拟 Gateway 的响应，从界面启动到网络通信、操作后的页面显示，进行全流程验证。
如果缺少某些响应，可以扩展现有测试辅助代码的配置来补充。
测试流程分为以下四个阶段：
每个阶段都有完成条件，且验证结果必须附有可视化的确认证据。
如果出现预期之外的行为，需先在产品侧或测试数据侧排查并解决原因，再重新执行。
无论成功还是失败的执行记录都会完整保留，不会被删除。
不会覆盖上一次的证据，也不会批量清空共享的保存目录。
因此，事后可以追溯"哪次执行发生了什么"。
安装只需一条命令。
使用 npx skills add 时，可以选择安装目标 Agent，例如 Claude Code 或 Codex。
npx skills add https://github.com/openclaw/openclaw --skill control-ui-e2e
如果委托 Agent 安装，请直接发送以下内容：
次の Agent Skill をインストールしてください。
https://github.com/openclaw/openclaw/tree/main/.agents/skills/control-ui-e2e
まず SKILL.md と付属ファイルの中身を確認し、不審な処理（外部への送信、認証情報の読み取りなど）がないことを確かめてから、Claude Code なら ~/.claude/skills/control-ui-e2e/、Codex なら ~/.agents/skills/control-ui-e2e/ に配置してください。
存放位置如下：
| Agent | 全项目通用 | 仅限特定项目 |
|---|---|---|
| Claude Code | ~/.claude/skills/ | 项目下的 .claude/skills/ |
| Codex | ~/.agents/skills/ | 项目下的 .agents/skills/ |
本技能存放在 OpenClaw 仓库内的 .agents/skills/control-ui-e2e 目录中，
前提是在该仓库中工作时使用。
请求可以用中文提交。
以下列举三个典型示例：
请为这个设置页面的正常、空内容、报错状态生成一个可对比的画廊
返回的是一个按状态排列各显示示例的 HTML 画廊。
可以为每个示例添加评论，并导出后交给评审人员。
请模拟 Gateway 的响应，测试在聊天中发送消息后的页面显示
系统会准备一个使用模拟 Gateway 的浏览器测试。
发送操作后的显示效果以及发往 Gateway 的请求，均通过该测试进行验证。
如果测试失败，未能满足的验证项目会被记录在案。
我修改了布局，请保存变更前后的截图并生成报告
流程为：拍摄变更前后的截图并确认，然后保存到各次执行对应的文件夹中。
报告中，已确认的结果和尚未确认的状态会分别列出。
如果只想在本地运行某个特定测试，请在仓库根目录执行以下命令：
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
使用前提是已有 OpenClaw 开发环境，且相关依赖包已安装。
本技能的原则是使用现有安装，不破坏其他工作所依赖的安装环境。
测试的执行位置遵循仓库内的测试规范。
验证通常使用模拟数据进行，不使用真实凭据。
使用真实 Gateway 或模型服务提供商的凭据进行验证，需要明确授权。
部分涉及聊天消息发送等待或附件的测试组由其他负责人管理，
因此需要确认记录保存情况后再给出结果。
画廊不能替代交互测试。
外观验证和行为验证需分别进行。
生成的图片和视频原则上不提交到代码仓库。
本技能以 OpenClaw Control UI 的测试辅助代码和脚本为前提，
未说明适用于其他 Web 应用。
许可证为 MIT。
安装前请先阅读 SKILL.md 及附带文件的内容。
以下是同属 OpenClaw 开发、可在界面验证前后配合使用的技能。
agent-transcript 是一个从 Agent 的工作日志中生成可附在 GitHub PR 或 Issue 上的记录的技能。
在 PR 中说明界面验证结果时，可以配合使用。
autoreview 会按照统一的评审流程对代码进行审查，
适合在提交界面变更前进行代码评审时使用。
openclaw-docker-e2e-authoring 是一个在 OpenClaw 的 Docker 环境中编写端到端行为验证测试的技能。
如果需要验证界面之外的整体行为，可与本技能结合使用。
本技能使用的是 OpenClaw 开发环境中已有的依赖包，
不会重新安装，而是直接使用现有安装。
请事先在仓库中安装好相关依赖包。
不需要。
如果只是文字或图标等小范围修改，仅针对该部分进行确认即可。
画廊适用于大规模布局变更或多状态设计确认的场景。
本技能是基于 OpenClaw Control UI 的测试辅助代码和测试配置编写的，
未说明适用于其他应用。
请将其视为专用于 OpenClaw 仓库的技能。
通常使用模拟 Gateway 进行验证。
使用真实 Gateway 或模型服务提供商凭据进行验证，需要明确授权。
control-ui-e2e 是一个通过按状态分类的画廊和使用模拟 Gateway 的浏览器测试，来验证 OpenClaw Control UI 界面变更的技能。
由于可以保留变更前后的截图、评论以及各次执行的记录，在评审时更便于展示变更内容。
适合参与 OpenClaw 界面开发的人员，作为确认并分享变更的工具使用。
详情请访问 cccskills 页面。
本文转载自 cccskills 的文章「使用 control-ui-e2e 按状态验证 OpenClaw 界面变更」。
技能详情和安装方法请访问 cccskills 的 control-ui-e2e 页面。