tilbudgivern/_archive/PLAYWRIGHT_TEST_GUIDE.md

Playwright Test Suite - Quick Start Guide

Overview

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

Installation

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

# Run setup
./setup-playwright.sh

Or install manually:

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

Running Tests

1. UI Mode (Recommended for Development)

Interactive test runner with live updates:

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:

npx playwright test --headed

3. Headless Mode (Default)

Run tests without visible browser:

npx playwright test

4. Run Specific Task Tests

Test only one task:

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:

npx playwright test --debug

6. View Test Report

After tests complete:

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:

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

   cd backend
   npm start
   # or
   npm run dev
   

2. Frontend running (for UI tests):

   cd frontend
   npm start
   # or
   npm run dev
   

3. Database accessible (for data persistence tests)

Common Commands

# 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

# 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

# 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

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:

npx playwright show-report

CI/CD Integration

For GitHub Actions or other CI systems:

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

   npx playwright test --workers=4
   

2. Specific browser only:

   npx playwright test --project=chromium
   

3. Skip video recording (in config):

   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