AC to Automation Converter

Um sistema alimentado por IA que converte Critérios de Aceitação (AC) de especificações de QA em fluxos de trabalho automatizados de teste de navegador.

GitHub
9
Experimente este MCPPatrocinado

Documentação

🤖 Automação de Navegador com IA e Visão

Converta linguagem natural em automação real de navegador usando IA de Visão e execute testes imediatamente com logs de processo ao vivo!

Inspirado no Skyvern, este sistema combina automação DOM tradicional com IA de Visão que "vê" páginas da web como um humano.

✨ Principais Recursos

👁️ Modo de Visão por IA

  • Compreensão Visual: A IA analisa capturas de tela para encontrar elementos visualmente
  • Automação Robusta: Funciona mesmo quando os sites mudam sua estrutura HTML
  • Descrições Naturais: Use "clique no botão azul de login" em vez de seletores CSS
  • Interação Semelhante à Humana: Vê as páginas exatamente como os humanos

🔧 Três Modos de Automação

  • Modo DOM: Baseado em seletores CSS tradicionais (rápido)
  • Modo Visão: Compreensão visual por IA (robusto)
  • Modo Híbrido: Fallback inteligente - tenta DOM primeiro, usa Visão se necessário

📝 Logs de Processo em Tempo Real

  • Logs de Execução ao Vivo: Acompanhe as etapas de automação em tempo real
  • Painel de Log Flutuante: Veja o progresso sem rolar
  • Mensagens Codificadas por Cores: Fácil identificar sucessos, avisos e erros
  • Carimbos de Tempo Detalhados: Acompanhe o tempo de execução com precisão

🚀 Execução Imediata

  • Teste em Navegador Real: Usa ChromeDriver para interação real com o navegador
  • Geração com IA: OpenRouter AI converte linguagem natural em automação
  • Múltiplos Formatos de Script: Gere scripts MCP Browser, Selenium e Playwright
  • Feedback Visual: Capturas de tela e relatórios de execução detalhados

🎯 O Que Você Pode Automatizar

🔄 Fluxos de Usuário

  • Fluxos de login/registro
  • Processos de checkout em e-commerce
  • Envios e validações de formulários
  • Assistentes de múltiplas etapas

🎨 Interações Visuais

  • Clique em botões por descrição ("botão vermelho de enviar")
  • Encontre campos por contexto visual ("campo de e-mail no canto superior direito")
  • Navegue por marcos visuais ("botão de menu com ícone de hambúrguer")
  • Verifique estados visuais ("mensagem de sucesso aparece")

📊 Teste de Conteúdo

  • Verificação de presença de texto
  • Verificações de visibilidade de elementos
  • Validação de estado da página
  • Teste de conteúdo dinâmico

🛠️ Configuração e Instalação

📋 Pré-requisitos

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

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

# Windows: Download from https://chromedriver.chromium.org/
  1. Obtenha a Chave da API OpenRouter (Recomendado):
    • Cadastre-se em openrouter.ai
      • Obtenha sua chave de API (começa com sk-or-v1-...)
      • 🎉 Uma chave funciona tanto para geração de IA quanto para modelos de visão!

🚀 Início Rápido

  1. Clone e Compile:
git clone <your-repo>
cd ai-ac-automation
cargo build --release
  1. Configure as Variáveis de Ambiente (Recomendado):
# Create .env file with your OpenRouter API key
echo "OPENROUTER_API_KEY=sk-or-v1-your-actual-key-here" > .env
  1. Inicie o ChromeDriver (em terminal separado):
chromedriver --port=9515
  1. Inicie a Interface Web:
cargo run --bin automation-ui
  1. Abra o Navegador: Vá para http://localhost:3001

🔐 Configuração da Chave da API

Você tem duas opções para configurar sua chave da API 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

✅ Benefícios:

  • Seguro: A chave da API nunca aparece na interface ou nos logs
  • Conveniente: Não precisa inserir a chave toda vez
  • Universal: Funciona tanto para geração de IA quanto para visão
  • Seguro: .env está em .gitignore - não será commitado

Opção 2: Formulário Web

  • Deixe .env vazio ou não o crie
  • Insira a chave da API diretamente nos formulários da interface web
  • Funciona para sessões individuais

💡 Dica Profissional: Use a Opção 1 para desenvolvimento, a Opção 2 para compartilhamento/demos!

📄 Formato do Arquivo de Ambiente (.env)

Seu arquivo .env deve conter:

# 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 Segurança:

  • Nunca faça commit de .env no controle de versão
  • Mantenha suas chaves de API seguras e rotacione-as regularmente
  • Use chaves diferentes para desenvolvimento e produção

🎯 Como Usar

🔧 Automação DOM Básica

  1. Insira a URL: https://google.com
  2. Cenário de Teste:
