Run tests locally, trigger CI runs, or interactively walk through flows via Playwright MCP
Three execution modes — pick the right one based on what the user needs.
| Mode | When to use | Tools |
|---|---|---|
| Local | Quick validation — run a file, feature, scope, or tag on your machine | Bash (npx playwright test) |
| CI (Remote) | Full regression, cross-browser, staging/dev environment | Bash (gh workflow run) |
| Interactive | Walk through a flow live, visually verify UI, debug step-by-step | Playwright MCP |
| Intent | Command |
|---|
| Specific file | npx playwright test tests/e2e_tests/path/to/file.spec.ts |
| Feature area | npx playwright test tests/e2e_tests/<feature>/ |
| Smoke suite | npx playwright test --grep /@smoke/ --project=Chromium |
| Regression scope | npx playwright test --grep /@regression1/ --project=Chromium |
| By tag | npx playwright test --grep /@move-in/ |
| Exploratory | npx playwright test --project=Exploratory |
| Performance suite | npx playwright test --project=Performance |
| Performance (TanStack) | BASE_URL=https://tanstack-dev.onepublicgrid.com npx playwright test --project=Performance |
| All tests | npx playwright test |
| Mode | Flag | When to use |
|---|---|---|
| Headless (default) | (none) | Standard execution, CI-like |
| Headed | --headed | Watch the test run live |
| Debug | --debug | Step through with Playwright Inspector |
| Specific browser | --project=Chromium|Firefox|Safari|Mobile_Chrome|Mobile_Safari | Cross-browser check |
| Performance | --project=Performance | Chromium-only, no retries, serial |
Always include PLAYWRIGHT_HTML_OPEN=never to prevent the report browser from blocking.
PLAYWRIGHT_HTML_OPEN=never npx playwright test [path/grep] [--project=X] [--headed/--debug]
Timeouts by scope:
Required parameters:
| Parameter | Options | Default |
|---|---|---|
scope | Smoke, Regression1-Regression7 | Smoke |
environment | dev, staging | dev |
logLevel | INFO, DEBUG, TRACE | INFO |
notify | true, false | false |
gh workflow run main-workflow.yml -f scope=Smoke -f environment=staging -f logLevel=INFO -f notify=false
Examples:
# Smoke on staging
gh workflow run main-workflow.yml -f scope=Smoke -f environment=staging -f logLevel=INFO -f notify=false
# Regression1 (Chromium) on dev
gh workflow run main-workflow.yml -f scope=Regression1 -f environment=dev -f logLevel=INFO -f notify=false
# Regression3 (Safari) on staging with notifications
gh workflow run main-workflow.yml -f scope=Regression3 -f environment=staging -f logLevel=INFO -f notify=true
# Watch live
gh run watch
# Check status of latest run
gh run list --workflow=main-workflow.yml --limit 5
# View failed logs
gh run view <run_id> --log-failed
Chain to /analyze-failure to get a structured summary of results.
Use the Playwright MCP browser tools to manually walk through a flow, visually verify UI state, or debug a specific interaction.
mcp__playwright__browser_navigate to the target URLmcp__playwright__browser_snapshot to capture the accessibility tree and see what's on screenmcp__playwright__browser_click, mcp__playwright__browser_fill_form, mcp__playwright__browser_select_option to step through the flowmcp__playwright__browser_take_screenshot to capture visual state at any pointmcp__supabase__execute_sql to query tables and verify data was created/updated/deleted correctlymcp__playwright__browser_network_requests to check API calls being mademcp__playwright__browser_console_messages to check for errors## Test Run Results — [scope/file]
Status: ALL PASSED
Tests: [N] passed
Duration: [time]
Browser: [project]
## Test Run Results — [scope/file]
Status: [N] PASSED, [M] FAILED
Duration: [time]
Browser: [project]
### Failed Tests
| Test | File | Error |
|------|------|-------|
| [name] | [path] | [brief error] |
### Recommended Action
- `/analyze-failure` to classify root cause
- `/fix-test` to fix [specific test]
Flag as likely environment or setup issue — check base URL, browser install, env vars.
Based on results, suggest next steps:
/create-test → "New test has issues. Want me to /fix-test?"/fix-test → "Fix didn't hold. Let me re-investigate."/fix-test to stabilize."/analyze-failure| Tool | Purpose |
|---|---|
Bash | npx playwright test (local), gh workflow run and gh run (CI triggers and monitoring) |
| Playwright MCP | browser_navigate, browser_snapshot, browser_click, browser_fill_form, browser_take_screenshot, browser_network_requests, browser_console_messages — interactive mode |
| Supabase MCP | execute_sql — verify database state after UI interactions during interactive mode |
After completing this skill, check: did any step not match reality? Did a tool not work as expected? Did you discover a better approach? If so, update this SKILL.md with what you learned.