AC to Automation Converter

Un sistema impulsado por IA que convierte los Criterios de Aceptación (AC) de especificaciones de QA en flujos de trabajo automatizados de pruebas en navegador.

GitHub
9
Prueba este MCPPatrocinado

Documentación

🤖 Automatización de Navegador con IA y Visión

Convierte lenguaje natural en automatización real de navegador usando IA Vision y ejecuta pruebas inmediatamente con registros de proceso en vivo!

Inspirado en Skyvern, este sistema combina automatización DOM tradicional con IA Vision que "ve" las páginas web como un humano.

✨ Características Clave

👁️ Modo de Visión IA

  • Comprensión Visual: La IA analiza capturas de pantalla para encontrar elementos visualmente
  • Automatización Robusta: Funciona incluso cuando los sitios web cambian su estructura HTML
  • Descripciones Naturales: Usa "haz clic en el botón azul de inicio de sesión" en lugar de selectores CSS
  • Interacción Similar a la Humana: Ve las páginas exactamente como lo hacen los humanos

🔧 Tres Modos de Automatización

  • Modo DOM: Basado en selectores CSS tradicionales (rápido)
  • Modo Visión: Comprensión visual con IA (robusto)
  • Modo Híbrido: Respaldo inteligente - intenta DOM primero, usa Visión si es necesario

📝 Registros de Proceso en Tiempo Real

  • Registros de Ejecución en Vivo: Observa los pasos de automatización en tiempo real
  • Panel de Registros Flotante: Ve el progreso sin desplazarte
  • Mensajes con Código de Colores: Fácil de detectar éxitos, advertencias y errores
  • Marcas de Tiempo Detalladas: Rastrea el tiempo de ejecución con precisión

🚀 Ejecución Inmediata

  • Pruebas con Navegador Real: Usa ChromeDriver para interacción real con el navegador
  • Generación Impulsada por IA: OpenRouter IA convierte lenguaje natural en automatización
  • Múltiples Formatos de Script: Genera scripts para MCP Browser, Selenium y Playwright
  • Retroalimentación Visual: Capturas de pantalla e informes de ejecución detallados

🎯 Qué Puedes Automatizar

🔄 Flujos de Usuario

  • Flujos de inicio de sesión/registro
  • Procesos de pago en comercio electrónico
  • Envíos y validaciones de formularios
  • Asistentes de múltiples pasos

🎨 Interacciones Visuales

  • Haz clic en botones por descripción ("botón rojo de enviar")
  • Encuentra entradas por contexto visual ("campo de correo en la esquina superior derecha")
  • Navega por puntos de referencia visuales ("botón de menú con icono de hamburguesa")
  • Verifica estados visuales ("aparece el mensaje de éxito")

📊 Pruebas de Contenido

  • Verificación de presencia de texto
  • Comprobaciones de visibilidad de elementos
  • Validación del estado de la página
  • Pruebas de contenido dinámico

🛠️ Configuración e Instalación

📋 Requisitos Previos

  1. Instala Rust:
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
  1. Instala ChromeDriver:
# macOS with Homebrew
brew install chromedriver

# Ubuntu/Debian
sudo apt-get install chromium-chromedriver

# Windows: Download from https://chromedriver.chromium.org/
  1. Obtén una Clave API de OpenRouter (Recomendado):
    • Regístrate en openrouter.ai
      • Obtén tu clave API (comienza con sk-or-v1-...)
      • 🎉 ¡Una clave funciona tanto para la generación de IA como para los modelos de visión!

🚀 Inicio Rápido

  1. Clona y Compila:
git clone <your-repo>
cd ai-ac-automation
cargo build --release
  1. Configura las Variables de Entorno (Recomendado):
# Create .env file with your OpenRouter API key
echo "OPENROUTER_API_KEY=sk-or-v1-your-actual-key-here" > .env
  1. Inicia ChromeDriver (en una terminal separada):
