🎯 Quick Reference - Estrutura Modular (27 fev 2026)

📊 Estado Atual

✅ Screenshots (rápido)     - login.spec.ts
✅ Vídeos (lento)          - login.videos.spec.ts
✅ Gerador de vídeos      - generate-video.js
✅ API de artifacts       - Backend expõe /api/testing/artifacts/videos
✅ UI categorizada        - TestingVideoTab.tsx reconhece padrões
✅ Backend persistence    - Database models + artefatos

---

🚀 Workflows Práticos

FLuxo 1: Desenvolvimento (Rápido)

# Terminal 1: Backend
cd backend && python -m main

# Terminal 2: Frontend
cd frontend && npm run dev

# Terminal 3: Testes rápidos
cd frontend && npx playwright test tests/e2e/00-auth-login/login.spec.ts
# ⏱️ ~5 segundos
# 📊 Saída: 6 screenshots em test-results/

Fluxo 2: Geração de Vídeos (Quando Necessário)

# 1. Rodar testes com typing lento
npx playwright test tests/e2e/00-auth-login/login.videos.spec.ts
# ⏱️ ~12 segundos
# 📊 Saída: 6 screenshots (com delays)

# 2. Gerar vídeos FFmpeg
node generate-video.js
# ⏱️ ~3 segundos
# 📊 Saída: login-sucesso.mp4 + login-erro.mp4

Fluxo 3: Verificar Artifacts

# Via API
curl http://localhost:8000/api/testing/artifacts/videos | python3 -m json.tool

# Via UI
# Abrir: http://localhost:3000
# Navegar para: Testing → Vídeos
# Ver: 2 categorias (Sucesso + Erro)

---

📁 Ficheiros Principais

Tipo	Localização	Purpose
Tests Rápido	frontend/tests/e2e/00-auth-login/login.spec.ts	Screenshots (CI/CD)
Tests Vídeo	frontend/tests/e2e/00-auth-login/login.videos.spec.ts	Para gravação
Gerador	frontend/generate-video.js	Cria MP4
Backend API	backend/src/modules/testing/routes.py	Serve artefatos
UI	frontend/src/components/testing/TestingVideoTab.tsx	Exibe vídeos
Docs	TESTING-ARCHITECTURE.md	Visão completa

---

🔑 Conceitos-Chave

Modularização: Screenshots + Vídeos

login.spec.ts              login.videos.spec.ts
    ↓                             ↓
  .fill()                      .type() com delays
  (rápido)                      (lento)
    ↓                             ↓
  ~5s                           ~12s
    ↓                             ↓
  test-results/             test-results/
  (screenshots)             (screenshots com delays)
                                  ↓
                            generate-video.js
                                  ↓
                        test-results/videos/
                        (MP4 files)

Benefício: Risco Zero

• Mudanças em vídeos NÃO afetam screenshots
• Cada ficheiro tem responsabilidade clara
• Rollback seguro se algo quebrar

---

🎬 UI de Vídeos (v2.5 - 27 fev 2026)

Modo Grid 2 Colunas (Default)

Visual:

[Toggle: Grid 2 Colunas | Minimalista]

┌────────────────────┬────────────────────┐
│ ✅ Sucesso         │ ❌ Erro            │
│ [Vídeo Limpo]      │ [Vídeo Limpo]      │
│ [⏸ Pausar]        │                    │  ← Badge quando selecionado
│ 135 KB | 11:50     │ 62 KB | 11:50      │
└────────────────────┴────────────────────┘
              ↓
    [▶ Player Grande com Overlay]

Interação:

1. Clicar no card → Seleciona + Autoplay no card + Atualiza player grande
2. Badge dinâmico no card selecionado:
   • Em play: "⏸ Pausar"
   • Pausado: "▶ Play"
3. Player grande começa pausado com ícone play no centro
4. Trocar de card → Anterior pausa automaticamente

Características:

• ✅ Cards SEM overlay (visual limpo)
• ✅ Badge apenas quando selecionado
• ✅ Autoplay automático nos cards
• ✅ Loop infinito nos cards
• ✅ Player grande manual (clicar overlay)
• ✅ Sincronizado com controles nativos

Quick Tips

# Ver vídeos no browser
http://localhost:3000/admin/testing → Tab "Vídeo"

# Cards:
- Clicar qualquer parte → Seleciona + Play automático
- Badge canto direito → Toggle play/pause
- Loop infinito

# Player grande:
- Overlay com ícone play no centro
- Clicar overlay → Dá play
- Durante play → Overlay oculto
- Pausar → Overlay reaparece

---

✅ Checklist: Tudo Sincronizado

• ✅ Frontend tests modularizados
• ✅ Backend API funciona
• ✅ UI reconhece padrões
• ✅ Database persiste
• ✅ Documentação completa
• ✅ Workflows bem definidos

---

📖 Documentação Completa

Para detalhes completos, veja:

1. Arquitetura geral: TESTING-ARCHITECTURE.md
2. Frontend/Tests: frontend/tests/e2e/README.md
3. Backend/API: backend/TESTING-BACKEND.md
4. Login tests: frontend/tests/e2e/00-auth-login/README.md

---

🎬 Exemplo: Login com Sucesso

Teste rápido: ⚡ ~2.9s
├── Preenche email (fast)
├── Preenche password (fast)
├── Clica login
└── Verifica dashboard

Teste vídeo: 🎥 ~10.7s
├── Preenche email (slow, char por char)
├── Preenche password (slow, char por char)
├── Clica login (com pausa)
└── Verifica dashboard (com pausa)

Vídeo final: 🎞️ login-sucesso.mp4
├── Frame 1: Formulário vazio (4s)
├── Frame 2: Credenciais preenchidas (4s)
├── Frame 3: Dashboard (4s)
├── Frame 3 again: Dashboard (2s extra)
└── Total: ~14 segundos

---

🔗 Links Rápidos

• Testes Frontend
• Backend Testing
• Arquitetura Completa
• Login Tests Detail

---

Last Updated: 27 de fevereiro de 2026
Status: ✅ Modularizado e Documentado