Proyecto Final: E-commerce Testing

Aplicarás todo lo aprendido creando una suite completa de tests para un e-commerce.

Estructura del Proyecto

tests/
├── fixtures/
│   └── index.ts
├── pages/
│   ├── home.page.ts
│   ├── product.page.ts
│   ├── cart.page.ts
│   └── checkout.page.ts
├── e2e/
│   ├── navigation.spec.ts
│   ├── product.spec.ts
│   ├── cart.spec.ts
│   └── checkout.spec.ts
└── api/
    └── products.spec.ts

Page Objects

// pages/cart.page.ts
import { Page, Locator } from '@playwright/test';

export class CartPage {
  readonly page: Page;
  readonly items: Locator;
  readonly total: Locator;
  readonly checkoutButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.items = page.locator('.cart-item');
    this.total = page.locator('.cart-total');
    this.checkoutButton = page.getByRole('button', { name: 'Checkout' });
  }

  async getItemCount() {
    return this.items.count();
  }

  async getTotal() {
    const text = await this.total.textContent();
    return parseFloat(text?.replace('$', '') || '0');
  }

  async proceedToCheckout() {
    await this.checkoutButton.click();
  }
}

Tests de Flujo Completo

// e2e/checkout.spec.ts
import { test, expect } from '../fixtures';

test.describe('Checkout Flow', () => {
  test('compra exitosa', async ({ page, cartPage }) => {
    // Agregar producto
    await page.goto('/products/1');
    await page.getByRole('button', { name: 'Add to Cart' }).click();

    // Ir al carrito
    await page.goto('/cart');
    expect(await cartPage.getItemCount()).toBe(1);

    // Checkout
    await cartPage.proceedToCheckout();
    await page.fill('#email', '[email protected]');
    await page.fill('#card', '4242424242424242');
    await page.click('button[type="submit"]');

    // Confirmación
    await expect(page).toHaveURL(/\/confirmation/);
    await expect(page.locator('h1')).toContainText('Gracias');
  });
});

Ejercicio Final

Objetivo

Crear suite completa para Sauce Demo.

Requisitos

1. Page Objects para: Login, Inventory, Cart, Checkout
2. Tests:
   • Login válido e inválido
   • Agregar/quitar productos del carrito
   • Ordenar productos
   • Flujo completo de compra
3. Fixtures para usuario autenticado
4. Visual tests para páginas principales
5. CI/CD con GitHub Actions

Criterios de Evaluación

• 4+ Page Objects implementados
• 10+ tests funcionales
• Fixtures reutilizables
• Al menos 2 visual tests
• Pipeline CI configurado

---

Siguientes Pasos

Recursos Adicionales

• Documentación Oficial
• GitHub Playwright
• Playwright Discord

Temas Avanzados

1. Component Testing con Playwright
2. Mobile Testing (emulación)
3. Accessibility Testing
4. Performance Testing con Lighthouse

Proyectos Sugeridos

• Blog Testing: Suite para un CMS
• Dashboard: Tests para aplicación de analytics
• API Gateway: Tests de integración para microservicios

---

Navegación

• ← Anterior: CI/CD
• Índice del Tutorial