chromedriver --port=9515
  1. Inicia la Interfaz Web:
cargo run --bin automation-ui
  1. Abre el Navegador: Ve a http://localhost:3001

🔐 Configuración de la Clave API

Tienes dos opciones para configurar tu clave API de OpenRouter:

# Create .env file in project root
echo "OPENROUTER_API_KEY=sk-or-v1-your-key-here" > .env

# Start the server - API key loaded automatically!
cargo run --bin automation-ui

✅ Beneficios:

  • Seguro: La clave API nunca aparece en la interfaz ni en los registros
  • Conveniente: No es necesario ingresar la clave cada vez
  • Universal: Funciona tanto para la generación de IA como para la visión
  • Seguro: .env está en .gitignore - no se enviará

Opción 2: Formulario Web

  • Deja .env vacío o no lo crees
  • Ingresa la clave API directamente en los formularios de la interfaz web
  • Funciona para sesiones individuales

💡 Consejo Profesional: Usa la Opción 1 para desarrollo, la Opción 2 para compartir/demos!

📄 Formato del Archivo de Entorno (.env)

Tu archivo .env debe contener:

# Required: OpenRouter API key for all AI features
OPENROUTER_API_KEY=sk-or-v1-your-actual-key-here

# Optional: Default models (can be changed in UI)
AI_MODEL=anthropic/claude-3.5-sonnet
VISION_MODEL=openai/gpt-4o

# Optional: Browser settings
HEADLESS=false
BROWSER_WIDTH=1920
BROWSER_HEIGHT=1080

# Optional: Server port
PORT=3001

🔒 Notas de Seguridad:

  • Nunca envíes .env al control de versiones
  • Mantén tus claves API seguras y rótalas regularmente
  • Usa claves diferentes para desarrollo y producción

🎯 Cómo Usar

🔧 Automatización DOM Básica

  1. Ingresa la URL: https://google.com
  2. Escenario de Prueba:
- Click on search box
- Type "browser automation"
- Press Enter
- Verify results appear
- Click on first result
  1. Ejecuta: Marca "Ejecutar inmediatamente" → Haz clic en "Generar y Ejecutar"
  2. Habilita la Visión: ✅ Marca "Usar Modo de Visión IA (Como Skyvern)"
  3. Configura:
    • Modo: Híbrido (intenta DOM primero, recurre a Visión)
      • Clave API: Cargada automáticamente desde .env o ingrésala manualmente
      • Modelo: GPT-4 Omni (recomendado)
  4. Escenario de Prueba Natural:
Website: https://example.com/login
Test:
- Find the email input field
- Type admin@test.com
- Find the password field
- Type mypassword123
- Click the blue login button
- Verify the dashboard appears

🤖 Generación de Pruebas Impulsada por IA

  1. Habilita la IA: ✅ Marca "Usar Automatización Impulsada por IA"
  2. Clave API: Cargada automáticamente desde .env o ingresa tu clave de OpenRouter
  3. Describe Naturalmente:
Test the login functionality:
- User should be able to log in with valid credentials
- After login, dashboard should be visible
- User profile should show correct information
- Logout should work properly

🎯 Ejemplo con Variables de Entorno:

Si tienes OPENROUTER_API_KEY en tu archivo .env:

  • ✅ No se necesita ingresar la clave API - ¡funciona automáticamente!
  • ✅ La misma clave funciona tanto para la generación de IA como para la visión
  • ✅ Seguro - nunca aparece en formularios ni registros
  • ✅ Rápido - acceso instantáneo a todas las funciones de IA

🧠 Modelos de IA Soportados

🎉 ¡Todos los modelos disponibles a través de OpenRouter con una sola clave API!

👁️ Modelos de Visión (Integración Real de Visión IA)

