Initial commit - production deployment

frontend/TEST_COMMANDS_QUICK_REFERENCE.md

@@ -0,0 +1,195 @@
+# 🚀 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`