73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
# 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
|
|
|
|
```typescript
|
|
// 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
|