ID de Modelo OpenRouterProveedorCalidad de VisiónVelocidadMejor Para
openai/gpt-4oOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐La mejor opción en general 🌟
openai/gpt-4-vision-previewOpenAI⭐⭐⭐⭐⭐⭐⭐Análisis detallado
anthropic/claude-3.5-sonnetAnthropic⭐⭐⭐⭐⭐⭐⭐⭐⭐Razonamiento complejo
google/gemini-2.0-flash-001Google⭐⭐⭐⭐⭐⭐⭐⭐⭐La opción más rápida 🚀
google/gemini-pro-visionGoogle⭐⭐⭐⭐⭐⭐⭐Rentable

🧠 Modelos de Generación de Texto (Creación de Pruebas con IA)

ID de Modelo OpenRouterProveedorCalidadVelocidadMejor Para
anthropic/claude-3.5-sonnetAnthropic⭐⭐⭐⭐⭐⭐⭐⭐⭐Mejor razonamiento 🧠
openai/gpt-4oOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐Automatización compleja
openai/gpt-3.5-turboOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐Rápido y asequible 💰
google/gemini-proGoogle⭐⭐⭐⭐⭐⭐⭐⭐Buena alternativa

🔑 Beneficios de una Sola Clave API:

  • Una cuenta para todos los proveedores de IA
  • Facturación unificada y seguimiento de uso
  • Límites de velocidad en todos los modelos
  • Cambio fácil de modelo en la interfaz
  • Sin claves API separadas que gestionar

📊 Registros de Ejecución en Tiempo Real

🎨 Visualización de Registros en Vivo

[12:09:15.234] INFO: 🚀 Initializing Chrome WebDriver...
[12:09:15.456] SUCCESS: ✅ Chrome WebDriver initialized successfully
[12:09:15.567] INFO: 🔧 Running in HYBRID mode (DOM + Vision)
[12:09:15.678] INFO: 🌐 Navigating to: https://example.com
[12:09:17.123] SUCCESS: ✅ Navigated to https://example.com
[12:09:17.234] INFO: 👁️ AI Vision: Looking for 'email input field' to click
[12:09:17.456] INFO: 🧠 Analyzing screenshot with AI Vision
[12:09:18.789] SUCCESS: ✅ AI Vision found coordinates: (450, 320)
[12:09:18.890] INFO: 🖱️ Clicking at coordinates (450, 320)
[12:09:19.123] SUCCESS: ✅ Vision-clicked at coordinates (450, 320)
[12:09:19.234] INFO: ⌨️ Vision-typing 'admin@test.com' at coordinates (450, 320)
[12:09:19.567] SUCCESS: ✅ Vision-typed 'admin@test.com' at coordinates (450, 320)

🎨 Mensajes con Código de Colores

  • 🟢 ÉXITO: Operaciones completadas exitosamente
  • 🔵 INFO: Información general y progreso
  • 🟡 ADVERTENCIA: Advertencias y acciones de respaldo
  • 🔴 ERROR: Fallos y problemas

🔧 Configuración Avanzada

🖥️ Uso Programático

use automation_browser::{AutomationExecutor, AutomationMode};

#[tokio::main]
async fn main() -> Result<(), Box<dyn std::error::Error>> {
    // Create executor with Vision Mode
    let mut executor = AutomationExecutor::new()?
        .with_vision_mode("sk-your-openai-key".to_string(), Some("gpt-4o".to_string()))
        .with_headless(false);

    // Execute workflow
    let (report, logs) = executor.execute_workflow(&workflow).await?;

    println!("Success rate: {:.1}%", report.success_rate() * 100.0);
    println!("Logs captured: {}", logs.len());

    Ok(())
}

⚙️ Comparación de Modos de Automatización

CaracterísticaModo DOMModo VisiónModo Híbrido
Velocidad⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Fiabilidad⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Complejidad de Configuración⭐⭐⭐⭐⭐⭐⭐⭐⭐
Cambios en el Sitio Web⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Lenguaje Natural⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

🎨 Características de la Interfaz Web

