Phase 1: Application Discovery & Version Detection

Purpose: Understand the application architecture, detect framework versions, and determine optimal Playwright setup

Steps

1. Detect application type and versions

Read package.json to identify frameworks (React, Vite, Next.js, Express, etc.)
Check for common files (vite.config.ts, next.config.js, app.js, index.html)
Identify build tools and dev server configuration
Extract installed package versions for version-aware configuration

2. Consult version compatibility database

Load data/framework-versions.yaml compatibility rules
Match installed versions against version ranges using semver
Determine appropriate templates for each framework version
Identify potential breaking changes or incompatibilities
Example: Tailwind v4 detected → use @import syntax, not @tailwind

3. Validate application access

Check if dev server is running (ports 3000, 5173, 8080, etc.)
If not running, determine how to start it (npm run dev, npm start, etc.)
Verify application loads successfully

4. Map critical user journeys

Identify key pages/routes from routing configuration
Detect authentication flows
Find form submissions and interactive elements
Locate API integrations

Version Detection Logic

// Load compatibility database
const versionDb = parseYAML('data/framework-versions.yaml');

// Detect versions
const detectedVersions = {
  tailwind: detectVersion(deps.tailwindcss, versionDb.tailwindcss),
  react: detectVersion(deps.react, versionDb.react),
  vite: detectVersion(deps.vite, versionDb.vite),
};

// Select appropriate templates
const templates = {
  css: detectedVersions.tailwind?.templates.css || 'templates/css/vanilla.css',
  postcss: detectedVersions.tailwind?.templates.postcss_config,
  playwright: 'templates/playwright.config.template.ts',
};

Output

Application profile with:

Framework type and versions
URLs and ports
Test targets
Selected templates

Common Issues

Unrecognized framework

Ask user to specify app type and dev server command manually
Use generic static site configuration as fallback

Missing package.json

Check for other indicators (index.html, etc.)
Prompt user for application details

Transition

Proceed to Phase 2 (Playwright Installation) with version-aware configuration

2.3 KiB Raw Permalink Blame History