BudgetPilot E2E Tests

Playwright E2E test suite for BudgetPilot.

Structure

tests/e2e/
  helpers/db.ts        # Dexie seeding helpers (runs in browser context)
  helpers/nav.ts       # Navigation helpers
  pages/               # Page Object Models (9 pages)
  fixtures.ts          # Shared test fixtures, CSV data, and helpers
  fixtures/themes.ts   # Theme JSON fixtures
  tier1/               # Critical path — 5 browsers + tablet
  tier2/               # Regression — Chromium only
  tier3/               # Multi-language / i18n (ES, FR) — Chromium only
  tier4/               # Viewport-specific behavior — Chromium only
  tier5/               # Error paths & edge cases — Chromium only
  tier6/               # Edge cases in known-fragile surfaces — Chromium only

Running locally

1. Build the app and place dist/ in the root of this repo:

   # In the budget-tracker repo:
   npm run build
   cp -r dist/ ../budget-tracker-e2e/dist/

2. Install dependencies:

   npm ci
   npx playwright install --with-deps

3. Run tests by tier:

   npm run test:tier1    # Critical path (5 browsers + tablet)
   npm run test:tier2    # Regression (chromium only)
   npm run test:tier3    # Multi-language / i18n (chromium only)
   npm run test:tier4    # Viewport-specific behavior (chromium only)
   npm run test:tier5    # Error paths & edge cases (chromium only)
   npm run test:tier6    # Cross-cutting concerns (chromium only)

4. Run all tests:

   npm test

CI

Tests run automatically via GitHub Actions on every push to main.

The workflow runs tiers in dependency order: tier1 first (5 browsers + tablet), then tier2, tier3, tier4, tier5, and tier6 (chromium-only) after tier1 passes.

Required secrets

Secret	Description
APP_REPO_TOKEN	Fine-grained PAT with actions:read on encomp/budget-tracker

To create the token:

1. GitHub → Settings → Developer settings → Fine-grained personal access tokens
2. Repository access: Only encomp/budget-tracker
3. Permissions: Actions → Read-only
4. Copy token → add as APP_REPO_TOKEN secret in encomp/budget-tracker-e2e

Tier structure

Tier	Browsers	Tests	Purpose
1	chromium, firefox, webkit, mobile-chrome, mobile-safari, tablet	174	Critical path
2	chromium	57	Regression
3	chromium	57	Multi-language / i18n: ES + FR locale switching, formatting, translations
4	chromium	17	Viewport-specific: responsive layouts, nav patterns, component swaps
5	chromium	20	Error paths, validation, boundary values
6	chromium	34	Edge cases: themes, sliders, dates, currency, budget, empty states

Total: 359 tests across 11 browser projects