Skip to main content

🏗️ Arquitetura Modular - Screenshots + Vídeos

Data: 27 de fevereiro de 2026
Status: ✅ Modularizado e Documentado

📋 Visão Geral​

Sistema de testes modular com geração de screenshots e vídeos, completamente separado e integrado com backend.

┌─────────────────────────────────────────────────────────┐
│                     FRONTEND (Vite)                      │
│                                                           │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Tests (Playwright)                              │   │
│  │  ├─ login.spec.ts           (5s, rápido)        │   │
│  │  └─ login.videos.spec.ts    (12s, lento)        │   │
│  └──────────────────────────────────────────────────┘   │
│                         ↓                                 │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Artifacts (Screenshots + Vídeos)                │   │
│  │  └─ test-results/                                │   │
│  │     ├─ login-XX.png (7 screenshots)             │   │
│  │     └─ videos/                                   │   │
│  │        ├─ login-sucesso.mp4 (135KB)             │   │
│  │        └─ login-erro.mp4 (62KB)                 │   │
│  └──────────────────────────────────────────────────┘   │
│                                                           │
└─────────────────────────────────────────────────────────┘
           ↓ HTTP (serve files)
┌─────────────────────────────────────────────────────────┐
│                   BACKEND (FastAPI)                      │
│                                                           │
│  ┌──────────────────────────────────────────────────┐   │
│  │  API: /api/testing/artifacts/videos              │   │
│  │  └─ Serve screenshots + videos                   │   │
│  └──────────────────────────────────────────────────┘   │
│                                                           │
│  ┌──────────────────────────────────────────────────┐   │
│  │  Database: TestRun Model                         │   │
│  │  └─ Store test execution history                 │   │
│  └──────────────────────────────────────────────────┘   │
│                                                           │
└─────────────────────────────────────────────────────────┘
           ↓ HTTP (GET /artifacts)
┌─────────────────────────────────────────────────────────┐
│                UI (React/Vite)                           │
│                                                           │
│  ┌──────────────────────────────────────────────────┐   │
│  │  TestingVideoTab.tsx                             │   │
│  │  └─ Display categorized videos + screenshots     │   │
│  │     • "Autenticação com Sucesso"                 │   │
│  │     • "Autenticação com Erro"                    │   │
│  └──────────────────────────────────────────────────┘   │
│                                                           │
└─────────────────────────────────────────────────────────┘

🎬 Módulo: Testes de Login​

Ficheiros​

1. login.spec.ts - Screenshots Rápidos

📍 Location: frontend/tests/e2e/00-auth-login/login.spec.ts
🎯 Purpose: Testes rápidos para CI/CD
⏱️ Duration: ~5 segundos (3 testes)
📊 Output: 6 screenshots (login-02 até 07)

2. login.videos.spec.ts - Typing Lento para Vídeos

📍 Location: frontend/tests/e2e/00-auth-login/login.videos.spec.ts
🎯 Purpose: Captura de testes com delays (lento)
⏱️ Duration: ~12 segundos (2 testes)
📊 Output: 6 screenshots idênticos ao anterior (pré para vídeos)

3. generate-video.js - Gerador FFmpeg

📍 Location: frontend/generate-video.js
🎯 Purpose: Cria vídeos MP4 a partir dos screenshots
⏱️ Duration: ~3 segundos (2 vídeos)
📊 Output: 
  - login-sucesso.mp4 (135KB, 3 frames @ 4s/frame)
  - login-erro.mp4 (62KB, 3 frames @ 4s/frame)

🔄 Fluxo de Execução​

Cenário 1: Testes Normais (Dia a dia)​

$ npm run test:e2e
  ↓
  Executa: login.spec.ts (+ outros testes)
  ↓
  Gera: 6 screenshots em test-results/
  ↓
  Duração: ~5 segundos
  ↓
  ✅ Pronto para CI/CD

Cenário 2: Geração de Vídeos (Documentação)​

$ npx playwright test tests/e2e/00-auth-login/login.videos.spec.ts
  ↓
  Executa: login.videos.spec.ts
  ↓
  Gera: 6 screenshots com delays (sobrescreve anteriores)
  ↓
  Duração: ~12 segundos

$ node generate-video.js
  ↓
  Lê: screenshots de test-results/
  ↓
  Cria: 2 vídeos FFmpeg em test-results/videos/
  ↓
  Duração: ~3 segundos
  ↓
  ✅ Vídeos prontos para API

📦 Backend Integration​

API Endpoint​

GET /api/testing/artifacts/videos

Response:

