How do I identify selectors for my tests?

The skill follows a 'Reconnaissance-Then-Action' pattern where it first navigates to the page, captures the rendered state, and then identifies the most reliable CSS or text selectors.

Can I test dynamic JavaScript applications?

Yes, the skill includes patterns for waiting for 'networkidle' states to ensure the DOM is fully rendered before interacting with or inspecting elements.

Does it support visual debugging?

Yes, you can capture full-page screenshots and view browser console logs directly to diagnose UI issues, layout shifts, or unexpected errors.

Do I need to manually write every Playwright script from scratch?

The skill provides a set of bundled scripts that handle common workflows. You can use the --help command on these scripts to use them as black-box tools without needing to read their source.

How does this skill handle dev servers?

It uses a helper script called with_server.py to manage the server lifecycle, allowing you to start frontend and backend services automatically before running automation scripts.

Web App Testing Toolkit

Name: Web App Testing Toolkit
Author: arthur0824hao

byarthur0824hao

0•

セキュリティとテスト

Facilitates end-to-end testing and UI debugging of local web applications using Playwright scripts and automated server management.

This skill provides a specialized framework for interacting with and testing local web applications through Python-based Playwright scripts. It streamlines the testing lifecycle by automatically managing dev server processes, capturing browser screenshots for visual verification, and inspecting the rendered DOM to identify selectors. Whether dealing with static HTML or complex dynamic web apps, it offers standardized patterns for reconnaissance, debugging UI behavior, and ensuring frontend functionality remains intact across updates.

主な機能

01Visual debugging with full-page screenshot capture and console log viewing

02Support for testing both static HTML files and dynamic JavaScript applications

03Intelligent DOM reconnaissance and selector discovery patterns

04Automated server lifecycle management for backend and frontend processes

050 GitHub stars

06Native Playwright integration for robust browser automation and testing

ユースケース

01Automating end-to-end (E2E) testing for React, Vue, or Svelte frontends during development

02Debugging visual regressions by capturing and inspecting rendered DOM states

03Verifying complex user flows across multiple local services and backend APIs

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add arthur0824hao/skill webapp-testing

For use in Claude.ai and ChatGPT

Download Skill