E2e Review

E2E Test Review

Periodic exercise to run the full E2E test suite, triage results, review screenshots, and identify coverage gaps.

Step 0: Discover Test Setup

Before running anything, detect the project's E2E infrastructure:

1. Find the test config. Search for playwright.config.ts, cypress.config.ts, jest.config.ts, or similar
2. Find the test directory. Look for e2e/, tests/, test/, __tests__/, cypress/
3. Identify the runner. Check package.json scripts for test:e2e, test, playwright, cypress
4. Check for a testing guide. Look for E2E-TESTING-GUIDE.md, TESTING.md, or similar in the test directory

If no E2E tests exist, report that and ask whether to set them up.

Step 1: Run Full Suite

Use the detected test command. Common patterns:

# Playwright
npx playwright test 2>&1 | tail -40

# Cypress
npx cypress run 2>&1 | tail -40

# Jest E2E
npx jest --config jest.e2e.config.ts 2>&1 | tail -40

# package.json script
npm run test:e2e 2>&1 | tail -40

Record total pass/fail/skip counts.

Step 2: Triage Failures

For each failure, classify:

• Test bug: Selector changed, timing issue, flaky assertion. Fix the test.
• App bug: UI actually broke. Report and fix.
• Pre-existing: Known issue from before. Note and skip.

Use traces/videos for debugging when available.

Step 3: Review Screenshots from Passing Tests

Even passing tests can hide visual issues. Find and open screenshots:

# Common screenshot locations
find . -path "*/test-results/*" -name "*.png" | head -20
find . -path "*/screenshots/*" -name "*.png" | head -20
find . -path "*/cypress/screenshots/*" -name "*.png" | head -20

Check for:

• Layout bugs (overlapping, spacing, cutoff)
• Mobile overflow (content beyond viewport)
• Missing content (empty areas)
• Visual regressions from previous runs

Prioritize: mobile viewport tests, recently changed pages, interaction-state screenshots (edit mode, dropdowns, modals).

Step 4: Check Coverage Gaps

1. Map app routes. Find all pages/routes in the app (check router config, app/ directory, pages/ directory)
2. Map existing tests. List what each test file covers
3. Identify gaps. Routes or features with no test coverage
4. Prioritize. Critical user flows (auth, payments, core features) first

Step 5: Report

Summarize:

• Pass/fail/skip counts (compared to last run if available)
• Failures triaged with classification
• Visual issues found in screenshots
• Coverage gaps identified
• Tests added or fixed

Writing New Tests

Follow the project's existing patterns. General principles:

• Selectors: Prefer role-based > text-based > placeholder-based > CSS class
• Waits: Use explicit waits (waitForSelector, waitForResponse) over waitForTimeout
• Auth: Reuse existing auth fixtures/setup rather than logging in per test
• Mobile: Use project-level viewport config, not per-test overrides
• Assertions: Check both positive (element visible) and negative (no error banners)

After creating a test file, register it in the test config if required (e.g., Playwright testMatch arrays).