|
1 | 1 | --- |
2 | 2 | name: control-ui-e2e |
3 | | -description: Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, or agent-verifiable browser proof. |
| 3 | +description: Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof. |
4 | 4 | --- |
5 | 5 | |
6 | 6 | # Control UI E2E |
@@ -30,6 +30,17 @@ pnpm test:ui:e2e
|
30 | 30 | |
31 | 31 | If dependencies are missing in a Codex worktree, install once with `pnpm install`; for broad GUI proof or dependency-heavy checks, use Testbox/Crabbox instead of running a wide local pnpm lane. |
32 | 32 | |
| 33 | +## Visual Proof Default |
| 34 | + |
| 35 | +When running mocked Control UI/dashboard validation for a user-facing feature, produce visual proof by default unless the user explicitly opts out. |
| 36 | + |
| 37 | +- Keep the Vitest E2E assertions deterministic; do not commit generated screenshots or videos. |
| 38 | +- After or alongside the focused E2E test, run the mocked Control UI app when available, for example `pnpm dev:ui:mock -- --port <port>`. |
| 39 | +- Drive Chromium with Playwright against the local mock URL and capture a video plus screenshots for each meaningful state: initial view, interaction input, result state, and final/paginated/selected state. |
| 40 | +- Use `browser.newContext({ recordVideo: { dir, size }, viewport })`, `page.screenshot({ path })`, and close the context before reporting the video path. |
| 41 | +- Put artifacts under `.artifacts/control-ui-e2e/<short-feature-name>/` or another clearly named local temp directory, and report the absolute paths in the final answer. |
| 42 | +- If visual proof is blocked, state the exact blocker and still report the textual E2E evidence. |
| 43 | + |
33 | 44 | ## Mock Pattern |
34 | 45 | |
35 | 46 | Start the app server, install the mock before `page.goto`, then assert both Gateway traffic and visible UI: |
|
