[Test] Phase 2: E2E Smoke Tests (Playwright)

[realproject7]

Parent: #426

Summary

Add end-to-end smoke tests using Playwright to verify critical user flows against a running dev server.

Setup

• Install: @playwright/test
• Create playwright.config.ts: base URL http://localhost:3000, webServer command npm run dev
• Add test:e2e script to package.json
• Add Playwright to CI (run after build, with npx playwright install --with-deps chromium)

Test Flows

Home Page (/)

• Page loads, story grid renders
• FilterBar visible, dropdowns functional
• Tab switch (Recent ↔ Trending) loads different results
• Pagination (Next/Previous) works
• Genre and language filters update results

Story Detail (/story/[id])

• Page loads with story title, plots, ruled paper styling
• Donation history section renders
• Price chart renders (no duplicate key warnings in console)
• TradingWidget visible

Create Storyline (/create)

• Form renders with all fields (title, genre, language, genesis plot)
• Ruled paper styling on textareas
• Validation: empty title shows error
• Wallet-not-connected state handled gracefully

Navigation

• NavBar links work (Home, Create)
• Logo links to home
• Footer renders

Acceptance Criteria

• All flows above covered
• npm run test:e2e passes
• Tests run in CI (headless Chromium)
• Console error assertions: no React warnings, no uncaught exceptions
• Tests do NOT require wallet connection or on-chain transactions

Dependencies

• Phase 1 ([Test] Phase 1: Component Tests (Vitest + Testing Library) #427) — not strictly required but recommended first

[realproject7]

E2E smoke tests complete. 11 Playwright tests across home, story detail, create, navigation. CI e2e job added with Supabase secrets. PR #438 merged.