tilbudgivern/_archive/PLAYWRIGHT_EXECUTION_GUIDE.md

# Playwright Testing - Execution Guide

## Available Commands

All commands must be run from the workspace root: `/mnt/HC_Volume_103713257/tilbudgivern/`

### 1. ⚡ UI Mode (Recommended for Development)
```bash
npm run test:pw:ui
```

**What it does**:
- Opens interactive test runner in browser
- Shows tests in real-time execution
- Allows stepping through individual tests
- Shows detailed logs and outputs
- Interactive debugging
- Can pause/resume tests

**Best for**: 
- Developing and debugging tests
- Understanding test failures
- Quick validation during development

**Time**: ~2-3 minutes (interactive, so you control speed)

---

### 2. 👁️ Headed Mode (See Browser)
```bash
npm run test:pw:headed
```

**What it does**:
- Runs all 125 tests with visible browser windows
- You can see what the tests are doing
- Shows test progress in terminal
- Generates screenshots/videos on failure
- Runs 4 tests in parallel (configurable)

**Best for**:
- Seeing visual test execution
- Debugging UI-specific issues
- Demonstrating to stakeholders

**Time**: ~15-20 minutes

**Output**: 
- playwright-report/index.html

---

### 3. 🔍 Headless Mode (Default - Fastest)
```bash
npm run test:pw
```

**What it does**:
- Runs all 125 tests without visible browser
- Fastest execution
- All 5 browsers tested (Chrome, Firefox, Safari, Mobile×2)
- Uses full parallelization
- Generates HTML report

**Best for**:
- CI/CD pipelines
- Nightly test runs
- Production validation

**Time**: ~18-25 minutes

**Output**:
- playwright-report/index.html
- Test summary in terminal

---

### 4. 🐛 Debug Mode
```bash
npm run test:pw:debug
```

**What it does**:
- Runs tests with debugging interface
- Opens Playwright Inspector
- Allows step-through debugging
- Code inspection
- DOM inspection
- Network inspection

**Best for**:
- Deep debugging of test failures
- Understanding test flow
- Browser DevTools access

**Time**: Manual (you control execution)

---

### 5. 📊 View Report
```bash
npm run test:pw:report
```

**What it does**:
- Opens HTML test report from last run
- Shows test results
- Displays screenshots
- Shows videos of failures
- Provides failure details

**Best for**:
- Reviewing test results after completion
- Creating test reports
- Documentation

**Time**: Instant (just opens browser)

---

### 6. Specific Task Testing

**Test only Task 1**:
```bash
npx playwright test --grep "Task 1"
```

**Test only Task 5**:
```bash
npx playwright test --grep "Task 5"
```

**Test only Nordjyske Lift features**:
```bash
npx playwright test --grep "nordjyske"
```

**Test only API (not UI)**:
```bash
npx playwright test --grep "API|should retrieve|should import"
```

**Run in Chromium only** (faster):
```bash
npx playwright test --project=chromium
```

**Run in Firefox only**:
```bash
npx playwright test --project=firefox
```

**Run on desktop only** (no mobile):
```bash
npx playwright test --project=chromium --project=firefox --project=webkit
```

---

## Full Test Suite Scenarios

### Scenario A: Quick Validation (5 min)
Best for: During development, quick checks
```bash
npx playwright test --project=chromium
```
- Single browser (Chromium)
- 25 tests
- Fast execution

### Scenario B: Desktop Validation (12 min)
Best for: Before committing code
```bash
npx playwright test --project=chromium --project=firefox --project=webkit
```
- Three desktop browsers
- 75 tests
- Good coverage

### Scenario C: Full Validation (20 min)
Best for: Before deployment
```bash
npm run test:pw
```
- All 5 browsers (desktop + mobile)
- 125 tests
- Complete coverage

### Scenario D: API Only Tests (3 min)
Best for: Testing backend changes only
```bash
npx playwright test --grep "import|retrieve|calculate"
```
- Skips UI tests
- Focus on API endpoints
- Fast feedback

### Scenario E: Interactive Testing (ad-hoc)
Best for: Development and debugging
```bash
npm run test:pw:ui
```
- Live test runner
- Manual stepping
- Full control

---

## Test Execution Flow

### When You Run `npm run test:pw`:

```
1. Launch Playwright
   ↓
2. Start 5 browser instances
   (Chromium, Firefox, Safari, Mobile Chrome, Mobile Safari)
   ↓
3. Run tests in parallel (4 workers)
   - Each worker gets a test
   - Each test runs in a browser instance
   ↓
4. For each test:
   - Navigate to URL
   - Interact with elements
   - Validate results
   - Capture screenshots on failure
   ↓
5. Generate HTML report
   ↓
6. Exit with status code
   - 0 = all passed
   - 1 = some failed
```

