bakery-ia/frontend/TEST_COMMANDS_QUICK_REFERENCE.md

# 🚀 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`