skills.rest
JEROME-PRAKASH-L
JEROME-PRAKASH-LCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

control-ui-e2e

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

1|Updated Jun 9, 2026
Search Tags:#vitest#browser automation#playwright#e2e testing#visual regression#control ui#websocket mock
One-click install
npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill control-ui-e2e-jerome-prakash-l
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: control-ui-e2e
Source: https://github.com/JEROME-PRAKASH-L/openclaw/tree/main/.agents/skills/control-ui-e2e
Command: npx skills add https://github.com/JEROME-PRAKASH-L/openclaw --skill control-ui-e2e-jerome-prakash-l

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 Tests: Run Vitest browser tests that install a mocked Gateway WebSocket to assert both request traffic and visible UI behavior. - Visual Proof Capture: Drive Chromium with Playwright against a locally mocked Control UI to record videos and screenshots of each meaningful state. - Deterministic Scenarios: Keep tests reproducible by avoiding live provider keys and real credentials, with typed mock helpers for chat flows and session lists. - Use Case: After changing the chat composer, run the focused E2E test, then record a Playwright video showing the message send, the mocked chat.send request, and the final rendered 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 Control UI end-to-end tests with Playwright?▼

Run a single E2E test with node scripts/run-vitest.mjs using the vitest.ui-e2e.config.ts configuration, or run the full lane with pnpm test:ui:e2e. Tests live in ui/src/**/*.e2e.test.ts and use a mocked Gateway WebSocket.

How to mock a WebSocket Gateway in browser tests?▼

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

Can I record Playwright videos of UI test runs?▼

Yes, create a browser context with recordVideo options pointing to an artifacts directory, capture screenshots with page.screenshot, and close the context before reading the video path. Store artifacts under .artifacts/control-ui-e2e/ and do not commit them.

Should E2E tests use a real Gateway or live credentials?▼

No, scenarios must stay deterministic and avoid live provider keys, real channel credentials, or a real Gateway unless the user explicitly requests live proof. Use the mocked Gateway helpers for all standard validation.

When should I use E2E tests instead of unit tests for UI changes?▼

Use the E2E lane when proof must cover routing, app boot, Gateway handshake, requests, and visible UI together. Prefer existing browser or unit tests for narrow rendering logic that does not need full flows.

Related Skills

Explore More Software Engineering Skills→
rodoHasArrivedrodoHasArrived

meridian-browser-workstation

Route TypeScript/React browser tasks to src/Meridian.Ui/dashboard with build/test validation.

Community
Intermediate
jkomorosjkomoros
9

land-branch

Rebase a feature branch onto main and merge via pull request.

Community
Intermediate
mikemylmikemyl
1

react-testing

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

Community
Intermediate
jonnymuirjonnymuir
1

workflow-gateway-behavioural-proof

Enforce gateway-only authoring models in workflow editor test suites.

Community
Advanced