Automated Frontend Testing

[jbouder]

Summary

Establish an automated frontend testing setup using Playwright for end-to-end testing as the primary strategy, with Vitest reserved for minimal unit-level
coverage. Playwright will also run automated accessibility checks via @axe-core/playwright. This covers test tooling, configuration, npm scripts, and CI
integration for the frontend.

Motivation

• E2E tests exercise the app as users actually experience it, catching integration issues unit tests miss
• Prefer high-confidence e2e coverage over brittle, low-value unit tests — keep Vitest for pure logic/utilities only
• Playwright runs across Chromium, Firefox, and WebKit from a single test suite
• Automated accessibility checks (WCAG via axe-core) catch a11y regressions as part of the normal test run, not as a manual afterthought
• A consistent, scripted setup lets contributors and CI run the full suite with a single command

Acceptance Criteria

• vitest installed and configured (vitest.config.ts) for minimal unit testing of pure functions/utilities
• @playwright/test installed and configured (playwright.config.ts) with Chromium, Firefox, and WebKit projects
• npx playwright install documented in the README/contributing guide for first-time setup
• At least one representative e2e flow covered by a Playwright spec (e.g. critical user journey)
• @axe-core/playwright integrated so e2e tests assert no critical/serious accessibility violations on key pages
• package.json scripts added: test (Vitest), test:e2e (Playwright), and test:a11y (or accessibility assertions folded into test:e2e)
• Playwright HTML report generated and accessible after a run
• CI workflow runs Vitest and Playwright (including a11y checks); the build fails on test or accessibility-violation failures

Out of Scope

• Comprehensive unit-test coverage of components — intentionally minimal; e2e is the preferred layer
• Visual regression / screenshot-diff testing (could be a follow-up issue)
• Backend or API testing (handled by the backend test suite)
• Manual accessibility audits and screen-reader testing (automated axe-core checks do not replace these)

References

• See nebari landing for reference implementation: https://github.com/nebari-dev/nebari-landing/tree/main/frontend