SauceDemo Automation Framework

Framework de automatización E2E para SauceDemo utilizando Playwright + Cucumber + Node.js con patrón Page Object Model.

Requisitos Previos

• Node.js v18 o superior
• npm v9 o superior

Instalación

# Clonar el repositorio
git clone <url-del-repositorio>
cd saucedemo-automation

# Instalar dependencias
npm install

# Instalar navegadores de Playwright
npx playwright install chromium

Ejecución de Pruebas

# Ejecutar pruebas en modo headless (por defecto)
npm test

# Ejecutar pruebas con navegador visible
npm run test:ui

# Generar reporte HTML después de ejecutar pruebas
npm run report

Estructura del Proyecto

saucedemo-automation/
├── features/                    # Archivos Gherkin
│   ├── login.feature           # Escenarios de prueba
│   └── step_definitions/       # Implementación de steps
│       ├── login.steps.js
│       ├── products.steps.js
│       └── cart.steps.js
├── pages/                       # Page Object Model
│   ├── BasePage.js             # Clase base con métodos comunes
│   ├── LoginPage.js            # Page Object de login
│   ├── ProductsPage.js         # Page Object de productos
│   └── CartPage.js             # Page Object de carrito
├── support/                     # Configuración de Cucumber
│   ├── hooks.js                # Before/After hooks
│   └── world.js                # Cucumber World (contexto compartido)
├── config/
│   └── test.config.js          # Configuración centralizada
├── scripts/
│   └── generate-report.js      # Generador de reportes HTML
├── reports/                     # Reportes generados (gitignore)
├── cucumber.js                  # Configuración de Cucumber
├── playwright.config.js         # Configuración de Playwright
└── package.json

Decisiones Técnicas

1. Page Object Model (POM)

Se implementó el patrón POM para:

• Separación de responsabilidades: Los selectores y acciones están encapsulados en clases.
• Reutilización: Los Page Objects se pueden usar en múltiples escenarios.
• Mantenibilidad: Si cambia un selector, solo se modifica en un lugar.

2. Selectores

Se priorizaron selectores data-test que SauceDemo proporciona:

'[data-test="username"]'       // Más estable que #user-name
'[data-test="login-button"]'   // Más descriptivo que .btn_action

3. Auto-waiting de Playwright

Se aprovecha el auto-waiting nativo de Playwright en lugar de waitForTimeout:

// Ejemplo: Playwright espera automáticamente
await page.locator('[data-test="login-button"]').click();

### 4. Cucumber World
Se utiliza un World personalizado para:
- Compartir el contexto (page, browser) entre steps
- Inicializar Page Objects una sola vez por escenario
- Centralizar la lógica de inicialización y limpieza

### 5. Hooks
- **Before**: Inicializa browser y página antes de cada escenario
- **After**: Captura screenshot en caso de fallo, cierra el browser
- **BeforeAll/AfterAll**: Prepara y limpia el entorno de reportes

## Escenarios Automatizados

### Flujo Principal (E2E)
1. Navegar a SauceDemo
2. Login con usuario estándar (`standard_user` / `secret_sauce`)
3. Validar que aparece la lista de productos
4. Agregar un producto (Backpack) al carrito
5. Validar que el carrito muestra 1 ítem
6. Cerrar sesión
7. Validar que aparece la página de login

### Login con Credenciales Inválidas
1. Navegar a SauceDemo
2. Intentar login con credenciales inválidas
3. Validar mensaje de error

## Reportes

Los reportes se generan en la carpeta `reports/`:
- **cucumber-report.json**: Reporte en formato JSON (generado automáticamente)
- **cucumber-report.html**: Reporte visual en HTML (ejecutar `npm run report`)
- **screenshots/**: Capturas de pantalla de escenarios fallidos