Initial commit

skills/playwright-e2e-automation/workflow/phase-4-capture.md

@@ -0,0 +1,65 @@
+# Phase 4: Screenshot Capture & Execution
+
+**Purpose**: Run tests and capture comprehensive visual data
+
+## Steps
+
+### 1. Execute test suite
+
+```bash
+npx playwright test --project=chromium --headed=false
+```
+
+### 2. Capture screenshots systematically
+
+- Full-page screenshots for layout analysis
+- Element-specific screenshots for component testing
+- Different viewports (desktop, tablet, mobile)
+- Different states (hover, focus, active, disabled)
+
+### 3. Organize screenshot artifacts
+
+- Group by test name
+- Add timestamp and viewport metadata
+- Generate index file for easy navigation
+
+### 4. Handle failures gracefully
+
+On test failure:
+- Capture additional debug screenshots
+- Save page HTML snapshot
+- Record network activity
+- Generate Playwright trace for replay
+
+## Output
+
+Organized screenshot directory with metadata:
+
+```
+screenshots/
+├── current/
+│   ├── home-page-load-2024-01-15T10-30-00.png
+│   ├── home-page-after-click-2024-01-15T10-30-05.png
+│   └── index.json (metadata)
+└── ...
+```
+
+## Performance
+
+~30-60 seconds for typical app (5-10 tests)
+
+## Common Issues
+
+**Screenshot capture fails**
+- Increase timeout
+- Add explicit waits
+- Capture partial screenshot on failure
+
+**Tests timeout**
+- Check dev server is running
+- Increase test timeout
+- Add explicit wait conditions
+
+## Transition
+
+Proceed to Phase 5 (Visual Analysis)