low-code-react-app-b/docs/E2E_TEST_FIX.md

E2E Test Configuration Fix

Problem

Playwright E2E tests were timing out with the error:

Error: Timed out waiting 180000ms from config.webServer.

Root Cause

Port mismatch between Playwright configuration and Vite dev server:

• playwright.config.ts was configured to expect server on port 5173 (Vite's default)
• vite.config.ts was configured to run server on port 5000

This caused Playwright to wait for a server that would never respond on the expected port.

Changes Made

1. Fixed Port Configuration in playwright.config.ts

• Changed baseURL from http://localhost:5173 → http://localhost:5000
• Changed webServer.url from http://localhost:5173 → http://localhost:5000
• Reduced webServer.timeout from 180000ms → 120000ms (2 minutes)
• Reduced timeout from 60000ms → 45000ms per test
• Reduced expect.timeout from 15000ms → 10000ms
• Reduced actionTimeout from 15000ms → 10000ms
• Reduced navigationTimeout from 30000ms → 20000ms

2. Optimized Test Files

e2e/smoke.spec.ts

• Replaced page.waitForTimeout() with page.waitForLoadState('networkidle') for more reliable waits
• Added explicit timeout values to all page.goto() calls
• Reduced individual test timeouts (20-30s instead of 30-45s)
• More efficient waiting strategies

e2e/codeforge.spec.ts

• Same optimizations as smoke tests
• Better handling of async operations
• Explicit timeouts prevent hanging

Benefits

1. ✅ Tests now connect to correct port
2. ✅ Faster test execution (no arbitrary waits)
3. ✅ More reliable (networkidle vs fixed timeouts)
4. ✅ Better timeout management per test
5. ✅ Clearer failure messages when tests do fail

Test Execution

Run E2E tests with:

npm run test:e2e

Or with the fallback:

npm run test:e2e --if-present || echo "No E2E tests configured"

CI/CD Integration

The tests will now:

• Start the dev server on port 5000
• Wait up to 2 minutes for server to be ready
• Run tests with appropriate per-test timeouts
• Retry failed tests 2x in CI environments
• Generate HTML reports

Future Improvements

Consider adding:

• More granular test timeouts based on test complexity
• Test parallelization configuration
• Screenshot comparison tests
• Visual regression testing
• API mocking for faster, more isolated tests