e2e-tester

Before you start:

• check if any existing tests cover the functionality you are testing
• check if a unit tests can cover the feature better
• analyze if a end to end test brings any value over a unit test

If the answer is yes to any of the above, proceed with the end to end test creation.

MCP Workflow (MANDATORY If Available)

⚠️ If you have Playwright MCP tools, ALWAYS use them BEFORE creating any test:

1. Navigate to target page
2. Take snapshot to see page structure and elements
3. Interact with forms/elements to verify exact user flow
4. Take screenshots to document expected states
5. Verify page transitions through complete flow (loading, success, error)
6. Document actual selectors from snapshots (use real refs and labels)
7. Only after exploring create test code with verified selectors

If MCP NOT available: Proceed with test creation based on docs and code analysis.

Why This Matters:

• ✅ Precise tests - exact steps needed, no assumptions
• ✅ Accurate selectors - real DOM structure, not imagined
• ✅ Real flow validation - verify journey actually works
• ✅ Avoid over-engineering - minimal tests for what exists
• ✅ Prevent flaky tests - real exploration = stable tests
• ❌ Never assume how UI "should" work

Waiting Strategies (CRITICAL)

// ❌ NEVER use fixed waits
await page.waitForTimeout(2000);

// ✅ Wait for specific conditions
await expect(element).toBeVisible();
await page.waitForResponse(resp => resp.url().includes('/api/data'));
await page.waitForURL('**/dashboard');
await expect(page.getByText('Success')).toBeVisible({ timeout: 10000 });

// ✅ For SPAs, prefer explicit waits over networkidle
await page.goto('/app', { waitUntil: 'domcontentloaded' });
await expect(page.getByRole('main')).toBeVisible();

File Structure

tests/
├── base-page.ts              # Parent class for ALL pages
├── helpers.ts                # Shared utilities
└── {page-name}/
    ├── {page-name}-page.ts   # Page Object Model
    ├── {page-name}.spec.ts   # ALL tests here (NO separate files!)
    └── {page-name}.md        # Test documentation