Can I use Python for tests with this skill?

No, this skill strictly enforces the use of TypeScript and the @playwright/test runner to maintain project consistency and leverage Playwright's full feature set.

Where should I store my E2E test files?

Tests should always be placed in the 'tests/e2e/' or 'e2e/' directory at your project root to ensure they are treated as permanent, version-controlled project assets.

How does the reconnaissance pattern help with dynamic apps?

It allows Claude to navigate to a page, wait for 'networkidle', and inspect the actual rendered DOM or screenshots to identify accurate selectors before attempting interactions.

Does this skill work with Vitest?

While Vitest is excellent for unit and integration tests, this skill specifically utilizes Playwright Test for E2E flows due to its superior browser parallelization and trace collection.

How is testing evidence collected for reviews?

The skill includes specialized patterns to output screenshots, videos, and trace files into a '.artifacts/' directory, which can then be used to document functionality in PRs.

Web Application Testing

Name: Web Application Testing
Author: kazuph

bykazuph

•

安全与测试

Automates end-to-end testing and visual verification of local web applications using Playwright and TypeScript.

关于

This skill provides a comprehensive framework for interacting with and testing local web applications through Playwright, enabling Claude to perform browser automation, verify UI behaviors, and capture visual evidence. It enforces professional testing standards by requiring TypeScript-based E2E tests, structured evidence collection for PR reviews, and mandatory verification steps before concluding development tasks. By integrating reconnaissance-then-action patterns and automated server management, it ensures that web features function correctly across modern browser environments while maintaining a clean project structure.

主要功能

Visual verification through full-page screenshots and video recording
Real-time browser log and network error monitoring for debugging
16 GitHub stars
Automated E2E testing with Playwright and TypeScript integration
Structured reconnaissance for dynamic DOM and selector discovery
Automated development server management via webServer configuration

使用场景

Generating visual evidence and automated reports for pull request reviews
Verifying complex frontend workflows like multi-step forms and authentication
Debugging UI regressions by inspecting rendered states and console errors

关于

主要功能

Visual verification through full-page screenshots and video recording
Real-time browser log and network error monitoring for debugging
16 GitHub stars
Automated E2E testing with Playwright and TypeScript integration
Structured reconnaissance for dynamic DOM and selector discovery
Automated development server management via webServer configuration

使用场景

Generating visual evidence and automated reports for pull request reviews
Verifying complex frontend workflows like multi-step forms and authentication
Debugging UI regressions by inspecting rendered states and console errors