---
name: anthropic-webapp-testing
description: 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.
license: Complete terms in LICENSE.txt
---

# Webapp Testing

A toolkit for testing web applications using Playwright. This skill provides a structured approach to testing the functionality, appearance, and behavior of web applications.

## When to use this skill

Use this skill when the user wants to:
- Test a local web application's functionality
- Debug UI behavior or layout issues
- Verify that web application features work correctly
- Capture screenshots of web applications
- View browser logs for debugging
- Test responsive design across different viewport sizes

## Core Testing Workflow

### 1. Start the application
If the application isn't running, start it first using the appropriate command (e.g., `npm run dev`, `python manage.py runserver`, etc.).

### 2. Navigate to the app
Use Playwright to navigate to the application URL.

### 3. Interact with the application
Use Playwright's API to interact with elements: click buttons, fill forms, navigate between pages, etc.

### 4. Verify behavior
Check that the application behaves as expected by:
- Checking that elements exist and have expected content
- Verifying that navigation works correctly
- Confirming that form submissions work
- Checking error states and edge cases

### 5. Capture results
Take screenshots or log the state of the application as evidence of testing.

## Testing Checklist

When testing a web application, check these aspects:

- **Navigation**: Do all links and buttons navigate to the correct pages?
- **Forms**: Do forms submit correctly? Is validation working?
- **Responsive design**: Does the app look correct at different viewport sizes?
- **Error handling**: What happens when something goes wrong?
- **Loading states**: Are loading indicators shown during async operations?
- **Empty states**: What does the app look like with no data?
- **Edge cases**: What happens with very long text, special characters, or rapid clicking?

## Notes

- Always take screenshots to document visual issues
- Check browser console for errors after each interaction
- Test both happy paths and error paths
- Verify that the app is actually running before starting tests
- Use appropriate waits for async operations instead of fixed timeouts
