skills.rest
AmirulAndalib
AmirulAndalibCOMMUNITY
Explore all skills by this author →
GitHub

control-ui-e2e

Tests Control UI changes with Vitest and Playwright against a mocked Gateway WebSocket.

Updated Jun 19, 2026
Search Tags:#vitest#browser automation#playwright#e2e testing#visual regression#control ui#websocket mock
One-click install
npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill control-ui-e2e-amirulandalib
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: control-ui-e2e
Source: https://github.com/AmirulAndalib/Vilvona-AI/tree/main/.agents/skills/control-ui-e2e
Command: npx skills add https://github.com/AmirulAndalib/Vilvona-AI --skill control-ui-e2e-amirulandalib

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Verifying Control UI changes requires a real browser flow with deterministic Gateway data, which is hard to reproduce when live providers, real channel credentials, or an actual Gateway are involved. ## Core Features & Use Cases - Mocked Gateway E2E Testing: Run Vitest + Playwright end-to-end tests against a mocked Gateway WebSocket so chat flows, routing, and app boot are verified deterministically. - Visual Proof Capture: Drive Chromium with Playwright to record videos and screenshots of each meaningful UI state for agent-verifiable browser proof. - Use Case: After changing the chat composer, run the focused E2E test, then record a video of the mocked Control UI showing the message send, the Gateway chat.send request, and the rendered assistant reply. ## Quick Start Use the control-ui-e2e skill to verify my Control UI change with the mocked Vitest and Playwright browser lane and capture screenshots as proof.

Frequently Asked Questions about control-ui-e2e

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I run a single Playwright E2E test for the Control UI?▼

Run one E2E test with node scripts/run-vitest.mjs run --config test/vitest/vitest.ui-e2e.config.ts --configLoader runner followed by the test file path. For the full local lane, use pnpm test:ui:e2e in a normal checkout.

How do I mock a WebSocket Gateway in Playwright tests?▼

Use the installMockGateway helper from ui/src/test-helpers/control-ui-e2e.ts before calling page.goto. It lets you seed history messages, wait for specific requests like chat.send, and emit responses such as emitChatFinal.

Can I record videos of Playwright browser tests?▼

Yes, create the browser context with browser.newContext using recordVideo options specifying a directory and size, then close the context to finalize the video. Store artifacts under .artifacts/control-ui-e2e/ and do not commit them.

Should E2E tests use real API keys or a live Gateway?▼

No, scenarios must stay deterministic with the mocked Gateway and no live provider keys or real channel credentials. Only use a real Gateway when the user explicitly asks for live proof.

When should I use unit tests instead of E2E browser tests?▼

Prefer existing .browser.test.ts or unit tests for narrow rendering logic. Use the E2E lane only when proof must cover routing, app boot, Gateway handshake, requests, and visible UI behavior together.

Related Skills

Explore More Software Engineering Skills→
openclawopenclaw
388.4k

control-ui-e2e

Run mocked Vitest and Playwright end-to-end browser tests for the OpenClaw Control UI.

Official
Advanced
anderson-0anderson-0
4

verification

Require verification evidence before reporting software work as complete.

Community
Intermediate
mikemylmikemyl
1

react-testing

Test React components, hooks, and context providers with Vitest browser mode.

Community
Intermediate
JEROME-PRAKASH-LJEROME-PRAKASH-L
1

control-ui-e2e

Tests Control UI changes with Vitest and Playwright against a mocked Gateway WebSocket.

Community
Intermediate