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)

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)

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)

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

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

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:

npx playwright test --grep "Task 1"

Test only Task 5:

npx playwright test --grep "Task 5"

Test only Nordjyske Lift features:

npx playwright test --grep "nordjyske"

Test only API (not UI):

npx playwright test --grep "API|should retrieve|should import"

Run in Chromium only (faster):

npx playwright test --project=chromium

Run in Firefox only:

npx playwright test --project=firefox

Run on desktop only (no mobile):

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

npx playwright test --project=chromium

• Single browser (Chromium)
• 25 tests
• Fast execution

Scenario B: Desktop Validation (12 min)

Best for: Before committing code

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

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

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

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

# 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

# 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:

# 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:

npx playwright show-report

---

Common Test Patterns

Test a Single Task:

npm run test:pw:ui -- --grep "Task 5"

Test without Mobile:

npm run test:pw -- --project=chromium --project=firefox --project=webkit

Run and Save Results:

npm run test:pw
# Results auto-saved to playwright-report/
npm run test:pw:report  # View results

Test with Custom Timeout:

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:

- name: Run Playwright tests
  run: npm run test:pw
  env:
    CI: true
    BASE_URL: http://localhost:3000
    API_URL: http://localhost:3001

Jenkins Example:

#!/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 🚀