Step 7: UI Tests

Prerequisites

□ GATE 6 PASSED (frontend unit tests complete)
□ All unit tests passing with ≥80% coverage

Process

1. Load Context

cat specs/{type}/{feature-name}.md              # Spec
cat src/components/{feature}/*.tsx              # Components
cat tests/unit/components/{feature}/*.test.tsx  # Unit tests
cat skills/test-patterns-ui.md                  # UI test patterns
cat skills/ux-patterns.md                       # UX patterns (a11y, responsive, forms)
cat skills/gate-7-ui-test.md                    # Gate 7 criteria

2. Element Selection Priority

From test-patterns-ui skill:

// ✅ PRIORITY 1: data-testid
await page.locator('[data-testid="email-input"]').fill('...');

// ✅ PRIORITY 2: id
await page.locator('#email-input').fill('...');

// ⚠️ PRIORITY 3: role + name
await page.getByRole('button', { name: 'Submit' }).click();

// ❌ AVOID: text, CSS, XPath

3. Delegate to Test Writer

Use Task tool with test-writer agent:

Write UI tests for {feature-name}:
- Use data-testid for element selection
- All viewports (mobile 375px, tablet 768px, desktop 1280px)
- All browsers (Chrome, Firefox, Safari)
- Accessibility audit (axe)
- Keyboard navigation
- Visual regression baseline
- Follow test-patterns-ui skill
- Follow ux-patterns skill (accessibility, responsive, forms)

4. Key Requirements

Per Component:

• Renders correctly in browser
• Mobile viewport (375px)
• Tablet viewport (768px)
• Desktop viewport (1280px)
• Hover, focus, active states
• Disabled states

Cross-Browser:

• Chrome passes
• Firefox passes
• Safari/WebKit passes

Accessibility:

• axe audit: 0 violations
• Keyboard navigation works
• Focus order logical

5. Visual Regression

await expect(page).toHaveScreenshot('feature-desktop.png');
await expect(page).toHaveScreenshot('feature-mobile.png');

6. Validate Gate

Use Task tool with gate-keeper agent:

Validate GATE 7 for {feature-name}

See gate-7-ui-test skill for all 20 criteria.

Output

• UI tests: tests/ui/{feature}/
• Visual snapshots: tests/ui/visual/
• Accessibility report