# 🚀 Quick Test Commands Reference ## ⚡ Most Used Commands ### 1. Run Tests in Chrome (Watch Mode) ```bash npm run test:e2e:headed -- --project=chromium tests/onboarding/ ``` **Use this for:** Watching tests run in a visible Chrome window ### 2. Run Tests in UI Mode (Best for Development) ```bash npm run test:e2e:ui ``` **Use this for:** Interactive test development and debugging ### 3. Debug Specific Test ```bash npm run test:e2e:debug -- tests/onboarding/complete-registration-flow.spec.ts ``` **Use this for:** Step-by-step debugging with Playwright Inspector ### 4. Record New Tests (Codegen) ```bash # Start dev server first npm run dev # In another terminal npm run test:e2e:codegen ``` **Use this for:** Recording your actions to generate test code ### 5. Run Complete Flow Test Only ```bash npx playwright test tests/onboarding/complete-registration-flow.spec.ts --headed --project=chromium ``` **Use this for:** Testing the full registration + onboarding flow --- ## 📋 All Available Commands | Command | Description | |---------|-------------| | `npm run test:e2e` | Run all E2E tests (headless) | | `npm run test:e2e:ui` | Open Playwright UI mode | | `npm run test:e2e:headed` | Run tests with visible browser | | `npm run test:e2e:debug` | Debug tests with Playwright Inspector | | `npm run test:e2e:report` | View last test report | | `npm run test:e2e:codegen` | Record actions to generate tests | --- ## 🎯 Test Specific Scenarios ### Test Complete Registration Flow ```bash npx playwright test complete-registration-flow --headed ``` ### Test Wizard Navigation Only ```bash npx playwright test wizard-navigation --headed ``` ### Test File Upload Only ```bash npx playwright test file-upload --headed ``` ### Test with Specific Browser ```bash # Chrome npx playwright test --project=chromium --headed # Firefox npx playwright test --project=firefox --headed # Safari npx playwright test --project=webkit --headed # Mobile Chrome npx playwright test --project="Mobile Chrome" --headed ``` ### Run Single Test by Name ```bash npx playwright test -g "should complete full registration" --headed ``` --- ## 🐛 Debugging Commands ### View Last Test Report ```bash npx playwright show-report ``` ### Run with Trace ```bash npx playwright test --trace on ``` ### View Trace File ```bash npx playwright show-trace trace.zip ``` ### Run in Slow Motion ```bash npx playwright test --headed --slow-mo=1000 ``` --- ## ⚙️ Before Running Tests ### 1. Make Sure Dev Server is Running ```bash npm run dev ``` ### 2. Or Let Playwright Auto-Start It The `playwright.config.ts` is already configured to auto-start the dev server. --- ## 🔧 Configuration ### Change Base URL ```bash PLAYWRIGHT_BASE_URL=http://localhost:5173 npm run test:e2e:headed ``` ### Update Test User Credentials Edit `frontend/tests/auth.setup.ts` or set: ```bash export TEST_USER_EMAIL=your.email@example.com export TEST_USER_PASSWORD=YourPassword123 ``` --- ## 📊 Example: Full Testing Workflow ```bash # 1. Start dev server npm run dev # 2. In another terminal, run tests in UI mode npm run test:e2e:ui # 3. Select "complete-registration-flow.spec.ts" # 4. Click "Watch" and "Show browser" # 5. See the magic happen! ✨ ``` --- ## 🎬 Pro Tips 1. **Always use `--headed` when developing tests** - you need to see what's happening 2. **Use UI mode for test development** - it's the best experience 3. **Use `test.only()` to run a single test** - faster iteration 4. **Use `page.pause()` to pause execution** - inspect state mid-test 5. **Check test-results/ folder for screenshots** - helpful for debugging --- ## 📁 Test Files Location ``` frontend/tests/onboarding/ ├── complete-registration-flow.spec.ts ← Full flow (NEW!) ├── wizard-navigation.spec.ts ← Wizard steps └── file-upload.spec.ts ← File uploads ``` --- ## 🆘 Quick Help **Command not working?** 1. Make sure you're in the `frontend/` directory 2. Run `npm install` to ensure dependencies are installed 3. Run `npx playwright install chromium` to install browsers 4. Check that dev server is running on port 5173 **Need more help?** - Read the full guide: `TESTING_ONBOARDING_GUIDE.md` - Check Playwright docs: https://playwright.dev - View test report: `npx playwright show-report`