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

<hr>
<h2>O Que São Testes E2E?</h2>

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

<h3>Quando Usar</h3>

<ul><li>✅ Fluxos críticos (login, checkout)</li><ol><li>✅ Antes de releases</li>
<li>✅ Smoke tests</li>
<li>❌ Não para tudo (são lentos)</li>
</ol>
<hr>
<h2>Playwright</h2>

<h3>Setup</h3>

<pre><code>npm install -D @playwright/test
npx playwright install
</code></pre>

<h3>Exemplo</h3>

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

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

<p>test('complete purchase flow', async ({ page }) =&gt; {<br>    // 1. Login<br>    await page.click('text=Login');<br>    await page.fill('[data-testid=email]', 'user@test.com');<br>    await page.fill('[data-testid=password]', 'password123');<br>    await page.click('text=Entrar');</p>

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

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

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

<p>// 5. Verify<br>    await expect(page.locator('.success-message')).toBeVisible();<br>    await expect(page.locator('.order-id')).toBeVisible();<br>  });<br>});<br></code></pre></p>

<hr>
<h2>Cypress</h2>

<h3>Setup</h3>

<pre><code>npm install -D cypress
npx cypress open
</code></pre>

<h3>Exemplo</h3>

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

<p>it('completes purchase successfully', () =&gt; {<br>    // Login<br>    cy.get('[data-cy=login-button]').click();<br>    cy.get('[data-cy=email-input]').type('user@test.com');<br>    cy.get('[data-cy=password-input]').type('password123');<br>    cy.get('[data-cy=submit-button]').click();</p>

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

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

<p>// Verify<br>    cy.contains('Pedido realizado com sucesso').should('be.visible');<br>  });<br>});<br></code></pre></p>

<hr>
<h2>Page Objects</h2>

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

<p>async goto() {<br>    await this.page.goto('/login');<br>  }</p>

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

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

<p>await loginPage.goto();<br>  await loginPage.login('user@test.com', 'password123');</p>

<p>await checkoutPage.addProduct('Camiseta');<br>  await checkoutPage.completeCheckout('Rua Teste');</p>

<p>await expect(checkoutPage.successMessage).toBeVisible();<br>});<br></code></pre></p>

<hr>
<h2>CI Integration</h2>

<pre><code># GitHub Actions<ol><li>name: E2E Tests</li></ol></ul>
  run: npx playwright test
  env:
    CYPRESS_baseUrl: https://staging.example.com
</code></pre>

<hr>
<h2>Conclusão</h2>

<p>Testes E2E simulam o usuário real. As chaves são:<br><ol><li><strong>Focar no crítico</strong> - Não tudo, só fluxos importantes</li><br><li><strong>Page Objects</strong> - DRY, fácil manutenção</li><br><li><strong>Dados de teste</strong> - Setup e teardown</li><br><li><strong>CI</strong> - Executar em pipeline</li><br><li><strong>Debugging</strong> - Screenshots, videos</li></ol></p>