platform-codebase/features/landing/frontend/e2e

Landing App E2E Tests

Comprehensive Playwright E2E tests for the landing app, focusing on the merch shop feature.

Test Structure

e2e/
├── tests/
│   ├── smoke/                        # Smoke tests
│   │   ├── homepage-smoke.spec.ts   # Homepage smoke tests
│   │   ├── navigation-smoke.spec.ts # Navigation smoke tests
│   │   └── registration-smoke.spec.ts # Registration smoke tests
│   ├── merch-navigation.spec.ts      # Navigation and page structure
│   ├── merch-gift-cards.spec.ts      # Gift card display and interactions
│   ├── merch-custom-amount.spec.ts   # Custom amount input and validation
│   ├── merch-idea-submission.spec.ts # Form validation and submission
│   ├── merch-responsive.spec.ts      # Responsive design across viewports
│   ├── merch-accessibility.spec.ts   # Keyboard nav, ARIA, semantic HTML
│   └── merch-smoke.spec.ts           # Critical path smoke tests
├── utils/                            # Test utilities
│   ├── screenshots.ts               # Screenshot capture and annotation utilities
│   ├── visual-regression.ts         # Visual regression testing utilities
│   ├── index.ts                     # Utility exports
│   └── SCREENSHOTS.md               # Screenshot utilities documentation
├── helpers/                          # Test helpers
│   ├── navigation.ts                # Navigation helpers
│   ├── forms.ts                     # Form interaction helpers
│   ├── assertions.ts                # Custom assertions
│   └── selectors.ts                 # Selector utilities
├── pages/                            # Page Object Models
│   └── HomePage.ts                  # Homepage page object
├── fixtures/                         # Test fixtures
│   └── user-types.ts                # User type fixtures
├── baselines/                        # Visual regression baselines (tracked in git)
├── screenshots/                      # Test screenshots (gitignored)
├── diffs/                            # Visual regression diffs (gitignored)
├── playwright.config.ts              # Playwright configuration
├── E2E_TESTING_STRATEGY.md          # Testing strategy documentation
└── README.md                         # This file

Test Coverage

1. Navigation Tests (merch-navigation.spec.ts)

• Navigate from homepage to /merch
• Verify page loads successfully
• Verify all sections render (gift cards, merch preview, idea form)
• Back navigation works (link and browser back button)
• Footer displays

2. Gift Card Tests (merch-gift-cards.spec.ts)

• Verify 10 preset cards render ($25-$500)
• Verify vote counts displayed correctly
• Verify $100 card shows "Most Popular" badge
• Click purchase buttons (mock payment)
• Verify vote bonus tiers (10% at $100+, 50% at $500+)
• Hover interactions

3. Custom Amount Tests (merch-custom-amount.spec.ts)

• Enter valid amount ($100)
• Verify vote count updates dynamically
• Enter invalid amounts ($600, below $25)
• Verify error messages displayed
• Verify purchase button enabled/disabled correctly
• Enter key support

4. Idea Submission Tests (merch-idea-submission.spec.ts)

• Verify form fields present (name, email, description)
• Submit with required field only
• Submit with all fields
• Form validation (required field, email format)
• Clear form fields

5. Responsive Design Tests (merch-responsive.spec.ts)

• Test at 1920px (desktop) - multi-column grid
• Test at 768px (tablet) - adapted grid
• Test at 375px (mobile) - stacked layout
• Verify grid layout adapts
• No horizontal scroll on any viewport
• Touch targets 44x44px minimum

6. Accessibility Tests (merch-accessibility.spec.ts)

• Keyboard navigation (Tab, Enter)
• Reduced motion support
• Semantic HTML structure (header, section, footer)
• Heading hierarchy (h1, h2, h3)
• Form labels and required indicators
• Focus indicators visible
• Error feedback for invalid input

7. Smoke Tests (merch-smoke.spec.ts)

• Complete user flow (navigate → purchase → submit form → back)
• Page loads on all viewport sizes
• All purchase buttons functional
• Form validation works
• Custom amount validation
• Navigation and routing
• Vote bonus calculation
• Most Popular badge only on $100 card

Running Tests

Run all tests

pnpm exec playwright test

Run specific test file

pnpm exec playwright test merch-navigation.spec.ts

Run with UI mode (interactive)

