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

Yes, the skill supports taking full-page screenshots and inspecting the rendered DOM, which helps you identify selectors and verify visual layouts.

How does it handle dynamic JavaScript content?

It utilizes the networkidle load state and explicit wait commands to ensure dynamic content and JS components are fully rendered before executing test actions.

Does this skill support multi-server setups?

Yes, the included with_server.py helper script allows you to manage multiple servers simultaneously, such as a backend Python API and a frontend Node.js development server.

Is Chromium supported?

Yes, the skill is specifically designed to launch Chromium in headless mode for efficient background automation and testing.

Why use helper scripts instead of writing all Playwright code manually?

Helper scripts act as 'black boxes' to handle complex boilerplate like server management, which prevents large amounts of code from cluttering your Claude context window.

Web App Testing with Playwright

Name: Web App Testing with Playwright
Author: claudiodearaujo

byclaudiodearaujo

セキュリティとテスト

Automates local web application testing and interaction using native Python Playwright scripts and managed server lifecycles.

概要

This skill provides a specialized toolkit for testing and debugging local web applications directly within Claude. It simplifies the complexity of managing server lifecycles and browser automation by offering helper scripts that handle background processes, frontend/backend orchestration, and DOM inspection. By implementing a reconnaissance-then-action pattern, it allows users to capture screenshots, view logs, and verify UI behavior across static and dynamic web apps while maintaining an efficient context window through the use of black-box helper scripts.

主な機能

Native Python Playwright script execution in headless Chromium mode
Visual debugging via full-page screenshots and browser log capturing
Support for dynamic web apps using networkidle state synchronization
Automated server lifecycle management for single or multiple services
0 GitHub stars
Reconnaissance patterns for identifying selectors from rendered DOM states

ユースケース

Automating multi-service workflows involving both backend APIs and frontend interfaces
Debugging frontend UI behavior by capturing screenshots and inspecting rendered states
Running end-to-end (E2E) tests on local React, Vue, or Svelte development servers

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter webapp-testing

For use in Claude.ai and ChatGPT

Download Skill

GitHub

概要