- Click on search box
- Type "browser automation"
- Press Enter
- Verify results appear
- Click on first result
  1. Execute: Marque "Executar imediatamente" → Clique em "Gerar e Executar"
  2. Ative a Visão: ✅ Marque "Usar Modo de Visão por IA (como Skyvern)"
  3. Configure:
    • Modo: Híbrido (tenta DOM primeiro, usa Visão como fallback)
      • Chave da API: Carregada automaticamente de .env ou insira manualmente
      • Modelo: GPT-4 Omni (recomendado)
  4. Cenário de Teste 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

🤖 Geração de Testes com IA

  1. Ative a IA: ✅ Marque "Usar Automação com IA"
  2. Chave da API: Carregada automaticamente de .env ou insira sua chave OpenRouter
  3. Descreva 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

🎯 Exemplo com Variáveis de Ambiente:

Se você tiver OPENROUTER_API_KEY no seu arquivo .env:

  • ✅ Nenhuma entrada de chave de API necessária - funciona automaticamente!
  • ✅ A mesma chave funciona tanto para geração de IA quanto para visão
  • ✅ Seguro - nunca aparece em formulários ou logs
  • ✅ Rápido - acesso instantâneo a todos os recursos de IA

🧠 Modelos de IA Suportados

🎉 Todos os modelos disponíveis através do OpenRouter com uma única chave de API!

👁️ Modelos de Visão (Integração Real de Visão por IA)

ID do Modelo OpenRouterProvedorQualidade de VisãoVelocidadeMelhor Para
openai/gpt-4oOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐Melhor escolha geral 🌟
openai/gpt-4-vision-previewOpenAI⭐⭐⭐⭐⭐⭐⭐Análise detalhada
anthropic/claude-3.5-sonnetAnthropic⭐⭐⭐⭐⭐⭐⭐⭐⭐Raciocínio complexo
google/gemini-2.0-flash-001Google⭐⭐⭐⭐⭐⭐⭐⭐⭐Opção mais rápida 🚀
google/gemini-pro-visionGoogle⭐⭐⭐⭐⭐⭐⭐Custo-benefício

🧠 Modelos de Geração de Texto (Criação de Testes com IA)

ID do Modelo OpenRouterProvedorQualidadeVelocidadeMelhor Para
anthropic/claude-3.5-sonnetAnthropic⭐⭐⭐⭐⭐⭐⭐⭐⭐Melhor raciocínio 🧠
openai/gpt-4oOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐Automação complexa
openai/gpt-3.5-turboOpenAI⭐⭐⭐⭐⭐⭐⭐⭐⭐Rápido e acessível 💰
google/gemini-proGoogle⭐⭐⭐⭐⭐⭐⭐⭐Boa alternativa

🔑 Benefícios de uma Única Chave de API:

  • Uma conta para todos os provedores de IA
  • Faturamento unificado e rastreamento de uso
  • Limitação de taxa em todos os modelos
  • Troca fácil de modelos na interface
  • Nenhuma chave de API separada para gerenciar

📊 Logs de Execução em Tempo Real

🎨 Exibição de Log ao 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)

🎨 Mensagens Codificadas por Cores

  • 🟢 SUCESSO: Operações concluídas com sucesso
  • 🔵 INFO: Informações gerais e progresso
  • 🟡 AVISO: Avisos e ações de fallback
  • 🔴 ERRO: Falhas e problemas

🔧 Configuração Avançada

🖥️ 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(())
}

⚙️ Comparação de Modos de Automação

RecursoModo DOMModo VisãoModo Híbrido
Velocidade⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Confiabilidade⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Complexidade de Configuração⭐⭐⭐⭐⭐⭐⭐⭐⭐
Mudanças no Site⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐
Linguagem Natural⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐

🎨 Recursos da Interface Web

📋 Formulários Inteligentes

  • Exemplos ao Vivo: Clique nos exemplos para preencher formulários automaticamente
  • Configuração de Visão: Configuração fácil para o modo de Visão por IA
  • Validação em Tempo Real: Feedback imediato nas entradas
  • Acompanhamento de Progresso: Status de execução ao vivo

📊 Resultados Aprimorados

  • Estatísticas de Execução: Taxas de sucesso, tempo, contagem de etapas
  • Logs Visuais: Painéis flutuantes e terminais detalhados
  • Galeria de Capturas de Tela: Capturas automáticas durante a execução
  • Exportação de Scripts: Baixe os scripts de automação gerados

🔧 Recursos de Depuração

  • Detalhamento Passo a Passo: Veja cada ação executada
  • Destaque de Erros: Mensagens de erro claras e soluções
  • Lógica de Repetição: Repetições automáticas com backoff exponencial
  • Opções de Fallback: O modo híbrido troca de estratégia automaticamente

