跳到正文
cccskills
免费在 GitHub 公开中文介绍

control-ui-e2e

通过界面状态对比图库和真实浏览器操作测试,检查OpenClaw Control UI的界面改动,保存用户评论以及改动前后经检查的截图。

原文查看原文说明

Control UI browser tests, visual reviews and recordings, interaction performance audits, and Run Inspector evidence.

AI 评分90分/ 100查看安装方法

适用场景

  • 对比加载、空白和错误状态
  • 收集对界面改动的意见
  • 通过模拟Gateway验证聊天操作
  • 保存界面改动前后的截图

中文介绍

功能

此技能从外观和操作两个方面检查OpenClaw Control UI的界面设计与修改。它会制作HTML图库,并排展示正常、加载中、空白、错误等状态,还能保存和导出针对各个示例的评论。

它使用Vitest和Playwright模拟Gateway响应,贯通验证界面启动、通信以及操作后的显示结果。涉及外观的修改会保留改动前后经过检查的截图。

适用场景

适合修改具有多种状态的页面或组件,以及对照具体显示示例收集意见。对于聊天发送等需要同时检查通信和界面显示的开发任务,也可使用此技能。

使用示例

  • “制作一个图库,对比这个页面的正常、空白和错误状态。”
  • “模拟Gateway响应,测试发送消息后的显示结果。”
  • “保存布局修改前后的截图。”

注意事项

需要具备OpenClaw开发环境,并已安装依赖包。验证通常不使用真实认证信息。图库不能替代操作测试,生成的图片和视频原则上不提交到版本库。

本介绍由 AI(OpenAI Codex)根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容,从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么
A良好资料明确列出界面改动、操作测试和外观检查的用途及验证范围。
步骤具体性步骤、输入输出和示例是否具体
A良好提供从准备模拟数据到验证结果的步骤、测试命令和证据保存规则。
安全性发送数据、删除文件、执行命令等是否有说明
A良好使用真实认证信息须获明确授权,且禁止删除共享保存目录或覆盖既有证据。
安装难易度所需工具和 API 密钥是否少且有说明
B部分不足依赖既有安装环境和另行提供的测试规范,所给正文未含安装步骤。

总分按每项 A=25 分、B=15 分、C=5 分相加。 由 AI(OpenAI Codex)于 2026年10月19日 评估。仅供参考,安装前请同时查看原文。

如果您认为评估有误,请申请复核

请写明哪一项有误以及原因。无需登录。我们会对照 SKILL.md 重新评估,并在此处更新结果。

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

包含的文件(5)

  • SKILL.md3.6 KB
  • agents/openai.yaml264 B
  • references/interaction-performance.md4.0 KB
  • references/run-inspector.md1.3 KB
  • references/visual-proof.md5.2 KB

SKILL.md(原文)

安装前可以查看交给 AI 代理的指令内容。

Control UI E2E

Workflow

  1. Select proof. Use the existing browser E2E lane for routing, boot, Gateway handshake, and complete user flows; use browser/unit tests for isolated render logic. Read each branch below that matches the requested outcome. Done: every changed behavior has a named scenario and proof boundary.
  2. Prepare fixtures. Reuse ui/src/test-helpers/control-ui-e2e.ts with synthetic Gateway data. Extend its typed scenario options for missing responses. Use the existing dependency installation; preserve installs used by other jobs. Real Gateway/provider credentials require explicit live-proof authorization. Follow testing policy for execution placement. Done: the target flow runs against the intended source or production build and each required fixture response is defined.
  3. Exercise behavior. Install the mock before navigation. Act through visible controls and assert both the rendered outcome and relevant Gateway requests. Resolve unexpected behavior at the product or fixture owner before replaying. Done: each scenario reaches its asserted outcome, or has a retained failure identifying the unmet assertion.
  4. Deliver evidence. Apply the artifact rules below and the selected branch's checks. Report verified results, failures, and untested states separately. Done: every claimed result has inspectable evidence; remaining gaps are named.

UI Stress Test

For substantial layout/component changes or multi-state design feedback, read visual proof before building the stress-test gallery. Small copy/icon changes may use focused proof.

