webapp-testing

Automates Playwright-driven UI verification and debugging of local web applications.

Updated Dec 20, 2023
One-click install
npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill webapp-testing-thiago-cruz-eng
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: webapp-testing
Source: https://github.com/Thiago-Cruz-eng/Hibrygame/tree/main/.claude/skills/webapp-testing
Command: npx skills add https://github.com/Thiago-Cruz-eng/Hibrygame --skill webapp-testing-thiago-cruz-eng

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you reliably test and debug local web applications by guiding Playwright-based automation for dynamic UIs and server-backed pages.

Core Features & Use Cases

  • Browser-driven UI verification: Validate frontend behavior by interacting with rendered elements and asserting outcomes.
  • Reconnaissance-then-action workflow: Inspect screenshots/DOM after the page is fully loaded to discover correct selectors.
  • Deterministic local execution: Use a helper to start and manage one or more local servers while you run your Playwright script.
  • Use case: You’re implementing a new button and want a quick check that clicking it updates the page correctly, without manually reproducing the steps in your browser.

Quick Start

Run python scripts/with_server.py --help to learn how to start your local server(s), then write a Playwright script that waits for networkidle before inspecting or clicking UI elements.

Frequently Asked Questions about webapp-testing

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

FAQPage Schema
How do I test local web apps with Playwright when the UI keeps loading dynamically?

To test local web apps with Playwright, wait for networkidle before inspecting or clicking UI elements to ensure dynamic content has fully loaded. This approach prevents selector discovery failures on server-backed pages by verifying the DOM is stable through screenshots prior to running assertions.

What is the best way to discover stable HTML selectors during automated web UI testing?

Stable HTML selector discovery uses a reconnaissance-then-action workflow that inspects screenshots and DOM content after pages reach networkidle. By verifying the fully rendered state first, you derive accurate selectors for Playwright interactions instead of guessing element attributes from static source code.

How do I manage local development server lifecycle during Playwright UI testing?

Local development server lifecycle is managed using a Python helper script that starts and orchestrates one or more local servers while your Playwright script runs. This deterministic execution ensures your test environment is active and synchronized before browser-driven UI verification begins.

Can I use Playwright to verify frontend behavior on server-backed pages without manual browser checks?

Yes, Playwright automates frontend behavior verification on server-backed pages by driving browser interactions and asserting outcomes against rendered elements. You interact with the UI programmatically, validating that dynamic actions like button clicks update the page correctly without manual reproduction.

Why does my Playwright test fail to find selectors on a local server-backed web app?

Playwright selector discovery fails when tests inspect the DOM before dynamic content finishes loading on server-backed web apps. You must wait for networkidle state and use screenshots to confirm the page is fully rendered before attempting to locate or interact with UI elements.