📋 Formularios Inteligentes

  • Ejemplos en Vivo: Haz clic en ejemplos para autocompletar formularios
  • Configuración de Visión: Configuración fácil para el modo de Visión IA
  • Validación en Tiempo Real: Retroalimentación inmediata en las entradas
  • Seguimiento de Progreso: Estado de ejecución en vivo

📊 Resultados Mejorados

  • Estadísticas de Ejecución: Tasas de éxito, tiempos, conteo de pasos
  • Registros Visuales: Paneles flotantes y terminales detallados
  • Galería de Capturas: Capturas de pantalla automáticas durante la ejecución
  • Exportación de Scripts: Descarga los scripts de automatización generados

🔧 Funciones de Depuración

  • Desglose Paso a Paso: Ve cada acción ejecutada
  • Resaltado de Errores: Mensajes de error claros y soluciones
  • Lógica de Reintentos: Reintentos automáticos con retroceso exponencial
  • Opciones de Respaldo: El modo híbrido cambia de estrategia automáticamente

🛡️ Seguridad y Mejores Prácticas

🔐 Seguridad de la Clave API

  • Almacena las claves API de forma segura (nunca las envíes al control de versiones)
  • Usa variables de entorno para producción
  • Rota las claves regularmente
  • Monitorea el uso y los costos de la API

🧪 Entorno de Pruebas

  • Usa cuentas de prueba y entornos sandbox
  • Evita probar en sistemas de producción
  • Configura datos de prueba dedicados
  • Usa el modo headless para CI/CD

🌐 Consideraciones sobre el Sitio Web

  • Respeta robots.txt y los términos del sitio web
  • Agrega retrasos entre acciones para evitar límites de velocidad
  • Maneja contenido dinámico y estados de carga
  • Considera las medidas anti-automatización del sitio web

🆘 Solución de Problemas

🔧 Problemas con ChromeDriver

# Check ChromeDriver status
curl http://localhost:9515/status

# Restart ChromeDriver
pkill chromedriver
chromedriver --port=9515

🔐 Problemas con Variables de Entorno

# Check if .env file exists and has correct format
cat .env

# Verify environment variable is loaded
echo $OPENROUTER_API_KEY

# Check server status for API key
curl http://localhost:3001/api/env-status

👁️ Problemas con el Modo de Visión

  • Clave API: Verifica que la clave de OpenRouter sea válida (sk-or-v1-...)
  • Entorno: Revisa el archivo .env o la entrada del formulario
  • Acceso al Modelo: Asegúrate de tener acceso a los modelos de visión en OpenRouter
  • Límites de Velocidad: Revisa las cuotas de uso de la API en el panel de OpenRouter
  • Respaldo: Usa el modo híbrido para el respaldo automático a DOM

🚫 Problemas Comunes de Automatización

  • Elemento No Encontrado: Prueba el modo Visión para una detección robusta de elementos
  • Problemas de Tiempo: Agrega esperas para contenido dinámico
  • Cambios en el Sitio Web: El modo Visión se adapta automáticamente
  • Detección Anti-bot: Usa retrasos realistas y patrones similares a los humanos

🏗️ Arquitectura

🧱 Componentes del Sistema

┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│   Web UI        │    │   OpenRouter     │    │  ChromeDriver   │
│  (Axum/HTML)    │◄──►│ (Unified AI API) │    │   (Browser)     │
└─────────────────┘    └──────────────────┘    └─────────────────┘
         │                       │                       │
         ▼                       ▼                       ▼
┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐
│ Automation API  │    │  Vision Engine   │    │ Browser Actions │
│   (Workflow)    │◄──►│  (Screenshots)   │◄──►│ (Click/Type)    │
└─────────────────┘    └──────────────────┘    └─────────────────┘

🔧 Beneficios de Integración:

  • Un solo punto final de API para todos los modelos de IA
  • Configuración mediante variable de entorno (.env)
  • Conmutación automática por error entre proveedores
  • Optimización de costos mediante facturación unificada

