ui-test

What This Skill Does

The ui-test skill transforms OpenClaw into a powerful, natural-language-driven end-to-end (E2E) testing engineer. Instead of forcing developers to manually inspect DOM elements and write fragile CSS selectors or XPaths, users describe the desired application flow in plain English. The agent leverages the internal clawd browser to interpret these instructions, perform actions, and verify UI states. It records every step with screenshots, creates a visual walkthrough, and ultimately compiles verified interactions into standard, production-ready Playwright .spec.ts files that can be instantly integrated into any CI/CD pipeline.

Installation

To add this capability to your OpenClaw agent, execute the following command in your terminal:

clawhub install openclaw/skills/skills/clawd21/ui-test

Ensure your environment has the necessary browser dependencies installed, as this skill requires active control of the clawd browser instance.

Use Cases

• Rapid Feature Prototyping: Quickly generate regression tests while building new features to ensure core flows remain unbroken.
• Documentation Generation: Create visual test walkthroughs that serve as living documentation for how a feature should behave.
• Legacy Code Testing: Generate modern Playwright test suites for older web applications where manual maintenance of test scripts has become burdensome.
• Onboarding Assistance: Help new developers understand a codebase by having the agent run and document critical user journeys.

Example Prompts

1. "Open https://app.example.com, log in with [email protected], verify that I see the dashboard, and then create a new project named 'Alpha' before signing out."
2. "Review the checkout flow on our staging site and export a Playwright script that confirms the final purchase success message."
3. "Go to the settings page, toggle the dark mode switch, and assert that the body background color changes to black. Save the test as 'dark-mode-test'."

Tips & Limitations

• Be Specific: While the agent handles vague instructions well, providing concrete IDs or button text ensures higher accuracy during the mapping phase.
• Stability: UI tests are only as stable as the UI itself. If an application element frequently changes its dynamic ID, ensure your app structure is optimized for testing.
• Browser Context: The agent performs best when starting from a clean browser state. If your test requires complex authentication, consider setting up a reusable auth session or providing a clear 'Login' path within the steps.
• Validation: Always review the generated .spec.ts files before merging them into your main branch. While the agent is highly reliable, human oversight ensures that assertions cover all necessary edge cases.