Visual Proof Default

For appearance changes, screenshots, transient-state capture, or video, read visual proof. Appearance changes require inspected before/after evidence; behavior assertions alone can suffice for nonvisual fixes.

Interaction Performance Audits

For UI slowness, responsiveness audits, or automatic Chrome trace collection, read interaction profiling before choosing the build, fixtures, and measurement boundaries.

Run Inspector evidence

For run/execution/decision evidence, read Run Inspector capture before selecting a receipt.

Artifacts

  • Allocate with createControlUiE2eArtifactDir(scope, parentDir?), once per attempt or standalone invocation. Pass the directory to capture helpers; keep distinct stage filenames and the report, screenshots, traces, and video together.
  • The helper owns parent selection. Preserve existing output controls, gates, viewport, and recording options; use its returned path in the final report.
  • Retain failed and successful attempts. Clean up only exact owned directories after review; never clear shared artifact parents or overwrite earlier proof.
  • Timeout diagnostics use fresh children of their existing diagnostic parent. Mantis retains every attempt. Real-Gateway, chat-outbox-*, and chat-attachment-read-lifecycle suites have separate owners: verify their retention behavior before claiming replay-safe capture.

Running a focused test

Use the current scripts in package.json and testing policy. For a worktree's focused browser test:

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

评价

还没有评价。欢迎分享你的使用感受。

评论

无需登录即可发表。欢迎分享使用感受、提问,或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

提交后会立即公开。请勿填写邮箱、电话等个人信息。URL 最多 2 个。

0 / 1000 字

此表单受 reCAPTCHA 保护,适用 Google 的隐私权政策和服务条款。

同一仓库的技能

1password

免费有简介AI 评分 100分

检查1Password命令行工具的安装和认证,将已保存的密码或API密钥传入命令及配置。支持桌面应用集成、服务账号和交互式登录,并先验证访问权限。

  • 安装1Password命令行工具
  • 将API密钥传入命令
  • 在CI中使用服务账号认证
openclaw/openclaw39.2万2026年10月18日 更新

acp-router

免费有简介AI 评分 80分

将提交给OpenClaw的自然语言请求转交给Claude Code等外部编程智能体,通过ACP或acpx启动、继续会话,并保留对话上下文。

  • 在讨论串中启动Claude Code
  • 继续外部智能体的现有工作
  • 通过acpx直接传递指令
openclaw/openclaw39.2万2026年10月18日 更新

add-model-provider

免费有简介AI 评分 100分

为OpenClaw添加模型服务商,并通过实际回复验证连接。凭据以环境变量或文件引用的形式配置,同时验证设置并报告测试结果。

  • 为OpenClaw添加模型服务商
  • 通过引用配置认证凭据
  • 确认模型能返回实际回复
openclaw/openclaw39.2万2026年10月18日 更新

agent-transcript

免费有简介AI 评分 90分

将AI代理的工作日志整理为可附在GitHub拉取请求或议题中的记录,筛选相关内容、移除敏感信息,并支持预览及经单独授权后的发布。

  • 为拉取请求整理代理工作记录
  • 从本地日志提取相关请求和结果
  • 预览已移除敏感信息的记录
openclaw/openclaw39.2万2026年10月18日 更新

apple-notes

免费有简介AI 评分 100分

通过代理管理macOS上的Apple Notes笔记,支持创建、查看、搜索、编辑和删除,在文件夹之间移动笔记,并将选定笔记导出为HTML或Markdown。

  • 创建带标题的笔记
  • 按文件夹筛选或模糊搜索笔记
  • 编辑笔记并整理文件夹
openclaw/openclaw39.2万2026年10月18日 更新

apple-reminders

免费有简介AI 评分 70分

通过Mac查看、添加和编辑Apple Reminders中带截止时间的待办事项,管理列表并完成或删除任务,整理在iPhone或iPad上查看的个人任务。

  • 查看今天和已逾期的任务
  • 添加带截止日期的个人待办事项
  • 整理iPhone或iPad上的任务
openclaw/openclaw39.2万2026年10月18日 更新

查看 openclaw 的全部技能

报告此技能的问题