Verifying OpenClaw Screen Changes by State with control-ui-e2e
機械翻訳 / Machine-translated
機械翻訳 / Machine-translated
Original article: Verifying OpenClaw Screen Changes by State with control-ui-e2e (cccskills)
Skill page: control-ui-e2e
Key takeaways from this article
control-ui-e2e is a skill for developers working on the OpenClaw Control UI.
Once installed, it lets you verify screen changes through a state-by-state gallery and real-browser operation tests.
It also provides a mechanism for preserving before/after screenshots and reviewer comments.
The sections below introduce what you get when you make a request, how to install it, and the prerequisites and caveats to keep in mind.
After making a screen change, a single request is all it takes for the agent to build a gallery of state-specific display examples and save before/after screenshots.
A typical request might look like this:
I changed the layout of the input area on the chat screen.
Please create a gallery showing the normal, loading, empty, and error states side by side, and save before/after screenshots as well.
The agent starts by reading the attached documentation that outlines the visual verification steps.
It then produces an HTML gallery displaying each state — normal, loading, empty, and error — alongside one another.
Each display example can have a comment attached, and the gallery can be saved or exported.
Because the change affects appearance, the agent captures screenshots before and after, reviews their contents, and then saves them.
Reports, screenshots, traces (operation recordings), and videos are all placed together in a folder created for each run.
The final report clearly separates what was verified successfully, what failed, and which states have not yet been tested.
control-ui-e2e is a skill that handles verifying screen changes from both a visual and an operational standpoint, and capturing evidence of the results.
It is part of the OpenClaw repository openclaw/openclaw and is intended for Control UI developers.
Depending on the nature of your request, the skill follows different steps:
| Request type | What the skill does |
|---|---|
| Major layout changes, design review across multiple states | Creates a stress-test gallery organized by state |
| Visual changes, screenshots, video | Saves verified before/after images |
| Slow screens, poor responsiveness | Collects Chrome traces to investigate operational performance |
| Need a record of execution and decisions | Captures Run Inspector recordings |
When changing a screen or component that has multiple states, the gallery of display examples is your primary tool.
It lets you gather feedback while looking at concrete examples, making it useful as material for design reviews.
For small changes such as text or icon updates, a targeted check of just those areas is sufficient.
For situations where you need to verify network communication and screen display together — such as sending a chat message — real-browser tests powered by Vitest and Playwright are available.
The skill mocks Gateway responses and verifies the full flow from screen startup through communication to post-interaction display.
If any responses are missing, the setup of existing test helper code can be extended to cover them.
The testing process follows four stages:
Each stage has completion criteria, and every verified result must be accompanied by visually confirmable evidence.
If unexpected behavior occurs, resolve the cause — either on the product side or in the test data — before re-running.
Both successful and failed runs are preserved without deletion.
Previous evidence is never overwritten, and shared save locations are never cleared in bulk.
This means you can always trace back to "what happened on which run."
Installation requires just one command.
With npx skills add, you can choose the target agent — Claude Code, Codex, or others.
npx skills add https://github.com/openclaw/openclaw --skill control-ui-e2e
If you prefer to let the agent handle it, send the following message as-is:
次の 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/ に配置してください。
Placement locations are as follows:
| Agent | Use across all projects | Use in a specific project only |
|---|---|---|
| Claude Code | ~/.claude/skills/ | Project's .claude/skills/ |
| Codex | ~/.agents/skills/ | Project's .agents/skills/ |
This skill is located at .agents/skills/control-ui-e2e inside the OpenClaw repository.
It is designed to be used when working within that repository.
Requests can be made in any language.
Here are three representative examples:
Create a gallery that lets me compare the normal, empty, and error states of this settings screen.
What you get back is an HTML gallery with display examples for each state.
Comments on each example can be saved and exported to hand off to a reviewer.
Mock the Gateway response and test what the screen shows after sending a message in chat.
A browser test using a mock Gateway is prepared.
The test verifies the display after the send action and the requests made to the Gateway.
When a test fails, the unmet verification items are recorded.
I changed the layout — please save before/after screenshots and report back.
Before and after screenshots are captured and verified, then saved to a per-run folder.
The report clearly separates verified results from states that have not yet been checked.
To run a specific test locally, execute the following command from the repository root:
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
As a prerequisite, you need an OpenClaw development environment with its dependencies already installed.
The skill's policy is to use existing installations and not disrupt installations used by other workflows.
Where tests are run follows the testing policy defined within the repository.
Verification is normally performed using mock data without real credentials.
Explicit permission is required to use real Gateway or model provider credentials.
Some test suites related to chat send-pending states and file attachments are managed by a separate owner.
For this reason, the skill confirms how records are preserved before asserting results.
A gallery is not a substitute for operation tests.
Visual verification and behavioral verification are performed separately.
Generated images and videos are generally not committed to the repository.
This skill assumes the test helper code and scripts specific to OpenClaw Control UI.
It is not documented for use with other web applications.
The license is MIT.
Please read through SKILL.md and the accompanying files before installing.
The following skills are for OpenClaw development and can be used before or after verifying screen changes.
agent-transcript is a skill that creates records suitable for attaching to GitHub PRs or issues, derived from agent work logs. It can be used alongside this skill when explaining screen verification results in a PR.
autoreview reviews code using a shared review procedure. It is suited for code review before submitting screen changes.
openclaw-docker-e2e-authoring is a skill for creating tests that verify end-to-end behavior in OpenClaw's Docker environment. Use it in combination with this skill when you want to verify behavior beyond the screen layer.
This skill uses the dependencies already installed in your OpenClaw development environment.
It does not reinstall them — it uses the existing installation.
Make sure the repository's dependencies are installed beforehand.
No.
For small changes like text or icons, a targeted check of just that area is sufficient.
Galleries are for major layout changes or design reviews spanning multiple states.
This skill is written with the assumption of OpenClaw Control UI's test helper code and test configuration.
Its use with other applications is not documented.
Think of it as a skill for use within the OpenClaw repository.
Normally, verification uses a mock Gateway.
Explicit permission is required for verification that uses real Gateway or model provider credentials.
control-ui-e2e is a skill for verifying OpenClaw Control UI screen changes through a state-by-state gallery and browser tests using a mock Gateway.
Because before/after screenshots, comments, and per-run records are all preserved, it makes it easier to demonstrate your changes during a review.
It serves as a tool for anyone working on OpenClaw's screens to verify and share their changes.
For more details, see the cccskills page.
This article is a repost of "Verifying OpenClaw Screen Changes by State with control-ui-e2e" from cccskills.
Full skill details and installation instructions are available on the cccskills control-ui-e2e page.