Initial commit

skills/testing/playwright-e2e-automation/workflow/phase-3-generation.md

@@ -0,0 +1,68 @@
+# Phase 3: Test Generation
+
+**Purpose**: Create screenshot-enabled test suite covering critical workflows
+
+## Steps
+
+### 1. Generate page object models
+
+- Create POM classes for each major page/component
+- Define locators using best practices (getByRole, getByLabel, getByText)
+- Add screenshot capture methods to each POM
+
+### 2. Create test specifications
+
+Generate tests for each critical user journey with screenshot capture at key points:
+- Initial page load
+- Before interaction (button click, form fill)
+- After interaction
+- Error states
+- Success states
+
+### 3. Add accessibility checks
+
+- Integrate axe-core for automated a11y testing
+- Capture accessibility violations in screenshots
+- Generate accessibility reports
+
+### 4. Set up screenshot helpers
+
+```typescript
+// templates/screenshot-helper.ts
+export async function captureWithContext(
+  page: Page,
+  name: string,
+  context?: string
+) {
+  const timestamp = new Date().toISOString();
+  const path = `screenshots/current/${name}-${timestamp}.png`;
+  await page.screenshot({ path, fullPage: true });
+  return { path, context, timestamp };
+}
+```
+
+## Output
+
+Complete test suite with screenshot automation
+
+## Test Coverage
+
+Aim for critical user journeys (80/20 rule):
+- Core functionality tests
+- Authentication flows
+- Form submissions
+- Key interactions
+
+## Common Issues
+
+**Too many tests generated**
+- Focus on critical paths
+- Prioritize user journeys over edge cases
+
+**Locators not found**
+- Use semantic locators (getByRole, getByLabel)
+- Add test IDs as last resort
+
+## Transition
+
+Proceed to Phase 4 (Screenshot Capture & Execution)