📦 Estructura de Cajas

  • automation-ui: Interfaz web y servidor
  • automation-browser: Automatización de Chrome con soporte de Visión
  • automation-api: Flujo de trabajo central y estructuras de datos
  • automation-integration: Orquestación de pipelines
  • automation-ai: Integración de modelos de IA

🚀 NUEVO: Demo Mejorada de Visión LLM de OpenRouter

Experimenta la última integración de OpenRouter con modelos de visión de vanguardia:

# Set your API key
export OPENROUTER_API_KEY=sk-or-v1-your-key-here

# Run the comprehensive computer vision demo
cargo run --example computer_vision_demo -p automation-browser

# 🔥 NEW: Run the enhanced OpenRouter LLM vision demo
cargo run --example openrouter_vision_demo -p automation-browser

# Run the enhanced Google search demo
cargo run --example enhanced_google_search -p automation-browser

✨ Últimas Características de OpenRouter

🎯 Soporte de Modelos Mejorado (Actualizado 2024):

  • anthropic/claude-3-5-sonnet-20241022 - Último Claude 3.5 Sonnet
  • openai/gpt-4o-2024-11-20 - Último GPT-4o
  • openai/gpt-4o-mini-2024-07-18 - Visión económica
  • google/gemini-pro-1.5 - Modelo de visión de Google
  • anthropic/claude-3-5-haiku-20241022 - Análisis HTML rápido

⚡ Características de Auto-Optimización:

  • Selección automática de modelos para cada estrategia
  • Ingeniería de prompts específica para cada modelo
  • Manejo de errores mejorado con mensajes detallados
  • Benchmarks de rendimiento y comparaciones

🧠 Estrategias de Visión Inteligente:

  • Inspección DOM: La IA analiza HTML (más rápido, más barato)
  • Basado en Coordenadas: La IA analiza capturas de pantalla (más robusto)
  • Adaptativo: Intenta DOM primero, recurre a coordenadas

Ejemplo de Uso:

let mut engine = ChromeAutomationEngine::new(false)
    .with_vision_mode(api_key, None)
    .with_vision_strategy(VisionStrategy::Adaptive);

// Use convenient model shortcuts
engine.set_vision_model("claude"); // → claude-3-5-sonnet-20241022
engine.set_vision_model("gpt-4o"); // → gpt-4o-2024-11-20
engine.set_vision_model("gpt-4o-mini"); // → gpt-4o-mini-2024-07-18

// Auto-optimize for strategy
engine.with_optimal_model_for_strategy(&VisionStrategy::CoordinateBased);

🤝 Contribuciones

¡Damos la bienvenida a contribuciones! Así es como empezar:

  1. Haz un fork del repositorio
  2. Crea una rama de características (git checkout -b feature/amazing-feature)
  3. Agrega pruebas para tus cambios
  4. Actualiza la documentación según sea necesario
  5. Envía una solicitud de extracción

🎯 Áreas de Contribución

  • Soporte de Modelos de Visión: Agrega nuevos proveedores de IA de visión
  • Soporte de Navegadores: Automatización de Firefox, Safari
  • Mejoras de Interfaz: Mejor diseño visual
  • Rendimiento: Optimización y caché
  • Pruebas: Cobertura de pruebas más completa

📄 Licencia

Licencia MIT - consulta el archivo LICENSE para más detalles.

🙏 Agradecimientos

  • Skyvern: Inspiración para la automatización con IA de Visión
  • OpenAI: Capacidades de Visión GPT-4
  • Anthropic: Visión y razonamiento de Claude
  • Selenium: Base de automatización de navegador
  • Comunidad Rust: Ecosistema y soporte increíbles

🚀 Construido con ❤️ usando Rust, IA de Visión y Automatización Real de Navegador

🌟 Marca este repositorio • 🐛 Reporta Problemas • 💡 Solicita Características