← Volver al listado de tecnologías

Capítulo 12: Proyecto Final

Por: Siempre Listo
playwrightproyectoe-commercetesting

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

Siguientes Pasos

Recursos Adicionales

Temas Avanzados

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

Proyectos Sugeridos

← Volver al listado de tecnologías