Testing

Playwright Configuration

Defined in ftl-frontend/playwright.config.ts.

Setting	Value
testDir	./tests
baseURL	http://localhost:5173
timeout	60 000 ms per test
Browsers	Chromium only (Desktop Chrome)
Traces	retain-on-failure
Screenshots	only-on-failure
Reporter	list

Artifacts from failing runs land in test-results/ (created automatically by Playwright).

Prerequisites

Before running tests:

1. Start the backend (api-server on :8080, ws-server on :8081).
2. Start the dev server in a separate terminal:

pnpm dev

Run Commands

# Run the full suite
pnpm exec playwright test

# Run a single file
pnpm exec playwright test tests/e2e-smoke.spec.ts

# Run headed (browser window visible)
pnpm exec playwright test --headed

# Run with Playwright inspector (step-through debugger)
pnpm exec playwright test --debug

Test Files

File	Purpose
e2e-smoke.spec.ts	Basic end-to-end smoke: loads the app, verifies key pages render
demo-login.spec.ts	Dev-auth login flow using VITE_DEV_AUTH=true
interactions.spec.ts	UI interactions: opening modals, switching tabs, trade form inputs
admin-scoring.spec.ts	Admin scoring settings — read, edit, save
bug-fixes.spec.ts	Regression tests for previously reported bugs
logout-button.spec.ts	Logout clears session and redirects to /landing
referral-flow.spec.ts	?ref= capture, registration form seed, post-registration clear
server-side-noise.spec.ts	Verifies server-side price noise reaches the client via WebSocket
squad-sort-and-refresh.spec.ts	Squad page sort order and refresh behaviour
tutorial-flow.spec.ts	Full onboarding tutorial walkthrough
tutorial-regression.spec.ts	Regression cases for tutorial edge cases (skip, back, replay)
visual-report.spec.ts	Takes full-page screenshots for visual regression comparison
your-team-history.spec.ts	Transaction history list in YourTeam — pagination and content

Tip

In dev, window.__tutorialStore and window.__priceStore are exposed on the global object. Playwright tests can drive the tutorial directly via page.evaluate(() => window.__tutorialStore.getState().start()) without simulating every click.

Note

visual-report.spec.ts writes screenshots to test-results/. Commit those screenshots to create a baseline, then re-run the test to detect regressions. Playwright's built-in toHaveScreenshot() is not used here — this file takes raw screenshots for manual comparison.