Official Verified developer tools Safety 3/5

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.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/bloodandeath/keats-webapp-testing

Download Source Code (.zip)

What This Skill Does

The webapp-testing skill provides a robust toolkit for developers and testers to interact with local web applications using Python and Playwright. It acts as an automation bridge, enabling you to programmatically verify frontend functionality, inspect DOM elements, and simulate user interactions such as form submissions, clicks, and navigation. By integrating with scripts/with_server.py, the skill seamlessly manages the lifecycle of your development servers, ensuring that your local testing environment is prepared and synchronized before your automation scripts begin execution.

Installation

To integrate this skill into your environment, use the OpenClaw CLI tool: clawhub install openclaw/skills/skills/bloodandeath/keats-webapp-testing

Use Cases

This skill is designed for scenarios where you need to validate that a local web application behaves as expected under various conditions. Use it to debug UI rendering issues, verify that complex JavaScript interactions execute correctly, or automate recurring browser tasks that would be tedious to perform manually. It is particularly effective for integration testing cycles in local dev environments, allowing for repeatable, headless browser tests that provide immediate feedback on code changes.

Example Prompts

"I need to verify the login flow on my local React app running on port 3000. Can you use Playwright to navigate to the page, fill in the test credentials, and assert that the dashboard loads correctly?"
"My frontend is failing to render specific components. Please use the webapp-testing tool to launch the server, capture a screenshot of the main landing page, and pull the browser console logs so I can diagnose the issue."
"I have a multi-tier application with a backend API and a frontend dev server. Can you help me set up a test script that starts both, waits for the frontend to be ready, and then clicks the submit button on the contact form?"

Tips & Limitations

Efficiency First: Always run python scripts/with_server.py --help before writing custom logic. Do not read raw source files into your context unless you have exhausted the provided helper script's capabilities.
Headless Mode: Always configure your browser instance to headless=True for automation to ensure optimal performance and integration with server environments.
Network Wait: Utilize page.wait_for_load_state('networkidle') frequently. This is the most critical step to ensure dynamic content has finished loading before you attempt to query selectors.
Scope Boundaries: This tool is strictly for local development and integration testing. Do not use this skill for performance, load, or production testing. It is also not intended for large-scale visual regression analysis.

Read Full Documentation on GitHub

Metadata

Author@bloodandeath

Stars4190

Updated2026-04-18

View Author Profile

AI Skill Finder

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 skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-bloodandeath-keats-webapp-testing": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Tags(AI)

#playwright#testing#web-automation#frontend#debugging

Safety Score: 3/5

Flags: network-access, file-read, code-execution

Related Skills

design-engineering

Orchestrate iterative design and frontend engineering work through research, planning, sub-agent execution, and validation loops. Use when a visual/UI task requires multiple iterations, when the first implementation needs refinement based on feedback, when choosing between competing technical approaches (Canvas vs SVG vs CSS), or when coordinating sub-agents on design-heavy work. Covers animation architecture decisions, progressive enhancement patterns, performance-aware rendering choices, and the research→plan→execute→validate workflow. Complements frontend-design (which handles aesthetics) by adding engineering discipline, iteration management, and technical decision-making.

bloodandeath 4190

agent-cost-monitor

Real-time token usage and cost tracking across all your OpenClaw agents — alerts, budgets, and optimization tips

bloodandeath 4190

web-monitor

Monitor web pages for content changes and get alerts. Track URLs, detect updates, view diffs. Use when asked to watch a website, track changes on a page, monitor for new posts/content, set up page change alerts, or check if a site has been updated. Supports CSS selectors for targeted monitoring.

bloodandeath 4190

code-reviewer

Conduct rigorous, adversarial code reviews with zero tolerance for mediocrity. Default behavior is a single-model adversarial review that identifies security holes, lazy patterns, edge case failures, and bad practices across Python, R, JavaScript/TypeScript, SQL, and front-end code. Supports an optional `--dual` mode for heavier cross-model iterative review when deeper scrutiny is worth the added cost and latency. Use when users ask to "critically review my code", "critically review" code or a PR, "critique my code", "find issues in my code", "find issues" in code, ask "what's wrong with this code", ask to "review this code", "critique my PR", say "double review this", or request a "cross-model review". Scrutinizes error handling, type safety, performance, accessibility, and code quality. Provides structured feedback with severity tiers (Blocking, Required Changes, Suggestions, Noted) and specific, actionable recommendations.

bloodandeath 4190

code-reviewer

bloodandeath 4190