---

## Example Output

### Successful Run:
```
Running 125 tests with 4 workers

 ✓ [chromium] › tasks-1-10.spec.ts:17 › Task 1: Fix kunde dropdown placering › should display customer dropdown below customer input field (2.1s)
 ✓ [chromium] › tasks-1-10.spec.ts:39 › Task 1: Fix kunde dropdown placering › should not show Opgavetype selector (1.8s)
 ✓ [chromium] › tasks-1-10.spec.ts:51 › Task 2: Implementer tag type visualisering › should display different SVG for valmtag roof type (3.2s)
 ...
 ✓ [webkit] › tasks-1-10.spec.ts:532 › Integration Tests › complete workflow: create project, set duration, add packages, calculate (4.5s)

125 passed (18m 42s)
```

### Failed Run:
```
 ✓ [chromium] › tasks-1-10.spec.ts:17 › Task 1 (2.1s)
 ✗ [chromium] › tasks-1-10.spec.ts:51 › Task 2 (3.2s)
   Error: Expected 'value' to be '5'
   
 ✓ [chromium] › tasks-1-10.spec.ts:108 › Task 3 (1.9s)
 ...

123 passed, 2 failed (18m 42s)

To open last HTML report run:
  npx playwright show-report
```

---

## Performance Tuning

### Speed Up Tests
```bash
# Use only one browser
npx playwright test --project=chromium

# Run tests sequentially (use fewer workers)
npx playwright test --workers=1

# Run specific test suite
npx playwright test --grep "Task 1"
```

### Detailed Debugging
```bash
# Show detailed logs
npx playwright test --debug

# Save traces for inspection
npx playwright test --trace on

# Show every network request
npx playwright test
```

---

## Pre-Test Checklist

Before running tests, verify:

- [ ] Backend is running: `npm start` in `/backend`
- [ ] Frontend is running: `npm start` in `/frontend`
- [ ] Database is running and connected
- [ ] No ports 3000/3001 are blocked
- [ ] System has at least 4GB available RAM
- [ ] Node.js version >= 18.0.0

**Check** with:
```bash
# Verify servers are running
curl http://localhost:3000  # Frontend
curl http://localhost:3001  # Backend

# Check Node version
node --version  # Should be v18+
```

---

## Test Results Location

After any test run, results are saved to:
```
./playwright-report/
├── index.html          (Main report)
├── test-results/       (Raw test data)
└── data/              (Trace/video files)
```

Open with:
```bash
npx playwright show-report
```

---

## Common Test Patterns

### Test a Single Task:
```bash
npm run test:pw:ui -- --grep "Task 5"
```

### Test without Mobile:
```bash
npm run test:pw -- --project=chromium --project=firefox --project=webkit
```

### Run and Save Results:
```bash
npm run test:pw
# Results auto-saved to playwright-report/
npm run test:pw:report  # View results
```

### Test with Custom Timeout:
```bash
npx playwright test --timeout=60000  # 60 second timeout
```

---

## Troubleshooting Tests

**Tests hang**:
- Check if servers are running
- Check database connectivity
- Check firewall blocking ports 3000/3001

**Tests fail on specific browser**:
- Run only that browser: `--project=chromium`
- Check browser-specific CSS/layout

**API tests fail**:
- Verify backend is responding: `curl http://localhost:3001`
- Check database connection
- Review logs in backend terminal

**UI tests fail**:
- Verify frontend is running: `curl http://localhost:3000`
- Check for console errors: `npm run test:pw:debug`
- Screenshot shows actual state in report

---

## Integration with CI/CD

### GitHub Actions Example:
```yaml
- name: Run Playwright tests
  run: npm run test:pw
  env:
    CI: true
    BASE_URL: http://localhost:3000
    API_URL: http://localhost:3001
```

### Jenkins Example:
```bash
#!/bin/bash
cd /path/to/tilbudgivern
npm install
npx playwright install
npm run test:pw
```

---

## Quick Reference

| Task | Command | Time | Best For |
|------|---------|------|----------|
| UI Mode | `npm run test:pw:ui` | 2-3m | Development |
| Headed | `npm run test:pw:headed` | 15-20m | Visual validation |
| Headless | `npm run test:pw` | 18-25m | CI/CD |
| Debug | `npm run test:pw:debug` | Manual | Debugging |
| Report | `npm run test:pw:report` | Instant | Viewing results |
| Quick (Chromium) | `npx playwright test --project=chromium` | 5m | Fast check |
| Task 1 | `npx playwright test --grep "Task 1"` | 1m | Specific task |

---

**Ready to test?** Start with: `npm run test:pw:ui` 🚀