{
  "run_id": "videos",
  "artifacts": [
    {
      "name": "login-sucesso.mp4",
      "type": "video",
      "path": "/api/testing/artifacts/videos/file/login-sucesso.mp4",
      "size": 138240,
      "created_at": 1772191873.5
    },
    {
      "name": "login-erro.mp4",
      "type": "video",
      "path": "/api/testing/artifacts/videos/file/login-erro.mp4",
      "size": 62000,
      "created_at": 1772191859.5
    },
    {
      "name": "login-02-initial.png",
      "type": "screenshot",
      "path": "/api/testing/artifacts/videos/file/login-02-initial.png",
      "size": 92321,
      "created_at": 1772191838.1
    }
    // ... mais screenshots
  ]
}

Backend Files​

backend/src/modules/testing/
├── routes.py              # API endpoints
├── artifacts.py           # Artifact management
├── models/
│   └── test_run.py        # TestRun database model
└── database.py            # SQLAlchemy integration

🎨 UI Integration​

Component: TestingVideoTab.tsx​

Localização: frontend/src/components/testing/TestingVideoTab.tsx

Funcionalidades:

  • Agrupa vídeos e screenshots por cenário
  • Reconhece nomes estruturados: login-{sucesso|erro}.mp4
  • Categoriza automaticamente:
    • "Autenticação com Sucesso"
    • "Autenticação com Erro"

Padrão:

const getScenarioMarker = (artifact: Artifact) => {
  const filename = getFilename(artifact).toLowerCase()
  // Reconhece padrões estruturados
  if (filename.includes('-sucesso')) return 'Sucesso'
  if (filename.includes('-erro')) return 'Erro'
  return null
}

📁 Estrutura Ficheiros​

frontend/
├── tests/e2e/
│   ├── 00-auth-login/
│   │   ├── login.spec.ts              ⚡ Rápido
│   │   ├── login.videos.spec.ts       🎬 Para vídeos
│   │   └── README.md                  📖 Docs internas
│   ├── 01-admin-login-locations/      (Original)
│   ├── 02-locations-list/
│   ├── ... (outros módulos)
│   ├── playwright.config.ts           ✅ Config
│   └── README.md                      📖 Docs gerais
│
├── generate-video.js                   ✅ Gerador FFmpeg
├── src/
│   └── components/testing/
│       └── TestingVideoTab.tsx         ✅ UI
│
└── test-results/                       (Gerado)
    ├── login-XX.png                   📸 Screenshots
    ├── videos/
    │   ├── login-sucesso.mp4          🎬 Vídeos
    │   └── login-erro.mp4
    └── ... (outros artefatos)

backend/
├── src/modules/testing/
│   ├── routes.py                      ✅ API
│   ├── artifacts.py                   ✅ Gerenciamento
│   ├── models/
│   │   └── test_run.py                ✅ Model
│   └── database.py                    ✅ BD
│
└── ... (resto do backend)

🔐 Princípios de Modularização​

1. Separação de Responsabilidades​

  • Testes rápidos → login.spec.ts
  • Testes lentos → login.videos.spec.ts
  • Geração de vídeos → generate-video.js

2. Reutilização​

  • Mesmos screenshots para ambos (imagens + vídeos)
  • Same fixtures e helpers
  • Mesmo padrão de nomeação

3. Segurança​

  • Mudanças em vídeos não afetam screenshots
  • Cada ficheiro tem responsabilidade clara
  • Rollback seguro

4. Performance​

  • Testes rápidos: ~5s (dia a dia)
  • Testes vídeo: ~12s (quando necessário)
  • Geração vídeos: ~3s (em background)

✅ Checklist: Tudo Sincronizado​

  • ✅ Frontend tests modularizados (login.spec.ts + login.videos.spec.ts)
  • ✅ Backend API expõe screenshots + vídeos
  • ✅ UI component reconhece padrões de nomes
  • ✅ Database models persistem test runs
  • ✅ Generate-video.js funciona em standalone
  • ✅ Documentação atualizada (README + este arquivo)
  • ✅ Processo bem definido (testes rápidos + vídeos)

🚀 Próximos Passos​

  1. Expandir para outros cenários:

    • Criar locations-videos.spec.ts para CRUD
    • Gerar vídeos de criação/edição/remoção locais

  2. Dashboard de Qualidade:

    • Exibir trends de testes
    • Comparar vídeos antes/depois

  3. Automação:

    • CI/CD: Rodar login.spec.ts
    • Nightly: Rodar login.videos.spec.ts + generate-video.js
    • Publicar vídeos em storage externo
Last updated on by CI Governance Bot