test
Run Playwright tests with various options (specific file, all UI tests, debug mode, headed browser, tagged tests). Use when user asks to run tests, execute tests, test something, or debug tests.
When & Why to Use This Skill
This Claude skill enables seamless execution and management of Playwright automated tests directly through the agent. It supports a wide range of testing workflows, including running specific test files, executing full UI suites, and utilizing advanced debugging tools like headed mode and the Playwright Inspector. By providing structured commands for browser-specific testing and snapshot updates, it streamlines the end-to-end testing process and accelerates the identification of software regressions.
Use Cases
- Automated UI Testing: Execute comprehensive test suites across different browsers to ensure web application stability and performance.
- Interactive Debugging: Utilize headed mode or the Playwright Inspector to step through failing tests and visually identify UI bugs in real-time.
- Regression Testing: Run specific tagged tests (e.g., @P1 or @P2) to quickly verify critical functionality after new code deployments.
- Visual Regression Management: Update and verify UI snapshots to detect and resolve unexpected visual changes in the frontend.
- Cross-Browser Verification: Run tests against specific browser projects (Chromium, WebKit, etc.) to ensure compatibility across different environments.
| name | test |
|---|---|
| description | Run Playwright tests with various options (specific file, all UI tests, debug mode, headed browser, tagged tests). Use when user asks to run tests, execute tests, test something, or debug tests. |
| allowed-tools | Bash(npx:*), Bash(playwright:*), Read, Grep |
Test Execution
Usage Patterns
1. Run Specific Test File
# Single spec file
npx playwright test tests/ui/basket.spec.ts
# With specific test name
npx playwright test tests/ui/basket.spec.ts -g "Remove product from cart"
2. Run All UI Tests
# All tests in ui directory
npx playwright test tests/ui/
# All tests
npx playwright test
3. Run Tagged Tests
# Run P1 priority tests
npx playwright test --grep @P1
# Run P2 priority tests
npx playwright test --grep @P2
4. Debug Mode
# Debug specific test (opens Playwright Inspector)
npx playwright test tests/ui/basket.spec.ts --debug
# Debug with specific test name
npx playwright test tests/ui/basket.spec.ts -g "Add product" --debug
5. Headed Mode (See Browser)
# Run with visible browser
npx playwright test tests/ui/basket.spec.ts --headed
# Slow down execution for visibility
npx playwright test tests/ui/basket.spec.ts --headed --slow-mo=1000
6. Run on Specific Browser
# Chromium only
npx playwright test --project=chromium
# Run setup manually
npx playwright test --project=setup
7. Update Snapshots
# Update all snapshots
npx playwright test --update-snapshots
# Update specific test snapshots
npx playwright test tests/ui/basket.spec.ts --update-snapshots
Common Options
| Option | Description |
|---|---|
--headed |
Show browser window |
--debug |
Open Playwright Inspector |
--ui |
Open Playwright UI mode (interactive) |
-g "pattern" |
Run tests matching pattern |
--grep @P1 |
Run tests with @P1 tag |
--project=chromium |
Run on specific browser |
--workers=1 |
Run tests serially (for debugging) |
--reporter=list |
Use list reporter (verbose) |
--trace on |
Record trace for all tests |
Interactive UI Mode
# Open Playwright UI (best for development)
npx playwright test --ui
After Test Execution
- Check results in console output
- If failures occur:
- Read error messages
- Check screenshots in
playwright-report/ - Offer to open HTML report:
npx playwright show-report
- Summarize: passed/failed/skipped counts
Troubleshooting
If auth setup fails:
# Run setup separately
npx playwright test tests/auth.setup.ts
If parallel execution causes issues:
# Run serially
npx playwright test --workers=1
Clear test artifacts:
# Remove auth files
rm -rf .auth/
# Remove reports
rm -rf playwright-report/ test-results/
Best Practices
- Use
--headedfor visual debugging - Use
--debugto step through test actions - Use
--uifor interactive test development - Run with
--workers=1when debugging race conditions - Check HTML report after failures for detailed diagnostics