101 lines
2.8 KiB
Markdown
101 lines
2.8 KiB
Markdown
---
|
|
description: Test a webapp feature with Playwright
|
|
---
|
|
|
|
<url>--url</url>
|
|
<test-type>--test-type</test-type>
|
|
|
|
## Test Webapp Feature
|
|
|
|
Run automated browser tests for your webapp using Playwright. Tests are saved to `.web-tests/` in your current working directory.
|
|
|
|
**Works from any directory** - Saves test scripts and screenshots to your working directory's `.web-tests/` folder.
|
|
|
|
## How It Works
|
|
|
|
When you run `/test`, Claude will:
|
|
|
|
1. **Auto-detect running dev servers** (or use the provided URL)
|
|
2. **Create a custom test script** in `.web-tests/scripts/`
|
|
3. **Execute the test** with visible browser
|
|
4. **Save screenshots** to `.web-tests/screenshots/`
|
|
5. **Show results** with console output
|
|
|
|
## Usage
|
|
|
|
```bash
|
|
# Test specific feature
|
|
/test --test-type login
|
|
|
|
# Test with specific URL
|
|
/test --url http://localhost:3001 --test-type form
|
|
|
|
# Test responsive design
|
|
/test --test-type responsive
|
|
|
|
# Test page load
|
|
/test --url https://example.com --test-type page-load
|
|
```
|
|
|
|
## Common Test Types
|
|
|
|
- `login` - Test login flow and authentication
|
|
- `form` - Test form filling and submission
|
|
- `responsive` - Test across multiple viewports (desktop, tablet, mobile)
|
|
- `page-load` - Test if page loads correctly
|
|
- `navigation` - Test navigation and routing
|
|
- `custom` - Claude will ask what to test
|
|
|
|
## What Claude Will Do
|
|
|
|
1. **Auto-detect dev server** (if testing localhost)
|
|
2. **Write test script** to `.web-tests/scripts/test-{type}-{timestamp}.js`
|
|
3. **Execute test** using: `CWD=$(pwd) cd <skill-dir> && node run.js .web-tests/scripts/test-*.js`
|
|
4. **Report results** with any errors or successes
|
|
5. **Save screenshots** automatically to `.web-tests/screenshots/`
|
|
|
|
## Output Structure
|
|
|
|
```
|
|
your-repo/
|
|
└── .web-tests/
|
|
├── scripts/
|
|
│ └── test-login-2025-10-23.js
|
|
└── screenshots/
|
|
├── login-page-2025-10-23T12-30-45.png
|
|
└── dashboard-2025-10-23T12-30-50.png
|
|
```
|
|
|
|
## Environment Variables
|
|
|
|
Claude can use these environment variables:
|
|
|
|
- `CWD` - Your current working directory (auto-set)
|
|
- `HEADLESS` - Set to `true` for background execution (default: `false`)
|
|
- `SLOW_MO` - Slow down actions for debugging (default: `0`)
|
|
|
|
## Examples
|
|
|
|
```bash
|
|
# Test login with credentials
|
|
/test --test-type login
|
|
|
|
# Test contact form
|
|
/test --test-type form --url http://localhost:3001/contact
|
|
|
|
# Test homepage across viewports
|
|
/test --test-type responsive --url http://localhost:3001
|
|
```
|
|
|
|
## Tips
|
|
|
|
- Tests run with **visible browser** by default (easier to debug)
|
|
- **Screenshots are automatic** - saved to `.web-tests/screenshots/`
|
|
- **Test scripts are reusable** - found in `.web-tests/scripts/`
|
|
- **Auto-detects servers** - no need to specify URL for localhost
|
|
|
|
## See Also
|
|
|
|
- `/screenshot` - Take screenshots of pages
|
|
- `/check` - Check for broken links or issues
|