bakery-ia/frontend/TEST_COMMANDS_QUICK_REFERENCE.md

🚀 Quick Test Commands Reference

⚡ Most Used Commands

1. Run Tests in Chrome (Watch Mode)

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)

npm run test:e2e:ui

Use this for: Interactive test development and debugging

3. Debug Specific Test

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)

# 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

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

npx playwright test complete-registration-flow --headed

Test Wizard Navigation Only

npx playwright test wizard-navigation --headed

Test File Upload Only

npx playwright test file-upload --headed

Test with Specific Browser

# 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

npx playwright test -g "should complete full registration" --headed

---

🐛 Debugging Commands

View Last Test Report

npx playwright show-report

Run with Trace

npx playwright test --trace on

View Trace File

npx playwright show-trace trace.zip

Run in Slow Motion

npx playwright test --headed --slow-mo=1000

---

⚙️ Before Running Tests

1. Make Sure Dev Server is Running

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

PLAYWRIGHT_BASE_URL=http://localhost:5173 npm run test:e2e:headed

Update Test User Credentials

Edit frontend/tests/auth.setup.ts or set:

export TEST_USER_EMAIL=your.email@example.com
export TEST_USER_PASSWORD=YourPassword123

---

📊 Example: Full Testing Workflow

# 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