powerhouse-rp-toolkit/tracker-ui/E2E_TESTING.md

Renaissance Periodization Training Toolkit for PowerHouseATX

# Playwright E2E Testing Setup

## What's Implemented

### ✅ Smoke Test Suite
- **File**: `e2e/smoke.spec.js`
- **Coverage**: Navigation between all 4 main pages (Home, Sessions, Intelligence, Logger)
- **Validation**: Core UI elements render correctly on each page

### ✅ CI Integration  
- **File**: `.github/workflows/ci.yml`
- **Features**: 
  - Installs Playwright browsers
  - Builds React app
  - Runs E2E tests
  - Uploads test reports as artifacts

### ✅ Configuration
- **File**: `playwright.config.js`
- **Features**: Timeout settings, browser configs, reporting
- **Browsers**: Chromium (primary), Firefox, Safari for CI

### ✅ Package Scripts
- Added `test:e2e` script to `package.json`
- Playwright dependency added to devDependencies

## Manual Verification

To test the E2E setup locally:

1. **Build the app**:
   ```bash
   cd tracker-ui
   pnpm run build
   ```

2. **Start preview server** (in separate terminal):
   ```bash
   npx vite preview --port 5173
   ```

3. **Run E2E tests**:
   ```bash
   pnpm run test:e2e
   ```

4. **Alternative**: Use the provided scripts:
   - `test-e2e.ps1` (PowerShell)
   - `test-e2e.sh` (Bash)

## What the Tests Verify

1. **Home Page**: PowerHouse Tracker title, Weekly Volume widget, Fatigue Status
2. **Sessions Page**: Table view with workout sessions
3. **Intelligence Page**: Adaptive RIR recommendations display
4. **Logger Page**: Start Session form and buttons
5. **Navigation**: All nav buttons work correctly

## CI Integration

The new CI workflow:
- Runs on push/PR to main branch
- Validates both legacy code and new React app
- Installs Playwright browsers automatically
- Runs full E2E test suite
- Stores test reports for 30 days

## Benefits

✅ **Catch regressions** before they reach production  
✅ **Validate navigation flows** across all pages  
✅ **Ensure UI elements render** correctly  
✅ **Automated testing** in CI/CD pipeline  
✅ **Cross-browser compatibility** (Chromium, Firefox, Safari)  

The setup is production-ready and will help maintain quality as the application grows!