Testes E2E: Guiando pelo Usuário

O Que São Testes E2E?

Testes E2E verificam que o sistema completo funciona, simulando jornadas reais do usuário do início ao fim.

Quando Usar

• ✅ Fluxos críticos (login, checkout)
1. ✅ Antes de releases
2. ✅ Smoke tests
3. ❌ Não para tudo (são lentos)

---

Playwright

Setup

npm install -D @playwright/test
npx playwright install

Exemplo

// tests/e2e/checkout.spec.ts
import { test, expect } from '@playwright/test';

test.describe('Checkout Flow', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/');
  });

test('complete purchase flow', async ({ page }) => {
    // 1. Login
    await page.click('text=Login');
    await page.fill('[data-testid=email]', '[email protected]');
    await page.fill('[data-testid=password]', 'password123');
    await page.click('text=Entrar');

// 2. Browse products
    await page.click('text=Produtos');
    await page.click('text=Camiseta Azul');

// 3. Add to cart
    await page.click('text=Adicionar ao Carrinho');
    await expect(page.locator('.cart-badge')).toHaveText('1');

// 4. Checkout
    await page.click('text=Finalizar Compra');
    await page.fill('[data-testid=address]', 'Rua Teste, 123');
    await page.click('text=Confirmar Pedido');

// 5. Verify
    await expect(page.locator('.success-message')).toBeVisible();
    await expect(page.locator('.order-id')).toBeVisible();
  });
});

---

Cypress

Setup

npm install -D cypress
npx cypress open

Exemplo

// cypress/integration/checkout.spec.js
describe('Checkout Flow', () => {
  beforeEach(() => {
    cy.visit('/');
  });

it('completes purchase successfully', () => {
    // Login
    cy.get('[data-cy=login-button]').click();
    cy.get('[data-cy=email-input]').type('[email protected]');
    cy.get('[data-cy=password-input]').type('password123');
    cy.get('[data-cy=submit-button]').click();

// Add product
    cy.contains('Camiseta').click();
    cy.get('[data-cy=add-to-cart]').click();

// Checkout
    cy.get('[data-cy=cart-icon]').click();
    cy.get('[data-cy=checkout-button]').click();
    cy.get('[data-cy=address-input]').type('Rua Teste, 123');
    cy.get('[data-cy=confirm-button]').click();

// Verify
    cy.contains('Pedido realizado com sucesso').should('be.visible');
  });
});

---

Page Objects

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

async goto() {
    await this.page.goto('/login');
  }

async login(email: string, password: string) {
    await this.page.fill('[data-testid=email]', email);
    await this.page.fill('[data-testid=password]', password);
    await this.page.click('text=Entrar');
  }
}

// tests/e2e/checkout.spec.ts
test('checkout', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const checkoutPage = new CheckoutPage(page);

await loginPage.goto();
  await loginPage.login('[email protected]', 'password123');

await checkoutPage.addProduct('Camiseta');
  await checkoutPage.completeCheckout('Rua Teste');

await expect(checkoutPage.successMessage).toBeVisible();
});

---

CI Integration

# GitHub Actions
name: E2E Tests

Conclusão

Testes E2E simulam o usuário real. As chaves são:

1. Focar no crítico – Não tudo, só fluxos importantes
2. Page Objects – DRY, fácil manutenção
3. Dados de teste – Setup e teardown
4. CI – Executar em pipeline
5. Debugging – Screenshots, videos