Epic: Add Playwright E2E tests for frontend visual verification

[trillium]

Overview

Add Playwright as the frontend E2E testing framework to verify visual changes and user flows. This complements existing backend integration tests (#1899) and modernizes the outdated Cypress setup from #269.

Action Items

• Install Playwright and configure for 3 browsers (Chromium, Firefox, WebKit)
• Establish API route mocking pattern for auth and data endpoints
• Write initial tests for ProjectForm (PR adapt ValidatedTextField to accept custom validation functions #1789 - ValidatedTextField custom validation)
• Add tests for login page validation
• Add tests for project edit flow (ManageProjects page)
• Add tests for user check-in flow
• Add tests for admin dashboard
• Add tests for user search/permissions
• Integrate Playwright into CI pipeline (GitHub Actions)
• Add visual regression testing (screenshot comparison)
• Create auth storage state fixture for reusable login across tests
• Write tests for future PRs with visual changes (e.g., MUI migrations)

Resources/Instructions

• Playwright documentation
• Branch: trilliumsmith/playwright
• Test commands:
  • yarn test:e2e - Run all tests headless
  • yarn test:e2e:ui - Interactive UI mode
  • yarn test:e2e:headed - Run with visible browser
• Related issues: Spike: Frontend unit and end-2-end testing #269 (original Cypress spike), Epic: Write new backend integration tests for router-controller-model flow #1899 (backend integration tests), adapt ValidatedTextField to accept custom validation functions #1789 (first PR tested)

[m13v]

nice that you already have the 3-browser setup and API mocking working. for the visual regression testing item, the biggest lesson we learned is to keep visual baselines separate from functional tests. mixing them means a CSS change that affects 20 pages blocks your entire test suite until someone updates all baselines. we run visual checks as a separate non-blocking CI step that generates a diff report but doesn't fail the pipeline. functional E2E tests (login, form submissions, navigation) run separately and block merges. for the remaining flows like admin dashboard and user permissions, auto-discovering the test scenarios by crawling the app catches edge cases you wouldn't manually enumerate.

[m13v]

for the auto-discovery and visual regression parts, we built an open source framework that crawls apps and generates Playwright tests with built-in visual baselines. the multi-browser orchestration that manages parallel Chromium/Firefox/WebKit runs: https://github.com/m13v/browser-lock/blob/main/playwright-lock.sh