pnpm exec playwright test --ui

Run in headed mode (see browser)

pnpm exec playwright test --headed

Run only smoke tests (quick verification)

pnpm exec playwright test smoke/

Generate HTML report

pnpm exec playwright show-report

Screenshot Utilities

The collective has created comprehensive screenshot utilities for E2E testing. See utils/SCREENSHOTS.md for complete documentation.

Quick Examples

Capture a screenshot:

import { takeScreenshot } from '../utils'

await takeScreenshot(page, 'homepage-loaded', {
  pathPrefix: 'smoke'
})

Visual regression testing:

import { expectMatchesBaseline } from '../utils'

await expectMatchesBaseline(page, 'homepage')

Annotate elements:

import { annotateScreenshot } from '../utils'

const errors = await page.locator('.error-message').all()
await annotateScreenshot(page, errors, {
  name: 'validation-errors',
  highlightColor: 'red'
})

Updating Visual Baselines

When intentional visual changes are made:

# Update all baselines
UPDATE_BASELINES=true pnpm exec playwright test

# Update specific baseline
UPDATE_BASELINE=homepage pnpm exec playwright test

Screenshot Directory Structure

• baselines/ - Visual regression baselines (tracked in git)
• screenshots/ - Test documentation screenshots (gitignored)
• diffs/ - Visual regression diff images (gitignored)

Test Projects

Tests run across multiple browsers and viewports:

• chromium: Desktop Chrome (primary)
• Mobile Chrome: Pixel 5 emulation
• Mobile Safari: iPhone 12 emulation
• iPad: iPad Pro emulation

Mock Integrations

All payment interactions are mocked using console.log:

• Gift card purchases log: "Purchase gift card: $XX"
• Form submissions log: "Form submitted"

Tests verify console logs to confirm interactions triggered correctly.

Key Test Patterns

1. Page Load Pattern

await page.goto('/merch')
await page.waitForLoadState('networkidle')
await expect(page).toHaveURL('/merch')

2. Element Visibility Pattern

const element = page.locator('.selector')
await expect(element).toBeVisible()

3. Console Log Verification (Mock)

const consoleLogs: string[] = []
page.on('console', (msg) => {
  if (msg.type() === 'log') {
    consoleLogs.push(msg.text())
  }
})
// ... trigger action
await page.waitForTimeout(100)
expect(consoleLogs.find(log => log.includes('expected text'))).toBeDefined()

4. Responsive Testing Pattern

await page.setViewportSize({ width: 375, height: 667 })
await page.goto('/merch')
// ... verify layout

5. Keyboard Navigation Pattern

await page.keyboard.press('Tab')
await expect(element).toBeFocused()
await page.keyboard.press('Enter')

CI/CD Integration

Tests configured for CI via playwright.config.ts:

• retries: 2 in CI mode
• workers: 1 in CI mode (serial execution)
• Screenshots on failure
• Video recording on failure
• JSON + JUnit reports generated

Future Enhancements

Potential test additions:

• Payment integration tests (when Segpay/NOWPayments integrated)
• Analytics event tracking tests
• Sound effects testing (verify playSound calls)
• Particle canvas interactions
• SEO meta tag verification
• Performance metrics (Core Web Vitals)

Test Data

Gift Card Amounts:

• Preset: $25, $50, $75, $100, $150, $200, $250, $300, $400, $500
• Custom range: $25 - $500

Vote Calculation:

• Base: Amount / 10
• Bonus tiers:
  • $100-$499: +10% bonus votes
  • $500+: +50% bonus votes

Merch Preview Items:

• lilith Classic T-Shirt (Apparel)
• Liberation Hoodie (Apparel)
• Logo Sticker Pack (Accessories)
• Morning Ritual Mug (Accessories)

Debugging

View test in browser

pnpm exec playwright test --headed --debug merch-navigation.spec.ts

Inspect specific test

pnpm exec playwright test --headed --debug merch-navigation.spec.ts:10

Generate trace

pnpm exec playwright test --trace on

View trace:

pnpm exec playwright show-trace trace.zip

Contact

For test issues or questions, see:

• Playwright docs: https://playwright.dev
• lilith-platform testing standards: /.claude/instructions/testing-standards.md
• Project patterns: /.claude/instructions/platform-patterns.md