# Test Local Web Apps With Playwright

Frontend bugs often require browser-level evidence from a running app. This skill guides Claude, Codex, and Claude Code through Playwright inspection and automation.

## Install

```bash
npx skillstore add anthropics/webapp-testing
```

## Metadata

- Status: approved
- Slug: webapp-testing
- Skillstore revision: r1
- Version status: missing
- Tree hash: 37d980f5dbc76dedcf2f13713bfc4bd05dfb07a34eb3c0e3691ce532ff93959f
- Author: anthropics
- GitHub username: anthropics
- License: Complete terms in LICENSE.txt
- Repository: https://github.com/anthropics/skills/tree/main/skills/webapp-testing
- Ref: 26421118b848d9f1efc0aa169d8a7a9e7e0a877e
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: network, filesystem, external\_commands
- Quality score: 50
- Quality tier: warning
- Public page: https://skillstore.pages.dev/skills/webapp-testing
- Manifest: https://skillstore.pages.dev/api/skills/webapp-testing/manifest

## Capabilities

- Guides Playwright scripts for local browser automation.
- Starts one or more local servers before running test commands.
- Captures screenshots for visual inspection of rendered pages.
- Collects browser console messages during automation runs.
- Discovers visible buttons, links, inputs, and selectors.
- Supports static HTML testing through file URLs.

## Use Cases

- Verify a Local UI Flow: Run a local app, open it in Chromium, and confirm that key buttons and form actions work.
- Capture Debug Evidence: Collect screenshots and console output so a bug report includes browser-level details.
- Inspect Rendered Selectors: Discover available controls and selectors before writing reliable automation for a dynamic page.

## Prompt Templates

### Open and Inspect a Local Page

```
Use the webapp-testing skill to open my local app on port 5173. Capture a screenshot and list visible buttons, links, and inputs.
```

### Test a User Flow

```
Use Playwright with this skill to test the sign-in flow. Start the needed server, wait for the page, perform the flow, and report results.
```

### Debug Console Errors

```
Use the console logging pattern to reproduce the issue. Capture browser console messages, note failed interactions, and summarize likely frontend causes.
```

### Coordinate Multiple Local Services

```
Use the server helper to run backend and frontend services. After both ports are ready, execute a Playwright script that verifies the checkout flow.
```

## Limitations

- Requires Python Playwright and a compatible browser environment.
- Focuses on local applications, not remote production monitoring.
- Does not provide a full test framework or assertion library.
- Server commands must come from trusted project workflows.

## Best Practices

- Run helper scripts with help output before using them.
- Wait for network idle or a stable selector before inspecting dynamic pages.
- Use trusted local server commands and review output paths.

## Anti Patterns

- Do not run unknown server commands through the helper.
- Do not inspect dynamic pages before client-side rendering completes.
- Do not rely only on screenshots when console logs show errors.

## Security Audit

- Audited at: 2026-07-09T14:44:57.9\+00:00
- Summary: The real risks are intentional local browser automation, filesystem output, and external command execution through the server helper. Most Markdown backtick findings are false positives, but the helper uses shell-based server commands and should be handled with care.

## Stats

- Views: 322
- Downloads: 85
- Favorites: 1
- Popularity score: 0