History

…
..
baselines
fixtures
helpers
pages
screenshots/smoke
setup
tests
utils
Dockerfile
E2E_TESTING_STRATEGY.md
README.md

README.md

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

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