Adicionar testes e2e para cobrir fluxos críticos no frontend

[lumamontes]

Contexto

O frontend do BeatWave não possui nenhum teste e2e. Isso dificulta a confiança em deploys e facilita regressões em fluxos importantes.

Objetivo

Implementar testes end-to-end com Playwright (ou ferramenta similar) para cobrir os fluxos mais críticos da aplicação.

Fluxos prioritários

• Autenticação — login com email/senha, registro, logout
• Busca de álbuns — buscar um álbum e navegar até a página dele
• Review — criar uma review com rating em um álbum (requer autenticação)
• Perfil — visualizar perfil próprio e de outro usuário
• Seguir/Deixar de seguir — follow/unfollow de outro usuário
• Reordenar tracks — drag-and-drop de faixas na página do álbum

Critérios de aceitação

• Ferramenta de teste e2e configurada no projeto (apps/web)
• Pelo menos 4 dos fluxos acima cobertos
• Testes rodam via script no package.json
• CI-ready (pode rodar em headless mode)

Dicas técnicas

• Frontend usa Next.js 16 com App Router
• Autenticação via Better Auth (cookies)
• Componentes usam Radix UI / Shadcn
• Drag-and-drop usa @dnd-kit

[m13v]

for the auth flow tests with Better Auth cookies, the cleanest approach is to create a test user in a beforeAll hook and store the auth state with page.context().storageState(), then reuse that state across tests that need authentication. avoids re-logging in for every test and cuts execution time significantly. for the drag-and-drop track reordering with @dnd-kit, Playwright's native drag API (locator.dragTo) doesn't always trigger the library's event handlers correctly. we found dispatching pointer events manually through page.evaluate works more reliably: pointerdown on the source, pointermove to the target coordinates, then pointerup. for Radix UI components, they add data attributes that make great test selectors (data-state='open', data-radix-popper-content-wrapper etc).

[m13v]

btw we open sourced a test framework that generates Playwright tests with self-healing selectors, handles the element targeting across different component libraries (including Radix-based ones). the multi-strategy selector fallback: https://github.com/mediar-ai/terminator/blob/main/crates/terminator/src/element.rs