# Tests E2E con Playwright

Esta carpeta contiene los tests end-to-end (E2E) usando Playwright para el proyecto Laravel.

## Estructura

```
tests/Browser/
├── LoginProductosTest.spec.js    # Test de login y gestión de productos
├── playwright-report/             # Reportes HTML generados (git ignored)
└── README.md                      # Este archivo
```

## Requisitos Previos

Asegúrate de tener Playwright instalado:

```bash
npm install
npx playwright install
```

## Ejecutar Tests

### Modo Headless (sin interfaz gráfica)
```bash
npm run test:e2e
```

### Modo Headed (con navegador visible) - **Recomendado para el test actual**
```bash
npm run test:e2e:headed
```

### Modo UI (interfaz interactiva de Playwright)
```bash
npm run test:e2e:ui
```

### Modo Debug (paso a paso)
```bash
npm run test:e2e:debug
```

### Ver reporte HTML
```bash
npm run test:e2e:report
```

## Ejecutar un Test Específico

```bash
npx playwright test LoginProductosTest
```

## Tests Disponibles

### LoginProductosTest
- **Archivo**: `LoginProductosTest.spec.js`
- **Descripción**: Prueba el flujo completo de login y selección de categoría de productos
- **Pasos**:
  1. Navega a la página de login
  2. Ingresa credenciales (admin@admin.com / 321)
  3. Espera la navegación post-login
  4. Hace clic en el botón "Productos"
  5. Espera la carga completa de la página
  6. Marca el checkbox "ACCESORIOS (WEB)"
  7. Verifica que el checkbox está marcado

## Configuración

La configuración de Playwright se encuentra en `/playwright.config.js` en la raíz del proyecto.

### Características configuradas:
- ✅ Screenshots solo en errores
- ✅ Videos solo cuando falla
- ✅ Trace activado en primer reintento
- ✅ Timeout de 60 segundos por test
- ✅ Reporte HTML automático

## Buenas Prácticas

1. **Selectores robustos**: Usa selectores que no dependan de la implementación (text, role, test-id)
2. **Esperas explícitas**: Usa `waitForLoadState()`, `waitForURL()`, etc.
3. **Screenshots**: Solo en errores (ya configurado)
4. **Organización**: Un archivo por flujo o feature
5. **Nombres descriptivos**: Usa nombres que expliquen qué prueba cada test

## Debugging

Si un test falla:

1. Ejecuta en modo headed: `npm run test:e2e:headed`
2. Revisa los screenshots en `tests/Browser/playwright-report/`
3. Usa el modo UI para inspeccionar: `npm run test:e2e:ui`
4. Ejecuta en modo debug: `npm run test:e2e:debug`

## Más Información

- [Documentación de Playwright](https://playwright.dev/)
- [Best Practices](https://playwright.dev/docs/best-practices)
- [Selectores](https://playwright.dev/docs/selectors)