S7_snap7_Stremer_n_Recorder/testing/mcp-server

Playwright MCP Server para GitHub Copilot

Este es un servidor MCP (Model Context Protocol) que permite a GitHub Copilot controlar navegadores web usando Playwright para automatizar tu aplicación PLC Streamer.

🎯 ¿Qué hace esto?

Permite que GitHub Copilot:

• Lance navegadores automáticamente
• Navegue por tu aplicación PLC Streamer
• Interactúe con elementos (clicks, llenar formularios, etc.)
• Capture screenshots y datos
• Monitoree el estado PLC en tiempo real
• Ejecute tests automáticos de tu aplicación

🚀 Configuración para GitHub Copilot

1. Configuración Global de MCP

Crea o edita el archivo de configuración MCP en tu sistema:

Windows:

%APPDATA%\Code\User\globalStorage\github.copilot-chat\mcpServers.json

macOS:

~/Library/Application Support/Code/User/globalStorage/github.copilot-chat/mcpServers.json

Linux:

~/.config/Code/User/globalStorage/github.copilot-chat/mcpServers.json

2. Contenido del archivo de configuración:

{
  "mcpServers": {
    "playwright-automation": {
      "command": "node",
      "args": ["src/server.js"],
      "cwd": "D:\\Proyectos\\Scripts\\Siemens\\S7_snap7_Streamer_n_Log\\testing\\mcp-server",
      "env": {
        "NODE_ENV": "production"
      }
    }
  }
}

⚠️ Importante: Cambia la ruta cwd por tu ruta absoluta real del proyecto.

3. Reiniciar VS Code

Después de agregar la configuración, reinicia VS Code para que GitHub Copilot detecte el servidor MCP.

🧪 Probar el Servidor

Prueba manual:

cd testing/mcp-server
npm test

Verificar conexión:

cd testing/mcp-server
npm start
# El servidor debería mostrar: "Playwright MCP Server running on stdio"

💬 Comandos para GitHub Copilot

Una vez configurado, puedes usar estos comandos con GitHub Copilot:

Básicos:

@copilot Abre un navegador y navega a mi aplicación PLC Streamer
@copilot Toma una captura de pantalla de la aplicación
@copilot Obtén el estado de conexión del PLC
@copilot Haz click en el tab "Configuration"

Automatización PLC:

@copilot Configura el PLC con IP 192.168.1.100
@copilot Inicia el streaming de datos
@copilot Monitorea el estado del streaming por 30 segundos
@copilot Crea un plot con las variables de temperatura

Testing automatizado:

@copilot Ejecuta un test completo de la aplicación
@copilot Verifica que todos los tabs funcionen correctamente
@copilot Prueba la configuración PLC con diferentes IPs
@copilot Captura métricas de performance de la aplicación

Debugging:

@copilot Navega a la aplicación y dime si hay errores en la consola
@copilot Verifica si el backend está respondiendo
@copilot Toma screenshots de todos los tabs de la aplicación

🛠️ Herramientas Disponibles

El servidor MCP proporciona estas herramientas a Copilot:

Navegador:

• launch_browser - Lanzar navegador
• navigate_to - Navegar a URL
• close_browser - Cerrar navegador
• take_screenshot - Capturar pantalla
• get_page_info - Info de la página

Interacción:

• click_element - Hacer click
• fill_input - Llenar campos
• get_text - Obtener texto
• wait_for_element - Esperar elemento
• execute_script - Ejecutar JavaScript

PLC Específico:

• get_plc_status - Estado PLC
• test_configuration - Probar config PLC
• monitor_streaming - Monitorear streaming
• capture_performance - Métricas de performance

🔧 Troubleshooting

Error: "No se puede conectar al servidor MCP"

1. Verifica que la ruta en mcpServers.json sea correcta
2. Asegúrate de que Node.js esté instalado
3. Reinicia VS Code completamente

Error: "Herramientas no disponibles"

1. Verifica que el servidor inicie sin errores
2. Revisa los logs en la consola de VS Code
3. Ejecuta la prueba manual: npm test

El navegador no se abre:

1. Verifica que Playwright esté instalado: npx playwright install
2. Prueba manualmente: node src/test-server.js

La aplicación no responde:

1. Asegúrate de que el frontend esté corriendo: npm run dev en frontend/
2. Verifica que el backend esté activo (puerto 5000)

📊 Ejemplo de Uso Completo

# 1. Usuario pregunta a Copilot:
"Abre mi aplicación PLC Streamer, configura el PLC con IP 192.168.1.50, 
inicia el streaming y toma una captura de pantalla"

# 2. Copilot ejecutará automáticamente:
- launch_browser()
- navigate_to("http://localhost:5173/app")
- click_element("Configuration")
- test_configuration({ip: "192.168.1.50"})
- click_element("Data Streaming") 
- monitor_streaming({action: "start"})
- take_screenshot()

🔒 Seguridad

• El servidor solo acepta conexiones locales
• No expone datos sensibles del PLC
• Las sesiones de navegador se aíslan automáticamente
• Los screenshots se guardan localmente

📈 Logs y Debugging

Los logs del servidor aparecen en:

• Consola de VS Code (panel "Output" → "GitHub Copilot Chat")
• Terminal donde ejecutes npm start
• Archivos de error en testing/mcp-server/logs/

---

¡Con esta configuración, GitHub Copilot puede controlar tu aplicación PLC Streamer como si fuera un asistente experto en automatización industrial! 🏭🤖