Phase 2.5: Pre-flight Health Check

Purpose: Validate app loads correctly before running full test suite - catches configuration errors early

Steps

1. Launch browser and attempt to load app

const browser = await chromium.launch();
const page = await browser.newPage();

try {
  const response = await page.goto(baseURL, { timeout: 30000 });

  if (!response || !response.ok()) {
    throw new Error(`App returned ${response?.status()}`);
  }
} catch (error) {
  // Analyze error and provide guidance
}

2. Monitor console for critical errors

Listen for console errors during page load
Collect all error messages for pattern analysis
Wait 2-3 seconds to let errors surface

3. Analyze errors against known patterns

Load data/error-patterns.yaml error database and match against known patterns:

Example patterns detected:

Tailwind v4 syntax mismatch: "Cannot apply unknown utility class"
PostCSS plugin error: "Plugin tailwindcss not found"
Missing dependencies: "Module not found"

4. Provide actionable diagnostics

❌ Pre-flight check failed: Critical errors detected

Issue: Tailwind CSS v4 syntax mismatch
Root cause: CSS file uses @tailwind directives but v4 requires @import

Fix:
1. Update src/index.css (or globals.css):
   Change from: @tailwind base; @tailwind components; @tailwind utilities;
   Change to: @import "tailwindcss";

2. Update postcss.config.js:
   Change from: plugins: { tailwindcss: {} }
   Change to: plugins: { '@tailwindcss/postcss': {} }

3. Restart dev server: npm run dev

Documentation: https://tailwindcss.com/docs/upgrade-guide

5. Auto-fix if possible, otherwise halt with guidance

For known issues with clear fixes, offer to fix automatically
For ambiguous issues, halt and require user intervention
Prevent running 10+ tests that will all fail due to one config issue

Error Pattern Analysis

function analyzeErrors(consoleErrors) {
  const errorPatterns = parseYAML('data/error-patterns.yaml');
  const issues = [];

  for (const error of consoleErrors) {
    for (const [name, pattern] of Object.entries(errorPatterns.css_errors)) {
      if (pattern.pattern.test(error) ||
          pattern.alternative_patterns?.some(alt => alt.test(error))) {
        issues.push({
          name,
          severity: pattern.severity,
          diagnosis: pattern.diagnosis,
          recovery_steps: pattern.recovery_steps,
          documentation: pattern.documentation,
        });
      }
    }
  }

  return {
    critical: issues.filter(i => i.severity === 'critical'),
    allIssues: issues,
  };
}

Benefits

Fast feedback: 2-3 seconds vs 30+ seconds for full test suite
Clear guidance: Specific fix steps, not generic "tests failed"
Prevents cascade failures: One config error won't fail all 10 tests
Educational: Explains what went wrong and why

Output

Health check passed, or detailed error diagnostics with fix steps

Performance

~2-5 seconds

Transition

If health check passes, proceed to Phase 3 (Test Generation). If fails, provide fixes and halt.

3.1 KiB Raw Permalink Blame History