Fix Playwright tests: add Prisma client generation to webServer command

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
2026-04-24 13:54:57 +00:00 · 2026-01-08 03:32:29 +00:00
parent c19174753e
commit 651083ec72
3 changed files with 180 additions and 4 deletions
--- a/README.md
+++ b/README.md
@@ -564,15 +564,27 @@ docker run -p 5432:5432 -e POSTGRES_PASSWORD=dev postgres:16
 ### Testing

 ```bash
-# From frontends/nextjs/
-npm run test:unit              # Vitest unit tests
+# Unit Tests (from frontends/nextjs/)
+npm run test:unit              # Vitest unit tests (watch mode)
 npm run test:unit -- --run     # Run once (no watch)
-npm run test:e2e               # Playwright E2E tests
+
+# E2E Tests (from root)
+npm install                    # Install dependencies
+npx playwright install chromium # Install browser (first time only)
+npm run db:generate            # Generate Prisma client (REQUIRED before E2E tests)
+npm run test:e2e               # Run Playwright E2E tests
+npm run test:e2e:ui            # Run with Playwright UI
+npm run test:e2e:headed        # Run with visible browser
+npm run test:e2e:debug         # Debug mode
+
+# Other
 npm run lint                   # ESLint
 npm run typecheck              # TypeScript validation
 npm run build                  # Production build
 ```

+> **Note**: E2E tests require Prisma client to be generated first. The playwright config will automatically run `npm run db:generate` before starting the dev server, but you can run it manually if needed.
+
 ---

 ## Project Structure
--- a/docs/playwright-tests-investigation.md
+++ b/docs/playwright-tests-investigation.md
@@ -0,0 +1,164 @@
+# Playwright Tests Investigation
+
+## Problem Statement
+Do playwright tests actually work?
+
+## Investigation Summary
+
+### Test Infrastructure
+- **Location**: `/e2e/` directory
+- **Configuration**: `e2e/playwright.config.ts`
+- **Test Files**: 
+  - `e2e/smoke.spec.ts` - Basic smoke tests
+  - `e2e/login.spec.ts` - Authentication flow tests
+  - `e2e/navigation.spec.ts` - Navigation and routing tests
+  - `e2e/crud.spec.ts` - CRUD operation tests
+  - Additional tests in subdirectories
+
+### Configuration Analysis
+The Playwright configuration includes:
+- **Base URL**: `http://localhost:3000`
+- **Web Server**: Configured to run `npm run dev` before tests
+- **Timeout**: 300 seconds (5 minutes) for server startup
+- **Browser**: Chromium (Desktop Chrome)
+- **Retry Strategy**: 2 retries on CI, 0 locally
+
+### Issues Found
+
+#### 1. **Missing Prisma Client Generation** ❌
+**Severity**: CRITICAL - Blocks all tests
+
+**Error**:
+```
+Error: Cannot find module '.prisma/client/default'
+```
+
+**Root Cause**: 
+- The web server attempts to start via `npm run dev`
+- Next.js application tries to load Prisma client
+- Prisma client has not been generated
+- Application cannot start, causing all tests to fail
+
+**Impact**:
+- Dev server fails to start properly
+- All Playwright tests fail with "Cannot navigate to invalid URL"
+- Tests cannot connect to the application
+
+**Solution Required**:
+```bash
+npm run db:generate  # Generate Prisma client before running tests
+```
+
+#### 2. **Test Execution Without Prerequisites** ❌
+**Severity**: HIGH
+
+The Playwright tests assume:
+1. Dependencies are installed ✅ (works after `npm install`)
+2. Playwright browsers are installed ✅ (works after `npx playwright install chromium`)
+3. **Prisma client is generated** ❌ (MISSING - causes failures)
+4. Database is set up and migrated ⚠️ (not verified)
+5. Web server can start successfully ❌ (blocked by #3)
+
+### Test Execution Results
+
+#### Without Prisma Client:
+```
+Running 7 tests using 2 workers
+
+  ✘  All 7 tests FAILED
+  
+Failure reason: "Protocol error (Page.navigate): Cannot navigate to invalid URL"
+```
+
+The webServer configuration tries to start but fails repeatedly with Prisma client errors, preventing Playwright from navigating to any pages.
+
+### Recommendations
+
+#### Immediate Fixes
+
+1. **Add Prisma Generation Step**
+   - Update test documentation to require `npm run db:generate`
+   - Consider adding to playwright webServer command or globalSetup
+
+2. **Update Playwright Configuration**
+   ```typescript
+   webServer: {
+     command: 'npm run db:generate && npm run dev',  // Generate before starting
+     url: 'http://localhost:3000',
+     reuseExistingServer: !process.env.CI,
+     timeout: 300 * 1000,
+   }
+   ```
+
+3. **Add Global Setup Script**
+   Create `e2e/global-setup.ts`:
+   ```typescript
+   import { execSync } from 'child_process';
+   
+   export default async function globalSetup() {
+     console.log('Generating Prisma client...');
+     execSync('npm run db:generate', { stdio: 'inherit' });
+     console.log('Prisma client generated successfully');
+   }
+   ```
+
+4. **Document Prerequisites**
+   Update testing documentation to clearly state:
+   - Run `npm install` first
+   - Run `npm run db:generate` before tests
+   - Ensure database is accessible
+   - Run `npx playwright install chromium` for browsers
+
+#### Long-term Improvements
+
+1. **Add Pre-Test Validation**
+   - Check if Prisma client exists
+   - Verify database connection
+   - Confirm server can start
+   - Provide helpful error messages
+
+2. **CI/CD Integration**
+   - Ensure CI pipeline runs `db:generate`
+   - Set up test database properly
+   - Cache Playwright browsers
+
+3. **Better Error Messages**
+   - Make Playwright config fail fast with clear messages
+   - Add healthcheck endpoint to verify server readiness
+
+### Conclusion
+
+**Answer to "Do playwright tests actually work?"**
+
+**NO** - The Playwright tests are properly configured but **cannot run successfully** due to a missing prerequisite: **Prisma client generation**.
+
+The test files themselves are well-written and would work if the application could start. The root issue is that the Next.js application depends on Prisma client, which must be generated before the development server can start.
+
+**Fix Required**: Generate Prisma client before running tests, either manually or automatically via configuration changes.
+
+### Test Execution Commands (Corrected)
+
+```bash
+# Install dependencies
+npm install
+
+# Install Playwright browsers
+npx playwright install chromium
+
+# Generate Prisma client (CRITICAL STEP)
+npm run db:generate
+
+# Run tests
+npm run test:e2e
+
+# Or with UI
+npm run test:e2e:ui
+```
+
+### Files Requiring Changes
+
+1. `e2e/playwright.config.ts` - Add Prisma generation to webServer command or globalSetup
+2. `docs/TESTING_GUIDE.md` - Update prerequisites section
+3. `README.md` - Update E2E test instructions
+4. `.github/workflows/*.yml` - Ensure CI runs db:generate before tests
+
--- a/e2e/playwright.config.ts
+++ b/e2e/playwright.config.ts
@@ -34,7 +34,7 @@ export default defineConfig({

  /* Run your local dev server before starting the tests */
  webServer: {
-    command: 'npm run dev',
+    command: 'npm run db:generate && npm run dev',
    url: 'http://localhost:3000',
    reuseExistingServer: !process.env.CI,
    timeout: 300 * 1000,