🛡️ Segurança e Boas Práticas

🔐 Segurança da Chave da API

  • Armazene chaves de API com segurança (nunca faça commit no controle de versão)
  • Use variáveis de ambiente para produção
  • Rotacione as chaves regularmente
  • Monitore o uso e os custos da API

🧪 Ambiente de Teste

  • Use contas de teste e ambientes sandbox
  • Evite testar em sistemas de produção
  • Configure dados de teste dedicados
  • Use o modo headless para CI/CD

🌐 Considerações sobre o Site

  • Respeite o robots.txt e os termos do site
  • Adicione atrasos entre ações para evitar limitação de taxa
  • Lide com conteúdo dinâmico e estados de carregamento
  • Considere as medidas anti-automação do site

🆘 Solução de Problemas

🔧 Problemas com ChromeDriver

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

# Restart ChromeDriver
pkill chromedriver
chromedriver --port=9515

🔐 Problemas com Variáveis de Ambiente

# 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 no Modo de Visão

  • Chave da API: Verifique se a chave OpenRouter é válida (sk-or-v1-...)
  • Ambiente: Verifique o arquivo .env ou a entrada do formulário
  • Acesso ao Modelo: Garanta que você tenha acesso aos modelos de visão no OpenRouter
  • Limites de Taxa: Verifique as cotas de uso da API no painel do OpenRouter
  • Fallback: Use o modo híbrido para fallback automático de DOM

🚫 Problemas Comuns de Automação

  • Elemento Não Encontrado: Tente o modo de Visão para detecção robusta de elementos
  • Problemas de Tempo: Adicione esperas para conteúdo dinâmico
  • Mudanças no Site: O modo de Visão se adapta automaticamente
  • Detecção Anti-bot: Use atrasos realistas e padrões semelhantes aos humanos

🏗️ Arquitetura

🧱 Componentes do Sistema

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

🔧 Benefícios da Integração:

  • Endpoint único de API para todos os modelos de IA
  • Configuração por variável de ambiente (.env)
  • Failover automático entre provedores
  • Otimização de custos através de faturamento unificado

📦 Estrutura de Crates

  • automation-ui: Interface web e servidor
  • automation-browser: Automação Chrome com suporte a Visão
  • automation-api: Fluxo de trabalho central e estruturas de dados
  • automation-integration: Orquestração de pipeline
  • automation-ai: Integração de modelos de IA

🚀 NOVO: Demonstração Aprimorada de Visão LLM com OpenRouter

Experimente a mais recente integração OpenRouter com modelos de visão de ponta:

# 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

✨ Recursos Mais Recentes do OpenRouter

🎯 Suporte Aprimorado de Modelos (Atualizado em 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 - Visão econômica
  • google/gemini-pro-1.5 - Modelo de visão do Google
  • anthropic/claude-3-5-haiku-20241022 - Análise HTML rápida

⚡ Recursos de Auto-Otimização:

  • Seleção automática de modelo para cada estratégia
  • Engenharia de prompt específica do modelo
  • Tratamento aprimorado de erros com mensagens detalhadas
  • Benchmarks e comparações de desempenho

🧠 Estratégias Inteligentes de Visão:

  • Inspeção de DOM: IA analisa HTML (mais rápido, mais barato)
  • Baseado em Coordenadas: IA analisa capturas de tela (mais robusto)
  • Adaptativo: Tenta DOM primeiro, usa coordenadas como fallback

Exemplo 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);

🤝 Contribuindo

Aceitamos contribuições! Veja como começar:

  1. Faça um fork do repositório
  2. Crie um branch de recurso (git checkout -b feature/amazing-feature)
  3. Adicione testes para suas alterações
  4. Atualize a documentação conforme necessário
  5. Envie um pull request

🎯 Áreas de Contribuição

  • Suporte a Modelos de Visão: Adicione novos provedores de IA de visão
  • Suporte a Navegadores: Automação Firefox, Safari
  • Melhorias na Interface: Melhor design visual
  • Desempenho: Otimização e cache
  • Testes: Cobertura de testes mais abrangente

📄 Licença

Licença MIT - consulte o arquivo LICENSE para detalhes.

🙏 Agradecimentos

  • Skyvern: Inspiração para automação com IA de Visão
  • OpenAI: Capacidades de Visão GPT-4
  • Anthropic: Visão e raciocínio Claude
  • Selenium: Base de automação de navegador
  • Comunidade Rust: Ecossistema e suporte incríveis

🚀 Construído com ❤️ usando Rust, IA de Visão e Automação Real de Navegador

🌟 Dê uma estrela neste repositório • 🐛 Reporte Problemas • 💡 Solicite Recursos