Initial commit

skills/testing/playwright-e2e-automation/workflow/phase-2-setup.md

@@ -0,0 +1,72 @@
+# Phase 2: Playwright Installation & Setup
+
+**Purpose**: Install Playwright and generate optimal configuration
+
+## Steps
+
+### 1. Install Playwright
+
+```bash
+npm init playwright@latest -- --yes
+# Installs Playwright, test runners, and browsers (Chromium, Firefox, WebKit)
+```
+
+### 2. Generate playwright.config.ts
+
+Configure based on app type:
+- Set base URL (http://localhost:5173 for Vite, etc.)
+- Configure viewport sizes:
+  - Desktop: 1280x720
+  - Tablet: 768x1024
+  - Mobile: 375x667
+- Set screenshot directory: `screenshots/{test-name}/{timestamp}/`
+- Enable trace on failure for debugging
+- Configure retries (2 attempts) and timeout (30s)
+
+### 3. Set up directory structure
+
+```
+tests/
+├── setup/
+│   └── global-setup.ts    # Start dev server
+├── pages/
+│   └── *.page.ts         # Page object models
+├── specs/
+│   └── *.spec.ts         # Test specifications
+└── utils/
+    └── screenshot-helper.ts
+
+screenshots/
+├── baselines/            # Reference images
+├── current/              # Latest test run
+└── diffs/                # Visual comparisons
+```
+
+### 4. Integrate with existing test setup
+
+- Add playwright scripts to package.json
+- Configure alongside Vitest/Jest (no conflicts)
+- Set up TypeScript types for Playwright
+
+## Output
+
+Fully configured Playwright environment with version-appropriate templates
+
+## Performance
+
+~2-3 minutes for installation and setup (one-time)
+
+## Common Issues
+
+**Installation fails**
+- Check Node version (>=16)
+- Retry with --force
+- Suggest manual installation if network issues
+
+**Browser download fails**
+- Check disk space (~500MB needed)
+- Try installing specific browser: `npx playwright install chromium`
+
+## Transition
+
+Proceed to Phase 2.5 (Pre-flight Health Check)