# Playwright Test Suite - Quick Start Guide

## Overview
This test suite validates all 9 completed tasks (1-5, 7-10) using Playwright browser automation.

## Installation

```bash
# Make setup script executable
chmod +x setup-playwright.sh

# Run setup
./setup-playwright.sh
```

Or install manually:

```bash
npm install --save-dev @playwright/test
npx playwright install
```

## Running Tests

### 1. **UI Mode (Recommended for Development)**
Interactive test runner with live updates:

```bash
npx playwright test --ui
```

**Benefits:**
- See tests running in real-time
- Step through tests manually
- View detailed logs
- Screenshot on failure

### 2. **Headed Mode (See Browser)**
Run tests with visible browser:

```bash
npx playwright test --headed
```

### 3. **Headless Mode (Default)**
Run tests without visible browser:

```bash
npx playwright test
```

### 4. **Run Specific Task Tests**
Test only one task:

```bash
npx playwright test --grep "Task 1"
npx playwright test --grep "Task 5"
npx playwright test --grep "Task 10"
```

### 5. **Debug Mode**
Step through code with debugger:

```bash
npx playwright test --debug
```

### 6. **View Test Report**
After tests complete:

```bash
npx playwright show-report
```

## Test Structure

### Task 1: Customer Dropdown Positioning
- Tests dropdown visibility below input field
- Verifies Opgavetype selector is removed
- Validates dropdown positioning

### Task 2: Roof Type Visualization
- Verifies valmtag SVG rendering
- Tests isometric view with multiple surfaces
- Validates visualization updates on type change

### Task 3: Search Similar Cases
- Tests API endpoint `/search-similar/cases`
- Validates response structure
- Verifies confidence scoring

### Task 4: Removed Tabs
- Verifies single "Alle Detaljer" tab exists
- Tests both materials and tasks visible
- Validates tab consolidation

### Task 5: Nordjyske Lift Products
- Tests import endpoint
- Validates product retrieval
- Verifies pricing accuracy
- Checks SKU identifiers (NJL-*)

### Task 7: Kran arbejde Smart Package
- Tests package creation
- Validates task count
- Verifies crane equipment included

### Task 8: Byggepladshegn Smart Package
- Tests package creation
- Validates metrisk pricing (m/dag)
- Checks montage tasks

### Task 9: Project Duration
- Tests duration setting in days
- Tests duration setting in hours
- Validates database persistence

### Task 10: Automatic Calculations
- Tests total calculation endpoint
- Validates rental cost × duration multiplication
- Verifies labor hours to days conversion
- Tests final project with totals retrieval

## Environment Variables

Set these before running tests:

```bash
# Optional - defaults shown
export BASE_URL=http://localhost:3000
export API_URL=http://localhost:3001
export CI=false
```

## Prerequisites

1. **Backend running** (for API tests):
   ```bash
   cd backend
   npm start
   # or
   npm run dev
   ```

2. **Frontend running** (for UI tests):
   ```bash
   cd frontend
   npm start
   # or
   npm run dev
   ```

3. **Database accessible** (for data persistence tests)

## Common Commands

```bash
# Run all tests
npm run test:pw

# Run tests in UI mode
npm run test:pw:ui

# Run headed (see browser)
npm run test:pw:headed

# Run specific test file
npx playwright test tests/playwright/tasks-1-10.spec.ts

# Run single test
npx playwright test -g "should display customer dropdown"

# Run with specific browser
npx playwright test --project=chromium
npx playwright test --project=firefox

# Generate coverage report
npx playwright test --reporter=html

# Run tests in parallel (faster)
npx playwright test --workers=4

# Run tests sequentially (slower but safer)
npx playwright test --workers=1
```

## Troubleshooting

### Tests fail to connect to server
```bash
# Ensure both servers are running
cd backend && npm start &
cd frontend && npm start &
# Then run tests
npx playwright test
```

### Port 3000 or 3001 already in use
```bash
# Find and kill process
lsof -ti:3000 | xargs kill -9
lsof -ti:3001 | xargs kill -9

# Or use different ports
export BASE_URL=http://localhost:3002
export API_URL=http://localhost:3003
```

### Playwright not installed
```bash
npx playwright install
# Also install system dependencies
npx playwright install-deps
```

### Tests timeout
- Increase timeout in `playwright.config.ts`
- Check if servers are responding
- Verify database connection
- Check system resources

## Test Report Output

After tests complete, HTML report is generated at:
```
playwright-report/index.html
```

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

## CI/CD Integration

For GitHub Actions or other CI systems:

```bash
# Install dependencies and browsers
npm ci
npx playwright install

# Run tests in CI mode
CI=true npx playwright test --workers=1
```

## Performance Tips

1. **Parallel execution** (default):
   ```bash
   npx playwright test --workers=4
   ```

2. **Specific browser only**:
   ```bash
   npx playwright test --project=chromium
   ```

3. **Skip video recording** (in config):
   ```typescript
   video: undefined  // instead of 'retain-on-failure'
   ```

## Next Steps

1. ✅ Setup Playwright with `./setup-playwright.sh`
2. ✅ Ensure backend and frontend are running
3. ✅ Run tests: `npx playwright test --ui`
4. ✅ Review results in HTML report
5. ✅ Fix any failures
6. ✅ Commit passing tests

---

**Need Help?**
- Playwright Docs: https://playwright.dev
- Test Reporter: `npx playwright show-report`
- Debug Mode: `npx playwright test --debug`