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

// 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)

1.6 KiB Raw Blame History