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

Documentación

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

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

Inspirado en Skyvern, este sistema combina la automatización DOM tradicional con IA de Visión 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 Codificados por 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

Instala Rust:

curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

Instala ChromeDriver:

macOS con Homebrew

brew install chromedriver

Ubuntu/Debian

sudo apt-get install chromium-chromedriver

Windows: Descarga desde https://chromedriver.chromium.org/

Obtén la 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 los modelos de generación IA como para los de visión!

🚀 Inicio Rápido

Clona y Compila:

git clone cd ai-ac-automation cargo build --release

Configura las Variables de Entorno (Recomendado):

Crea un archivo .env con tu clave API de OpenRouter

echo "OPENROUTER_API_KEY=sk-or-v1-tu-clave-real-aqui" > .env

Inicia ChromeDriver (en una terminal separada):

chromedriver --port=9515

Inicia la Interfaz Web:

cargo run --bin automation-ui

Abre el Navegador: Ve a http://localhost:3001

🔐 Configuración de la Clave API

Tienes dos opciones para configurar tu clave API de OpenRouter:

Opción 1: Variables de Entorno (Recomendado)

Crea un archivo .env en la raíz del proyecto

echo "OPENROUTER_API_KEY=sk-or-v1-tu-clave-aqui" > .env

Inicia el servidor: ¡la clave API se carga automáticamente!

cargo run --bin automation-ui

✅ Beneficios:

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

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:

Requerido: Clave API de OpenRouter para todas las funciones de IA

OPENROUTER_API_KEY=sk-or-v1-tu-clave-real-aqui

Opcional: Modelos predeterminados (se pueden cambiar en la interfaz)

AI_MODEL=anthropic/claude-3.5-sonnet VISION_MODEL=openai/gpt-4o

Opcional: Configuración del navegador

HEADLESS=false BROWSER_WIDTH=1920 BROWSER_HEIGHT=1080

Opcional: Puerto del servidor

PORT=3001

🔒 Notas de Seguridad:

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

🎯 Cómo Usar

🔧 Automatización DOM Básica

Ingresa la URL: https://google.com
Escenario de Prueba:

- Click on search box
- Type "browser automation"
- Press Enter
- Verify results appear
- Click on first result

Ejecuta: Marca "Ejecutar inmediatamente" → Haz clic en "Generar y Ejecutar"

👁️ Modo de Visión IA (Recomendado)

Habilita la Visión: ✅ Marca "Usar Modo de Visión IA (Como Skyvern)"
Configura:
- Modo: Híbrido (intenta DOM primero, recurre a Visión si es necesario)
- Clave API: Cargada automáticamente desde .env o ingrésala manualmente
- Modelo: GPT-4 Omni (recomendado)
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

Habilita la IA: ✅ Marca "Usar Automatización Impulsada por IA"
Clave API: Cargada automáticamente desde .env o ingresa tu clave de OpenRouter
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 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 OpenRouter	Proveedor	Calidad de Visión	Velocidad	Mejor Para
openai/gpt-4o	OpenAI	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Mejor opción general 🌟
openai/gpt-4-vision-preview	OpenAI	⭐⭐⭐⭐	⭐⭐⭐	Análisis detallado
anthropic/claude-3.5-sonnet	Anthropic	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Razonamiento complejo
google/gemini-2.0-flash-001	Google	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Opción más rápida 🚀
google/gemini-pro-vision	Google	⭐⭐⭐	⭐⭐⭐⭐	Rentable

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

ID de Modelo OpenRouter	Proveedor	Calidad	Velocidad	Mejor Para
anthropic/claude-3.5-sonnet	Anthropic	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Mejor razonamiento 🧠
openai/gpt-4o	OpenAI	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	Automatización compleja
openai/gpt-3.5-turbo	OpenAI	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	Rápido y asequible 💰
google/gemini-pro	Google	⭐⭐⭐⭐	⭐⭐⭐⭐	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 Codificados por Colores

🟢 ÉXITO: Operaciones completadas correctamente
🔵 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> { // Crea un ejecutor con Modo Visión let mut executor = AutomationExecutor::new()? .with_vision_mode("sk-tu-clave-openai".to_string(), Some("gpt-4o".to_string())) .with_headless(false);

// Ejecuta el flujo de trabajo
let (report, logs) = executor.execute_workflow(&workflow).await?;

println!("Tasa de éxito: {:.1}%", report.success_rate() * 100.0);
println!("Registros capturados: {}", logs.len());

Ok(())

}

⚙️ Comparación de Modos de Automatización

Característica	Modo DOM	Modo Visión	Modo 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, conteos de pasos
Registros Visuales: Paneles flotantes y terminales detalladas
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

Verifica el estado de ChromeDriver

curl http://localhost:9515/status

Reinicia ChromeDriver

pkill chromedriver chromedriver --port=9515

🔐 Problemas con Variables de Entorno

Verifica si el archivo .env existe y tiene el formato correcto

cat .env

Verifica que la variable de entorno esté cargada

echo $OPENROUTER_API_KEY

Verifica el estado del servidor para la clave API

curl http://localhost:3001/api/env-status

👁️ Problemas con el Modo 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 de 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 de variables de entorno (.env)
Conmutación automática por error entre proveedores
Optimización de costos mediante facturación unificada

📦 Estructura de Crates

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:

Configura tu clave API

export OPENROUTER_API_KEY=sk-or-v1-tu-clave-aqui

Ejecute la demostración integral de visión por computadora

cargo run --example computer_vision_demo -p automation-browser

🔥 NUEVO: Ejecute la demostración mejorada de visión LLM de OpenRouter

cargo run --example openrouter_vision_demo -p automation-browser

Ejecute la demostración mejorada de búsqueda de Google

cargo run --example enhanced_google_search -p automation-browser

✨ Últimas Funcionalidades de OpenRouter

🎯 Soporte Mejorado de Modelos (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 rápido de HTML

⚡ Funcionalidades de Auto-Optimización:

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

🧠 Estrategias Inteligentes de Visión:

Inspección del DOM: La IA analiza HTML (más rápido, más económico)
Basada en Coordenadas: La IA analiza capturas de pantalla (más robusta)
Adaptativa: Intenta DOM primero, luego 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 las contribuciones! Aquí se explica cómo comenzar:

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

🎯 Áreas de Contribución

Soporte de Modelos de Visión: Agregar 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 - consulte el archivo LICENSE para más detalles.

🙏 Agradecimientos

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

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

🌟 Da una estrella a este repositorio • 🐛 Reporta Problemas • 💡 Solicita Funcionalidades