How does it handle dynamic JavaScript content?

It follows a reconnaissance pattern that waits for 'networkidle' states before inspecting the DOM, ensuring that all elements are fully rendered before interaction.

Do I need to manually start my development server?

No, the provided with_server.py utility can handle the server startup and shutdown automatically as part of the test execution process.

Does this skill support multiple local servers?

Yes, the toolkit includes a helper script that can manage multiple servers simultaneously, such as starting both a frontend development server and a backend API server for a single test run.

Can I see what the browser is doing during a test?

Yes, the skill is designed to capture screenshots and browser logs, which are presented to the user to help debug visual or logical errors in the application.

Is it compatible with specific frontend frameworks?

It is framework-agnostic. Since it uses Playwright to interact with the rendered page in a real browser environment, it works perfectly with React, Vue, Svelte, Angular, or plain HTML.

Web Application Testing

Name: Web Application Testing
Author: CongDon1207

byCongDon1207

•

セキュリティとテスト

Automates end-to-end testing and UI debugging for local web applications using Playwright and automated server management.

概要

This skill provides a comprehensive toolkit for developers to test local web applications through native Python Playwright scripts. It streamlines the testing lifecycle by automatically managing server processes, handling both static and dynamic content, and providing robust patterns for DOM inspection and screenshot capture. By using a 'reconnaissance-then-action' approach, it ensures reliable element discovery and interaction even in complex, JavaScript-heavy environments, making it an essential tool for verifying frontend functionality and debugging UI behaviors within Claude Code.

主な機能

1 GitHub stars
Automated server lifecycle management for backend and frontend processes
Native Playwright integration for realistic browser automation and testing
Support for both static HTML files and dynamic, JavaScript-heavy web apps
Reconnaissance-then-action pattern for reliable element selector discovery
Built-in debugging tools for capturing screenshots and browser logs

ユースケース

Verifying complex user flows in a React or Vue application during local development
Debugging CSS or layout issues by capturing full-page screenshots in a headless browser
Automating regression tests that require multiple local servers to be active simultaneously

概要

主な機能

1 GitHub stars
Automated server lifecycle management for backend and frontend processes
Native Playwright integration for realistic browser automation and testing
Support for both static HTML files and dynamic, JavaScript-heavy web apps
Reconnaissance-then-action pattern for reliable element selector discovery
Built-in debugging tools for capturing screenshots and browser logs

ユースケース

Verifying complex user flows in a React or Vue application during local development
Debugging CSS or layout issues by capturing full-page screenshots in a headless browser
Automating regression tests that require multiple local servers to be active simultaneously