webapp-testing
Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.
Why use this skill?
Efficiently test and debug local web apps with the OpenClaw webapp-testing skill. Manage server lifecycles and automate browser interactions seamlessly.
Install via CLI (Recommended)
clawhub install openclaw/skills/skills/seanphan/webapp-testingWhat This Skill Does
The webapp-testing skill provides a robust toolkit for developers and testers to interact with, automate, and validate local web applications. Leveraging Playwright, this skill enables seamless navigation, DOM inspection, screenshot capture, and log monitoring directly from your terminal. It simplifies the orchestration of complex local environments using the scripts/with_server.py utility, which manages the lifecycle of backend and frontend services, ensuring your test scripts run against fully initialized environments.
Installation
To install this skill, run the following command in your terminal within the OpenClaw environment:
clawhub install openclaw/skills/skills/seanphan/webapp-testing
Use Cases
- Automated Regression Testing: Verify critical UI flows after code changes.
- Dynamic UI Debugging: Capture visual evidence of bugs through automated screenshots and browser log analysis.
- Cross-Service Testing: Orchestrate multi-service applications (e.g., a Flask backend combined with a React frontend) to perform end-to-end integration tests.
- Accessibility & Element Auditing: Programmatically traverse the DOM to verify element state and attributes on dynamic pages.
Example Prompts
- "Run my test suite
login_test.pyagainst the local development server on port 3000." - "Inspect the DOM of the local admin dashboard and return a list of all primary action buttons."
- "Launch the backend and frontend servers together, then execute
smoke_test.pyto confirm the login flow works correctly."
Tips & Limitations
- The Golden Rule: Always call
--helpon helper scripts before running them to understand available flags and arguments. - Network Synchronization: Never attempt to inspect elements until
page.wait_for_load_state('networkidle')has successfully completed. Failure to wait for JS execution is the most common cause of flaky tests. - Avoid Code Bloat: Treat
with_server.pyas a black box. Do not attempt to ingest its full source code into your context window; focus on writing clean, focused Playwright automation scripts that leverage the environment provided by the helper. - Headless Execution: For performance and reliability in automated CI environments, always launch Playwright in
headless=Truemode.
Metadata
Not sure this is the right skill?
Describe what you want to build — we'll match you to the best skill from 16,000+ options.
Find the right skillPaste this into your clawhub.json to enable this plugin.
{
"plugins": {
"official-seanphan-webapp-testing": {
"enabled": true,
"auto_update": true
}
}
}Tags(AI)
Flags: network-access, file-write, file-read, code-execution
Related Skills
artifacts-builder
Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
template-skill
Replace with description of the skill and when Claude should use it.
canvas-design
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.