C✳CODEZ.WIN
🌐 English

Localized reading guide

webapp-testingPurpose, usage and source

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Source retrieved:

Source repository
anthropics/skills
SKILL.md
skills/webapp-testing/SKILL.md
Repository stars
185,373
Repository updated
2026-10-29
Categories
Development
Last collected

License: License file needs review

Workflow excerpts are reading aids, not executable instructions from Codez. No third-party Skill was run to produce this page.

The purpose and workflow passages below are upstream material, organized and translated for reading. They are distinct from the separately labeled Codez editorial analysis.

What this Skill does

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

How the upstream workflow works

Web Application Testing

To test local web applications, write native Python Playwright scripts. Helper Scripts Available:

Upstream passage · L7 ↗

Example: Using with_server.py

To start a server, run --help first, then use the helper: Multiple servers (e.g., backend + frontend):

Upstream passage · L35 ↗

Reconnaissance-Then-Action Pattern

Inspect rendered DOM: Identify selectors from inspection results

Upstream passage · L65 ↗
Upstream passage · ↗
User task → Is it static HTML?
    ├─ Yes → Read HTML file directly to identify selectors
    │         ├─ Success → Write Playwright script using selectors
    │         └─ Fails/Incomplete → Treat as dynamic (below)
    │
    └─ No (dynamic webapp) → Is the server already running?
        ├─ No → Run: python scripts/with_server.py --help
        │        Then use the helper + write simplified Playwright script
        │
        └─ Yes → Reconnaissance-then-action:
            1. Navigate and wait for networkidle
            2. Take screenshot or inspect DOM
            3. Identify selectors from rendered state
            4. Execute actions with discovered selectors

Requirements and setup

No short requirements passage was selected from this file. This does not mean the Skill has no dependencies. Check the repository setup instructions and referenced files.

Limits and quality checks

Common Pitfall

❌ Don't inspect the DOM before waiting for networkidle on dynamic apps ✅ Do wait for page.wait_for_load_state('networkidle') before inspection

Upstream passage · L78 ↗

Start with a safe trial

  1. Check the supported host and the repository installation instructions. Keep the Skill directory and its referenced scripts, assets and documentation together; SKILL.md alone may omit dependencies.
  2. Give the agent your real input, desired output and acceptance criteria. Invocation syntax and available tools depend on the host; this site does not assume a universal install command.
  3. Try the source workflow in a disposable project or on a copy. Review operations that change files, remote services or billable resources before allowing them.
  4. Validate the output against the source quality checks and your own requirements. A successful trigger or a high repository Star count does not establish a correct result.

Skill format and directory specification ↗

Read further in the source

Translation and scope

This reading guide selects passages from the pinned upstream SKILL.md. Translation is assisted. It is not a complete manual or a claim of tested compatibility. Read the original and its referenced files before use.

This introduction refers to the pinned version below; current repository activity and collection time are shown separately.

Source retrieved
Source commit
ca45fc496a3436251f191354091d557da31c15b5
Source SHA-256
51b7349e77ec63b7744a6f63647e7566a0b4d2e301121cc10e8c2113af6556a2
Back to the full Skill catalog