E2E

Este diretório contém os testes End-to-End (E2E) da aplicação Gaio Console usando Playwright.

📚 Documentação completa: Veja Arquitetura de Testes para arquitetura geral e guias de testes.

Estrutura

e2e/
├── pages/              # Page Objects (seguindo o Page Object Model)
│   ├── base.page.ts    # Classe base com funcionalidades comuns
│   ├── register.page.ts
│   ├── verify-email-*.page.ts
│   ├── forgot-password-*.page.ts
│   ├── reset-password.page.ts
│   ├── accept-invite.page.ts
│   ├── template-preview.page.ts
│   ├── template-install-login.page.ts
│   ├── template-install-contact.page.ts
│   ├── template-install-wizard-profile.page.ts
│   ├── template-install-wizard-discovery.page.ts
│   ├── template-install-checkout.page.ts
│   └── template-install-activation.page.ts
├── specs/              # Arquivos de teste
│   ├── signup-verify-email.spec.ts
│   ├── forgot-password.spec.ts
│   ├── accept-invite.spec.ts
│   ├── template-install-free.spec.ts  # Testes de instalação de template gratuito
│   └── template-install-paid.spec.ts  # Testes de instalação de template pago
└── README.md

Como Executar

Pré-requisitos

Instale os browsers do Playwright (apenas necessário na primeira vez):

npx playwright install

Executar Testes

# Executar todos os testes E2E
npm run test:e2e

# Executar com interface visual
npm run test:e2e:ui

# Executar em modo debug
npm run test:e2e:debug

# Ver relatório após execução
npm run test:e2e:report

# Code generator (para criar novos testes)
npm run test:e2e:codegen

Executar do Diretório Raiz

# Do diretório raiz do monorepo
npm run test:e2e            # Roda testes em todos os workspaces
npm run test:e2e:ui         # Roda com UI em todos os workspaces

Page Object Model

Os testes seguem o padrão Page Object Model (POM), onde cada página da aplicação tem uma classe correspondente que encapsula:

• Seletores de elementos
• Ações (click, fill, etc.)
• Verificações específicas da página

API Mocks Padronizados

Todos os testes E2E devem usar os helpers de API mocks para garantir consistência. Veja helpers/api-mocks.ts.

Exemplo Básico

import { setupTemplateFlowMocks } from '../helpers';

test.beforeEach(async ({ page }) => {
  // Setup completo de mocks para fluxo de template
  await setupTemplateFlowMocks(page, {
    templateId: 'template-123',
    templateSlug: 'test-template',
    planId: null // FREE template
  });
});

Exemplo Avançado (Customizado)

import { setupCommonApiMocks, setupAuthMocks, setupTemplateMocks } from '../helpers';

test.beforeEach(async ({ page }) => {
  // Setup modular de mocks
  await setupCommonApiMocks(page);
  await setupAuthMocks(page, {
    invalidCredentials: ['invalid@example.com'],
    existingEmails: ['existing@example.com']
  });
  await setupTemplateMocks(page, {
    templateId: 'my-template',
    planId: 'plan-123',
    planPrice: 9900
  });
});

Helpers Disponíveis

Helper	Descrição
setupCommonApiMocks()	Mocks básicos (user, connections, account)
setupAuthMocks()	Login, signup, email verification
setupProfileMocks()	Update de perfil e contato
setupTemplateMocks()	Templates e instalação
setupPaymentMocks()	Stripe, subscriptions
setupTrackingMocks()	Analytics e tracking
setupTemplateFlowMocks()	Tudo acima (fluxo completo)

Veja documentação completa em helpers/api-mocks.ts.

Exemplo

import { ForgotPasswordRequestPage } from '../pages/forgot-password-request.page';

test('should submit email', async ({ page }) => {
  const requestPage = new ForgotPasswordRequestPage(page);

  await requestPage.goto();
  await requestPage.submitEmail('user@example.com');

  // Página navega automaticamente para /verify
});

Browsers Suportados

Os testes rodam em múltiplos browsers e viewports:

• Desktop: Chromium, Firefox, WebKit (Safari)
• Mobile: Chrome (Pixel 5), Safari (iPhone 12)

Para rodar apenas em um browser específico:

npx playwright test --project=chromium
npx playwright test --project=firefox
npx playwright test --project=webkit

Configuração

A configuração está em playwright.config.ts.

Principais Configurações

• baseURL: http://localhost:5173
• Retry: 2 vezes apenas no CI
• Screenshot: Capturado apenas em falhas
• Trace: Coletado apenas no primeiro retry
• Video: Mantido apenas em falhas
• Dev Server: Inicia automaticamente com npm run serve

Escrevendo Novos Testes

1. Criar Page Object (se necessário):

   e2e/pages/my-page.page.ts

   import { BasePage } from './base.page';
   
   export class MyPage extends BasePage {
     readonly myButton: Locator;
   
     constructor(page: Page) {
       super(page);
       this.myButton = page.getByRole('button', { name: /my button/i });
     }
   
     async clickMyButton() {
       await this.myButton.click();
     }
   }

2. Criar Teste:

   e2e/specs/my-feature.spec.ts

   import { test, expect } from '@playwright/test';
   import { MyPage } from '../pages/my-page.page';
   
   test('should do something', async ({ page }) => {
     const myPage = new MyPage(page);
   
     await myPage.goto('/my-path');
     await myPage.clickMyButton();
   
     await expect(myPage.myButton).toBeDisabled();
   });

Dicas

• Use test.only() para rodar apenas um teste específico
• Use test.skip() para pular um teste temporariamente
• Use page.pause() para debug interativo
• Use code generator para gerar seletores: npm run test:e2e:codegen

Testes de Template Installation

Os testes de instalação de templates cobrem o fluxo completo de instalação de templates gratuitos e pagos:

Fluxo de Template Gratuito (template-install-free.spec.ts)

Testa o fluxo sem checkout:

1. Preview do template
2. Login/Autenticação
3. Informações de contato
4. Wizard de perfil
5. Wizard de discovery + consentimento
6. Ativação automática (sem pagamento)
7. Sucesso

Eventos de tracking validados:

• template_viewed
• template_install_clicked
• auth_started, auth_completed
• profile_viewed, profile_completed
• checkout_submitted, checkout_completed (sem checkout_viewed)
• success_viewed
• funnel_abandoned (quando aplicável)

Fluxo de Template Pago (template-install-paid.spec.ts)

Testa o fluxo com checkout: 1-5. Mesmos passos do fluxo gratuito 6. Checkout (formulário de pagamento Stripe) 7. Ativação após pagamento 8. Sucesso

Eventos de tracking adicionais:

• checkout_viewed (apenas para templates pagos)
• checkout_error (em caso de falha no pagamento)
• Todas as propriedades incluem is_paid: true, plan_id, coupon_id

Executar apenas testes de template

# Apenas templates gratuitos
npx playwright test template-install-free

# Apenas templates pagos
npx playwright test template-install-paid

# Todos os testes de template
npx playwright test template-install

Documentação

• Playwright Docs
• Page Object Model
• Best Practices