# Testes E2E: Guiando pelo Usuário

**Meta Description:** Aprenda testes end-to-end: Playwright, Cypress, Selenium, como simular jornadas completas do usuário e garantir que tudo funciona.

---

## 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)
- ✅ Antes de releases
- ✅ Smoke tests
- ❌ Não para tudo (são lentos)

---

## Playwright

### Setup

```bash
npm install -D @playwright/test
npx playwright install
```

### Exemplo

```typescript
// 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]', 'user@test.com');
    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

```bash
npm install -D cypress
npx cypress open
```

### Exemplo

```javascript
// 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('user@test.com');
    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

```typescript
// 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('user@test.com', 'password123');
  
  await checkoutPage.addProduct('Camiseta');
  await checkoutPage.completeCheckout('Rua Teste');
  
  await expect(checkoutPage.successMessage).toBeVisible();
});
```

---

## CI Integration

```yaml
# GitHub Actions
- name: E2E Tests
  run: npx playwright test
  env:
    CYPRESS_baseUrl: https://staging.example.com
```

---

## 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