6.9 KiB

Raw Blame History

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

npm install -g playwright
npx playwright install

2. Configurar para uso en otros proyectos

# 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

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

# 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

# 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

# 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

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

# 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

npx playwright show-report

Ver Trace Viewer

npx playwright show-trace trace.zip

Modo Debug Interactivo

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`

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

# 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

- 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

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

6.9 KiB Raw Blame History