# Playwright MCP Automation for PLC Streamer

Este directorio contiene la configuración completa de Playwright para automatización y testing del proyecto PLC Streamer, con funcionalidad similar a MCP (Model Context Protocol) para interacción con navegadores.

## 🚀 Instalación Global

### 1. Instalar Playwright globalmente
```bash
npm install -g playwright
npx playwright install
```

### 2. Configurar para uso en otros proyectos
```bash
# Copiar el script global a un directorio en PATH
cp playwright-mcp-global.js ~/.local/bin/playwright-mcp
chmod +x ~/.local/bin/playwright-mcp

# O en Windows, copiar a un directorio en PATH
copy playwright-mcp-global.js C:\tools\playwright-mcp.js
```

## 📁 Estructura del Proyecto

```
testing/
├── package.json              # Dependencias de testing
├── playwright.config.js      # Configuración principal
├── browser-automation.js     # Automatización específica del proyecto
├── playwright-mcp-global.js  # Script global reutilizable
├── tests/                    # Tests específicos
│   ├── dashboard.spec.js
│   ├── configuration.spec.js
│   ├── streaming.spec.js
│   └── plotting.spec.js
├── screenshots/              # Capturas de pantalla
├── videos/                   # Grabaciones de video
└── README.md                 # Este archivo
```

## 🛠️ Uso Local (Proyecto PLC Streamer)

### Ejecutar Tests
```bash
cd testing

# Ejecutar todos los tests
npm test

# Ejecutar con interfaz visual
npm run test:headed

# Ejecutar con modo debug
npm run test:debug

# Ejecutar con UI de Playwright
npm run ui
```

### Generar Código de Test
```bash
# Generar código interactivo
npm run codegen

# Generar código específico para la app
npm run codegen:app
```

### Automatización Específica del Proyecto
```bash
# Ejecutar automatización completa
node browser-automation.js

# O importar en otro script
import PLCStreamerBrowserAutomation from './browser-automation.js';

const automation = new PLCStreamerBrowserAutomation();
await automation.initBrowser('chromium');
await automation.testConfigurationFlow();
```

## 🌐 Uso Global (Otros Proyectos)

### Script CLI Global
```bash
# Ejecutar tests básicos
node playwright-mcp-global.js test --url http://localhost:3000 --browser chromium

# Capturar screenshots
node playwright-mcp-global.js capture --url http://localhost:8080 --output ./captures

# Monitorear performance
node playwright-mcp-global.js monitor --url http://localhost:3000 --duration 120
```

### Ejemplo de Integración en Otros Proyectos
```javascript
import { chromium } from 'playwright';

// Para React apps
const testReactApp = async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('http://localhost:3000');
  await page.waitForSelector('[data-testid="app"]');
  
  // Tu lógica de testing aquí
  
  await browser.close();
};

// Para Vue apps
const testVueApp = async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  await page.goto('http://localhost:8080');
  await page.waitForSelector('#app');
  
  // Tu lógica de testing aquí
  
  await browser.close();
};
```

## 🔧 Funcionalidades MCP-like

### 1. Automatización de Navegador
- Control completo del navegador (Chromium, Firefox, WebKit)
- Interacción con elementos de la página
- Manejo de formularios y eventos
- Navegación automática entre páginas

### 2. Captura de Datos
- Screenshots automáticos
- Grabación de video de sesiones
- Métricas de performance
- Logs de consola y errores

### 3. Monitoreo en Tiempo Real
- Estado de conexión PLC
- Performance de la aplicación
- Uso de memoria
- Tiempos de carga

### 4. Reporting Automático
- Generación de reportes JSON
- Métricas de performance
- Estados de la aplicación
- Capturas de evidencia

## 📊 Tests Específicos del PLC Streamer

### Dashboard Tests (`dashboard.spec.js`)
- Carga correcta de la aplicación
- Navegación entre tabs
- Estado de conexión PLC
- Elementos de interfaz

### Configuration Tests (`configuration.spec.js`)
- Formularios de configuración
- Validación de datos
- Guardado de configuraciones
- Manejo de errores

### Streaming Tests (`streaming.spec.js`)
- Control de streaming
- Gestión de variables
- Configuración de datasets
- Estados de streaming

### Plotting Tests (`plotting.spec.js`)
- Creación de plots
- Actualización en tiempo real
- Exportación de datos
- Gestión de sesiones

## 🚀 Comandos Rápidos

```bash
# Setup inicial
npm install

# Test completo con reporte
npm test -- --reporter=html

# Debug test específico
npx playwright test dashboard.spec.js --debug

# Generar código para nueva funcionalidad
npx playwright codegen http://localhost:5173/app

# Ejecutar con todos los navegadores
npx playwright test --project=chromium --project=firefox --project=webkit

# Solo móviles
npx playwright test --project="Mobile Chrome" --project="Mobile Safari"
```

## 🔍 Debugging

### Ver Reports HTML
```bash
npx playwright show-report
```

### Ver Trace Viewer
```bash
npx playwright show-trace trace.zip
```

### Modo Debug Interactivo
```bash
npx playwright test --debug
```

## 🌟 Características Avanzadas

### 1. Test Paralelo
Los tests se ejecutan en paralelo por defecto para mayor velocidad.

### 2. Auto-waiting
Playwright espera automáticamente a que los elementos estén listos.

### 3. Cross-browser
Soporte nativo para Chromium, Firefox y WebKit.

### 4. Mobile Testing
Tests en viewports móviles incluidos.

### 5. Video Recording
Grabación automática de videos en fallos.

### 6. Network Interception
Capacidad de interceptar y modificar requests de red.

## 🔧 Configuración Personalizada

### Modificar `playwright.config.js`
```javascript
export default defineConfig({
  // Tu configuración personalizada
  testDir: './tests',
  timeout: 30000,
  retries: 2,
  use: {
    baseURL: 'http://localhost:5173',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  }
});
```

### Variables de Entorno
```bash
# Configurar URLs dinámicamente
FRONTEND_URL=http://localhost:3000 npm test
BACKEND_URL=http://localhost:8000 npm test
```

## 📝 Integración con CI/CD

### GitHub Actions Example
```yaml
- name: Install Playwright
  run: npx playwright install

- name: Run tests
  run: npm test

- name: Upload test results
  uses: actions/upload-artifact@v3
  with:
    name: playwright-report
    path: playwright-report/
```

## 🤝 Contribuir

1. Agregar nuevos tests en `/tests/`
2. Extender `browser-automation.js` con nuevas funcionalidades
3. Actualizar configuración en `playwright.config.js`
4. Documentar cambios en este README

## 📚 Recursos Adicionales

- [Playwright Documentation](https://playwright.dev/)
- [Playwright Test](https://playwright.dev/docs/test-intro)
- [Playwright Inspector](https://playwright.dev/docs/inspector)
- [Playwright Trace Viewer](https://playwright.dev/docs/trace-viewer)