Initial commit

skills/testing/playwright-e2e-automation/workflow/phase-1-discovery.md

@@ -0,0 +1,72 @@
+# 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