Can I capture browser console logs for debugging?

Yes, the skill includes patterns and example scripts for capturing and viewing browser console logs to identify frontend exceptions and errors.

Does this require manual browser management?

No, the skill uses Playwright to handle browser instances automatically, though it recommends launching Chromium in headless mode for terminal efficiency.

Does this skill support testing dynamic web applications?

Yes, it includes a reconnaissance pattern that specifically waits for 'networkidle' states to ensure dynamic content and JS are fully loaded before interaction.

How does visual debugging work in a terminal environment?

The skill can capture full-page screenshots and save them to temporary paths, allowing you to inspect the rendered UI state even when running headlessly.

Can I run multiple servers at once for full-stack testing?

Yes, the included server helper script supports managing multiple servers simultaneously, such as a Python backend and a React frontend on different ports.

Web Application Testing

Name: Web Application Testing
Author: arush361

byarush361

0•

セキュリティとテスト

Automates local web application testing and UI debugging using Playwright and integrated server lifecycle management.

This skill provides a robust framework for testing local web applications directly from the terminal within Claude Code. It streamlines the testing lifecycle by providing helper scripts to manage server start-up and shutdown, ensuring Playwright automations run seamlessly against active ports. By implementing a 'Reconnaissance-Then-Action' pattern, it allows users to accurately identify DOM elements in dynamic applications, capture full-page screenshots for visual debugging, and monitor console logs, making it an essential tool for developers and PMs validating feature implementation and frontend stability.

主な機能

01Visual debugging tools including full-page screenshots and DOM inspection

02Console log capturing for identifying and debugging runtime errors

03Automated server lifecycle management for backend and frontend environments

04Networkidle waiting logic to handle dynamic single-page applications (SPAs)

050 GitHub stars

06Native Playwright integration for reliable cross-browser automation

ユースケース

01Verifying new frontend features against a local dev server before PR submission

02Debugging complex UI behaviors in dynamic web apps that require specific state triggers

03Capturing visual evidence of bug fixes or UI changes for stakeholder documentation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arush361/product-claude-code webapp-testing

For use in Claude.ai and ChatGPT

Download Skill