Spaces:
Running
Running
adicione aqui no chatbot uma forma de importar um bdd .txt para testar automático sem precisar ficar dizendo o que fazer.
58d7eef
verified
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chatbot - Mobile Test Pilot</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#21223a', | |
| secondary: '#ff580f', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-primary min-h-screen text-white"> | |
| <custom-sidebar></custom-sidebar> | |
| <main class="ml-64 p-8"> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="bg-primary rounded-2xl border border-gray-700 p-8 shadow-2xl"> | |
| <div class="flex items-center justify-between mb-8"> | |
| <div> | |
| <h1 class="text-3xl font-bold mb-2">Chatbot de Testes</h1> | |
| <p class="text-gray-300">Teste seu aplicativo Android ou iOS usando comandos em linguagem natural</p> | |
| </div> | |
| <div class="flex items-center gap-4"> | |
| <span id="platformBadge" class="bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2"> | |
| <i data-feather="circle" class="w-3 h-3"></i> | |
| Android Conectado | |
| </span> | |
| <button class="bg-secondary hover:bg-orange-600 text-white px-4 py-2 rounded-lg flex items-center gap-2"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| Configurações | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full flex gap-6"> | |
| <!-- Área do Chat --> | |
| <div class="flex-1"> | |
| <div class="bg-gray-900 rounded-2xl p-6 h-[600px] w-full overflow-y-auto mb-4" id="chatContainer"> | |
| <div class="chat-message bot-message"> | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>Olá! Sou seu assistente de testes Android. Como posso ajudar você hoje?</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| </div> | |
| <div class="chat-message bot-message"> | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>Você pode me pedir para:</p> | |
| <ul class="list-disc list-inside ml-4 text-sm text-gray-300 mt-2"> | |
| <li>Instalar e executar aplicativos Android/iOS</li> | |
| <li>Navegar pela interface</li> | |
| <li>Testar funcionalidades específicas</li> | |
| <li>Capturar screenshots</li> | |
| <li>Analisar performance</li> | |
| <li>Testar compatibilidade entre plataformas</li> | |
| </ul> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex gap-2"> | |
| <input | |
| type="text" | |
| placeholder="Digite seu comando..." | |
| class="flex-1 bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-white focus:border-secondary focus:ring-2 focus:ring-secondary focus:ring-opacity-50" | |
| id="chatInput" | |
| > | |
| <button onclick="sendMessage()" class="bg-secondary hover:bg-orange-600 text-white px-6 py-3 rounded-lg flex items-center gap-2"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| Enviar | |
| </button> | |
| <button onclick="document.getElementById('bddUpload').click()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg flex items-center gap-2"> | |
| <i data-feather="upload" class="w-4 h-4"></i> | |
| Importar BDD | |
| </button> | |
| <input type="file" id="bddUpload" class="hidden" accept=".txt" onchange="handleBddUpload(this.files)"> | |
| </div> | |
| </div> | |
| <!-- Painel de Ações Rápidas --> | |
| <div class="w-20"> | |
| <div class="bg-gray-800 rounded-2xl p-4 border border-gray-700 h-[600px]"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center gap-2 justify-center"> | |
| </h3> | |
| <div class="space-y-3"> | |
| <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Instalar App"> | |
| <i data-feather="download" class="w-5 h-5"></i> | |
| </button> | |
| <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Executar App"> | |
| <i data-feather="play" class="w-5 h-5"></i> | |
| </button> | |
| <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Capturar Tela"> | |
| <i data-feather="camera" class="w-5 h-5"></i> | |
| </button> | |
| <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Performance"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5"></i> | |
| </button> | |
| <button class="w-full bg-secondary bg-opacity-20 hover:bg-opacity-30 text-secondary p-3 rounded-lg flex items-center justify-center transition-all" title="Logs de Erro"> | |
| <i data-feather="alert-circle" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/sidebar.js"></script> | |
| <script src="script.js"></script> | |
| <script> | |
| feather.replace(); | |
| // Verificar parâmetros da URL para saber qual plataforma está sendo testada | |
| const urlParams = new URLSearchParams(window.location.search); | |
| const platform = urlParams.get('platform') || 'android'; | |
| // Atualizar badge da plataforma | |
| document.getElementById('platformBadge').textContent = platform.charAt(0).toUpperCase() + platform.slice(1) + ' Conectado'; | |
| document.getElementById('platformBadge').className = platform === 'android' ? | |
| 'bg-green-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2' : | |
| 'bg-blue-500 text-white px-3 py-1 rounded-full text-sm flex items-center gap-2'; | |
| function sendMessage() { | |
| const input = document.getElementById('chatInput'); | |
| const message = input.value.trim(); | |
| if (message) { | |
| // Adicionar mensagem do usuário | |
| addUserMessage(message); | |
| // Simular resposta do bot após 1 segundo | |
| setTimeout(() => { | |
| simulateBotResponse(message, platform); | |
| }, 1000); | |
| input.value = ''; | |
| } | |
| } | |
| function handleBddUpload(files) { | |
| if (files.length === 0) return; | |
| const file = files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const bddContent = e.target.result; | |
| processBddFile(bddContent, platform); | |
| }; | |
| reader.readAsText(file); | |
| } | |
| function processBddFile(content, platform) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| // Adicionar mensagem de início do processamento | |
| const processingMessage = document.createElement('div'); | |
| processingMessage.className = 'chat-message bot-message'; | |
| processingMessage.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>📁 <strong>BDD importado com sucesso!</strong> Iniciando execução automática dos cenários de teste...</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| `; | |
| chatContainer.appendChild(processingMessage); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| // Processar linhas do BDD | |
| const lines = content.split('\n').filter(line => line.trim()); | |
| let currentScenario = ''; | |
| let stepIndex = 0; | |
| function executeNextStep() { | |
| if (stepIndex >= lines.length) { | |
| // Finalizar execução | |
| const completionMessage = document.createElement('div'); | |
| completionMessage.className = 'chat-message bot-message'; | |
| completionMessage.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>✅ <strong>Execução do BDD concluída!</strong> Todos os cenários foram testados com sucesso.</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| `; | |
| chatContainer.appendChild(completionMessage); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| return; | |
| } | |
| const line = lines[stepIndex].trim(); | |
| stepIndex++; | |
| // Identificar tipo de linha | |
| if (line.startsWith('Cenário:') || line.startsWith('Scenario:')) { | |
| currentScenario = line; | |
| const scenarioMessage = document.createElement('div'); | |
| scenarioMessage.className = 'chat-message bot-message'; | |
| scenarioMessage.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>📋 <strong>Iniciando cenário:</strong> ${line}</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| `; | |
| chatContainer.appendChild(scenarioMessage); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| setTimeout(executeNextStep, 1500); | |
| } | |
| else if (line.startsWith('Dado') || line.startsWith('Given') || | |
| line.startsWith('Quando') || line.startsWith('When') || | |
| line.startsWith('Então') || line.startsWith('Then') || | |
| line.startsWith('E ') || line.startsWith('And ')) { | |
| // Adicionar passo como mensagem do usuário (simulada) | |
| const userMessageDiv = document.createElement('div'); | |
| userMessageDiv.className = 'chat-message user-message'; | |
| userMessageDiv.innerHTML = ` | |
| <div class="message-content"> | |
| <p>${line}</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| <div class="message-avatar"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| `; | |
| chatContainer.appendChild(userMessageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| // Simular resposta do bot após 1 segundo | |
| setTimeout(() => { | |
| simulateBddStep(line, platform); | |
| setTimeout(executeNextStep, 1000); | |
| }, 1000); | |
| } | |
| else { | |
| // Linha não reconhecida, pular | |
| setTimeout(executeNextStep, 500); | |
| } | |
| } | |
| // Iniciar execução | |
| setTimeout(executeNextStep, 2000); | |
| } | |
| function simulateBddStep(step, platform) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const platformName = platform === 'android' ? 'Android' : 'iOS'; | |
| let response = ''; | |
| if (step.includes('instalar') || step.includes('install') || | |
| step.includes('aplicativo') || step.includes('app')) { | |
| response = `📲 Instalando aplicativo no emulador ${platformName}... ✅ Aplicativo instalado com sucesso!`; | |
| } | |
| else if (step.includes('abrir') || step.includes('open') || | |
| step.includes('executar') || step.includes('run') || | |
| step.includes('iniciar') || step.includes('start')) { | |
| response = `🚀 Executando aplicativo no ${platformName}... 📱 Aplicativo iniciado na tela principal.`; | |
| } | |
| else if (step.includes('navegar') || step.includes('navigate') || | |
| step.includes('clicar') || step.includes('click') || | |
| step.includes('selecionar') || step.includes('select')) { | |
| response = `🔄 Navegando pela interface do ${platformName}... ✅ Navegação concluída com sucesso.`; | |
| } | |
| else if (step.includes('validar') || step.includes('validate') || | |
| step.includes('verificar') || step.includes('check')) { | |
| response = `🔍 Validando funcionalidade no ${platformName}... ✅ Validação concluída - tudo OK!`; | |
| } | |
| else if (step.includes('tela') || step.includes('screen') || | |
| step.includes('capturar') || step.includes('capture')) { | |
| response = `📸 Capturando screenshot da tela do ${platformName}... ✅ Screenshot salvo com sucesso!`; | |
| } | |
| else if (step.includes('dados') || step.includes('data') || | |
| step.includes('preencher') || step.includes('fill')) { | |
| response = `📝 Preenchendo dados no ${platformName}... ✅ Dados inseridos corretamente.`; | |
| } | |
| else { | |
| response = `✅ Executando passo no emulador ${platformName}... ✅ Ação concluída com sucesso.`; | |
| } | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-message bot-message'; | |
| messageDiv.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>${response}</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| } | |
| function addUserMessage(message) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-message user-message'; | |
| messageDiv.innerHTML = ` | |
| <div class="message-content"> | |
| <p>${message}</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| <div class="message-avatar"> | |
| <i data-feather="user" class="w-5 h-5"></i> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| } | |
| function simulateBotResponse(userMessage, platform) { | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-message bot-message'; | |
| let response = ''; | |
| const platformName = platform === 'android' ? 'Android' : 'iOS'; | |
| if (userMessage.toLowerCase().includes('instalar') || userMessage.toLowerCase().includes('install')) { | |
| response = `Instalando o aplicativo no emulador ${platformName}... ✅ Aplicativo instalado com sucesso!`; | |
| } else if (userMessage.toLowerCase().includes('executar') || userMessage.toLowerCase().includes('abrir') || userMessage.toLowerCase().includes('run')) { | |
| response = `Executando o aplicativo no ${platformName}... 🚀 Aplicativo iniciado na tela principal.`; | |
| } else if (userMessage.toLowerCase().includes('tela') || userMessage.toLowerCase().includes('screen')) { | |
| response = `Capturando screenshot da tela atual do ${platformName}... 📸 Screenshot salvo com sucesso!`; | |
| } else if (userMessage.toLowerCase().includes('performance') || userMessage.toLowerCase().includes('desempenho')) { | |
| response = `Analisando performance do aplicativo no ${platformName}... 📊 CPU: 15% | Memória: 128MB | FPS: 60`; | |
| } else if (userMessage.toLowerCase().includes('navegar') || userMessage.toLowerCase().includes('navigate')) { | |
| response = `Navegando pela interface do ${platformName}... 🔄 Navegação concluída com sucesso.`; | |
| } else if (userMessage.toLowerCase().includes('compatibilidade') || userMessage.toLowerCase().includes('compatibility')) { | |
| response = `Analisando compatibilidade entre Android e iOS... 🔍 Teste de compatibilidade em andamento.`; | |
| } else { | |
| response = `Comando recebido! Estou processando sua solicitação no emulador ${platformName}. ✅`; | |
| } | |
| messageDiv.innerHTML = ` | |
| <div class="message-avatar"> | |
| <i data-feather="cpu" class="w-5 h-5"></i> | |
| </div> | |
| <div class="message-content"> | |
| <p>${response}</p> | |
| <span class="message-time">Agora</span> | |
| </div> | |
| `; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| feather.replace(); | |
| } | |
| // Permitir enviar com Enter | |
| document.getElementById('chatInput').addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| // Drag and drop para BDD | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatArea = document.getElementById('chatContainer'); | |
| const bddInput = document.getElementById('bddUpload'); | |
| if (chatArea && bddInput) { | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| chatArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| chatArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| chatArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| chatArea.style.border = '2px dashed #ff580f'; | |
| } | |
| function unhighlight() { | |
| chatArea.style.border = 'none'; | |
| } | |
| chatArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length > 0 && files[0].name.endsWith('.txt')) { | |
| bddInput.files = files; | |
| handleBddUpload(files); | |
| } | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |