tilbudgivern/_archive/PLAYWRIGHT_QUICKSTART.md

🎭 Playwright Tests - Quick Start

⚡ Run Tests in 30 Seconds

cd /mnt/HC_Volume_103713257/tilbudgivern

# Option 1: Interactive UI (Recommended for first run)
npm run test:pw:ui

# Option 2: Headless (Fastest - full suite)
npm run test:pw

# Option 3: Watch browser execute
npm run test:pw:headed

---

📊 What Gets Tested

✅ 9 Completed Tasks with 125 tests across 5 browsers:

• Task 1: Customer dropdown positioning
• Task 2: Roof type visualization
• Task 3: Search similar cases
• Task 4: Removed tabs consolidation
• Task 5: Nordjyske Lift products (20 SKUs)
• Task 7: Kran arbejde smart package
• Task 8: Byggepladshegn smart package
• Task 9: Project duration (days/hours)
• Task 10: Automatic cost calculations

---

🔧 Prerequisites (Check Before Running)

# 1. Backend must be running (in another terminal)
cd backend && npm start

# 2. Frontend must be running (in another terminal)  
cd frontend && npm start

# 3. Verify databases are accessible
mysql -u root -p -e "SELECT 1;"

# 4. Verify servers respond
curl http://localhost:3000  # Frontend
curl http://localhost:3001  # Backend

---

🚀 Common Commands

Want to...	Command	Time
Test interactively	npm run test:pw:ui	2-3m
Test fast (Chromium only)	npx playwright test --project=chromium	5m
Test everything	npm run test:pw	18-25m
Test specific task	npx playwright test --grep "Task 5"	1-2m
Debug failing test	npm run test:pw:debug	Manual
View test results	npm run test:pw:report	Instant

---

📈 Test Results

Tests are saved to: ./playwright-report/index.html

After any test run:

npm run test:pw:report  # Opens HTML report in browser

Shows:

• ✅ Pass/fail count
• 📸 Screenshots of failures
• 🎥 Videos of test execution
• 📊 Timing statistics
• 🐛 Error details

---

🎯 Recommended First Run

Step 1: Ensure servers running

# Terminal 1
cd backend && npm start

# Terminal 2
cd frontend && npm start

Step 2: Run tests interactively

# Terminal 3
cd /mnt/HC_Volume_103713257/tilbudgivern
npm run test:pw:ui

Step 3: Watch tests execute and debug any failures

Step 4: View report

npm run test:pw:report

---

✨ Test Coverage

Browser Coverage (5 configurations):

• ✅ Chromium (Chrome/Edge)
• ✅ Firefox
• ✅ WebKit (Safari)
• ✅ Mobile Chrome (Pixel 5)
• ✅ Mobile Safari (iPhone 12)

Test Types:

• ✅ UI component tests
• ✅ API integration tests
• ✅ End-to-end workflow tests
• ✅ Responsive design tests

---

🐛 Troubleshooting

Problem: Tests hang or timeout

# Solution: Verify servers are running
curl http://localhost:3000
curl http://localhost:3001

# Check database
mysql -u root -p -e "SELECT 1;"

Problem: Tests fail on specific browser

# Solution: Run just that browser
npx playwright test --project=firefox
npx playwright test --project=chromium

Problem: Playwright browsers not installed

# Solution: Install browsers
npx playwright install
npx playwright install-deps

---

📚 Full Documentation

For detailed information, see:

• PLAYWRIGHT_TEST_GUIDE.md - Overview & structure
• PLAYWRIGHT_EXECUTION_GUIDE.md - Execution modes & commands
• PLAYWRIGHT_TEST_SUMMARY.md - Complete test inventory

---

📦 Files Created

playwright.config.ts              # Test configuration
tests/playwright/
  └── tasks-1-10.spec.ts         # 125 test cases
setup-playwright.sh               # Installation script
PLAYWRIGHT_TEST_GUIDE.md         # Quick reference
PLAYWRIGHT_EXECUTION_GUIDE.md    # How to run
PLAYWRIGHT_TEST_SUMMARY.md       # Test inventory
package.json                      # Updated with test scripts

---

✅ Status

• ✅ Playwright installed
• ✅ 125 tests created
• ✅ 5 browser configs
• ✅ All tasks covered
• ✅ Ready to run!

---

Ready? → npm run test:pw:ui 🚀

Questions? → Check PLAYWRIGHT_EXECUTION_GUIDE.md