Documentação e explicação detalhada de um workflow de auto-validação…
INEMA
de segurança * Problemas visuais * Falta de proteção contra invasão * Problemas de validação
👉 É como um inspetor procurando rachaduras antes do prédio abrir.
🚀 3) Phase 2 – Iniciar o sistema⌗
Depois que estudou tudo, ele:
- Liga o sistema
- Abre o site no navegador
- Confirma que carregou
- Tira a primeira foto da tela
👉 É como abrir a loja e tirar a primeira foto da vitrine.
📋 4) Phase 3 – Criar lista de testes⌗
Agora ele cria uma lista de tarefas.
Para cada “caminho do usuário” ele cria uma missão.
Exemplo:
- Testar cadastro
- Testar login
- Testar criação de perfil
- Testar exclusão de conta
E ainda cria uma missão final:
- Testar no celular, tablet e computador
🖱 5) Phase 4 – Testar de verdade⌗
Agora começa o teste real.
Para cada tarefa:
5a) Teste no navegador⌗
Ele:
- Abre a página
- Identifica botões
- Clica
- Preenche formulários
- Navega
- Tira screenshot
- Analisa se ficou bonito
- Verifica se apareceu erro no console (erros invisíveis)
👉 Ele literalmente usa o site como um humano.
5b) Conferir banco de dados⌗
Se o usuário criou conta:
Ele vai no banco e verifica:
- O usuário foi criado?
- Os dados estão corretos?
- Nada ficou duplicado?
- Nada ficou quebrado?
👉 É como confirmar no sistema interno se o pedido realmente foi registrado.
5c) Se encontrar erro⌗
Se algo estiver errado:
- Ele documenta o problema
- Corrige o código
- Testa novamente
- Tira nova screenshot
👉 Ele não só encontra problema — ele tenta consertar.
5d) Teste de responsividade⌗
Ele testa em três tamanhos:
- 📱 Celular
- 📲 Tablet
- 💻 Computador
Verifica:
- Se nada ficou torto
- Se botão não saiu da tela
- Se texto não quebrou
👉 É como testar se o site funciona bem no celular e no PC.
🧹 6) Cleanup (Limpeza)⌗
Depois que termina:
- Fecha o navegador
- Desliga o sistema
Como guardar ferramentas depois do trabalho.
📄 7) Report (Relatório final)⌗
Ele mostra:
- Quantos caminhos testou
- Quantas imagens tirou
- Quantos erros encontrou
- Quantos corrigiu
- Quais ainda precisam ser corrigidos
E pergunta se você quer um relatório completo em arquivo.
🎯 Em resumo simples⌗
Isso é:
Um robô super detalhista que testa o site inteiro como um usuário real, verifica se os dados foram salvos corretamente, encontra erros, conserta alguns e depois entrega um relatório completo.
🤖 Por que isso é avançado?⌗
Porque ele:
- Não só olha a tela
- Não só clica
- Não só testa visual
- Não só testa banco
Ele faz tudo junto.
É um teste de nível profissional.
Corrige o código 3. Testa novamente 4. Tira nova screenshot
👉 Ele não só encontra problema — ele tenta consertar.
5d) Teste de responsividade⌗
Ele testa em três tamanhos:
- 📱 Celular
- 📲 Tablet
- 💻 Computador
Verifica:
- Se nada ficou torto
- Se botão não saiu da tela
- Se texto não quebrou
👉 É como testar se o site funciona bem no celular e no PC.
🧹 6) Cleanup (Limpeza)⌗
Depois que termina:
- Fecha o navegador
- Desliga o sistema
Como guardar ferramentas depois do trabalho.
📄 7) Report (Relatório final)⌗
Ele mostra:
- Quantos caminhos testou
- Quantas imagens tirou
- Quantos erros encontrou
- Quantos corrigiu
- Quais ainda precisam ser corrigidos
E pergunta se você quer um relatório completo em arquivo.
🎯 Em resumo simples⌗
Isso é:
Um robô super detalhista que testa o site inteiro como um usuário real, verifica se os dados foram salvos corretamente, encontra erros, conserta alguns e depois entrega um relatório completo.
🤖 Por que isso é avançado?⌗
Porque ele:
- Não só olha a tela
- Não só clica
- Não só testa visual
- Não só testa banco
Ele faz tudo junto.
É um teste de nível profissional.
Se você quiser, posso explicar agora:
- 💡 O que é banco de dados
- 💡 O que é frontend e backend
- 💡 O que é bug
- 💡 O que é teste E2E
- 💡 O que significa corrigir código
- 💡 Se isso é seguro ou arriscado
Qual você quer entender melhor?Perfeito 👍 Vou explicar como se você nunca tivesse visto nada de programação.
Pense nisso como um robô inspetor de qualidade que testa um aplicativo inteiro sozinho, do começo ao fim, como se fosse um usuário real.
Vou explicar parte por parte.
🌍 O que esse documento faz no geral?⌗
Ele descreve um processo automático que:
- Verifica se o ambiente do computador está correto
- Estuda o sistema inteiro antes de testar
- Abre o site como um usuário normal
- Clica em tudo
- Preenche formulários
- Confere se os dados foram salvos corretamente
- Procura erros escondidos
- Corrige problemas encontrados
- Gera um relatório final
É como contratar um super testador automático.
🧭 Agora vamos explicar cada parte⌗
🔎 1) Pre-flight Check (Checagem antes de começar)⌗
É como verificar se o carro está pronto antes de viajar.
1.1 Platform Check (Checar sistema operacional)⌗
Ele verifica se o computador é compatível.
Alguns programas só funcionam em:
- Linux
- Mac
- WSL
Se estiver no Windows normal, ele para tudo.
👉 É como dizer: "Esse tipo de ferramenta só funciona em certos computadores."
1.2 Frontend Check (Verificar se existe uma interface visual)⌗
Ele confere se existe um site para abrir no navegador.
Se o sistema for só “por trás” (sem tela, só código), ele não pode fazer teste visual.
👉 É como perguntar: “Tem uma tela para eu clicar ou é só um sistema invisível?”
Se não tiver tela, ele para.
1.3 Instalar ferramenta de teste⌗
Ele verifica se a ferramenta chamada agent-browser está instalada.
Essa ferramenta é o que permite:
- Abrir o site
- Clicar
- Tirar screenshot
- Simular usuário
Se não estiver instalada, ele instala automaticamente.
🧠 2) Phase 1 – Pesquisa (Antes de testar)⌗
Antes de sair clicando, ele estuda o sistema.
Ele cria 3 “mini investigadores” trabalhando ao mesmo tempo.
🧩 Sub-agente 1 – Entender o sistema⌗
Ele descobre:
- Como iniciar o sistema
- Onde faz login
- Quais páginas existem
- Quais caminhos o usuário pode fazer
- Quais botões existem
- Quais formulários existem
👉 É como desenhar o mapa do shopping antes de entrar.
🗄 Sub-agente 2 – Entender o banco de dados⌗
O banco de dados é onde ficam guardadas as informações:
- Usuários
- Senhas
- Produtos
- Pedidos
- Configurações
Ele descobre:
- Que tipo de banco é usado
- Quais tabelas existem
- Quais dados são criados quando o usuário faz algo
- Como verificar se os dados foram realmente salvos
👉 É como verificar o cofre para ver se o dinheiro foi guardado.
🐛 Sub-agente 3 – Caçar possíveis problemas⌗
Ele procura:
- Erros de lógica
- Falhas
Vou explicar como se você nunca tivesse visto nada de programação.
Pense nisso como um robô inspetor de qualidade que testa um aplicativo inteiro sozinho, do começo ao fim, como se fosse um usuário real.
Vou explicar parte por parte.
🌍 O que esse documento faz no geral?⌗
Ele descreve um processo automático que:
- Verifica se o ambiente do computador está correto
- Estuda o sistema inteiro antes de testar
- Abre o site como um usuário normal
- Clica em tudo
- Preenche formulários
- Confere se os dados foram salvos corretamente
- Procura erros escondidos
- Corrige problemas encontrados
- Gera um relatório final
É como contratar um super testador automático.
🧭 Agora vamos explicar cada parte⌗
🔎 1) Pre-flight Check (Checagem antes de começar)⌗
É como verificar se o carro está pronto antes de viajar.
1.1 Platform Check (Checar sistema operacional)⌗
Ele verifica se o computador é compatível.
Alguns programas só funcionam em:
- Linux
- Mac
- WSL
Se estiver no Windows normal, ele para tudo.
👉 É como dizer: "Esse tipo de ferramenta só funciona em certos computadores."
1.2 Frontend Check (Verificar se existe uma interface visual)⌗
Ele confere se existe um site para abrir no navegador.
Se o sistema for só “por trás” (sem tela, só código), ele não pode fazer teste visual.
👉 É como perguntar: “Tem uma tela para eu clicar ou é só um sistema invisível?”
Se não tiver tela, ele para.
1.3 Instalar ferramenta de teste⌗
Ele verifica se a ferramenta chamada agent-browser está instalada.
Essa ferramenta é o que permite:
- Abrir o site
- Clicar
- Tirar screenshot
- Simular usuário
Se não estiver instalada, ele instala automaticamente.
🧠 2) Phase 1 – Pesquisa (Antes de testar)⌗
Antes de sair clicando, ele estuda o sistema.
Ele cria 3 “mini investigadores” trabalhando ao mesmo tempo.
🧩 Sub-agente 1 – Entender o sistema⌗
Ele descobre:
- Como iniciar o sistema
- Onde faz login
- Quais páginas existem
- Quais caminhos o usuário pode fazer
- Quais botões existem
- Quais formulários existem
👉 É como desenhar o mapa do shopping antes de entrar.
🗄 Sub-agente 2 – Entender o banco de dados⌗
O banco de dados é onde ficam guardadas as informações:
- Usuários
- Senhas
- Produtos
- Pedidos
- Configurações
Ele descobre:
- Que tipo de banco é usado
- Quais tabelas existem
- Quais dados são criados quando o usuário faz algo
- Como verificar se os dados foram realmente salvos
👉 É como verificar o cofre para ver se o dinheiro foi guardado.
🐛 Sub-agente 3 – Caçar possíveis problemas⌗
Ele procura:
- Erros de lógica
- Falhas de segurança
- Problemas visuais
- Falta de proteção contra invasão
- Problemas de validação
👉 É como um inspetor procurando rachaduras antes do prédio abrir.
🚀 3) Phase 2 – Iniciar o sistema⌗
Depois que estudou tudo, ele:
- Liga o sistema
- Abre o site no navegador
- Confirma que carregou
- Tira a primeira foto da tela
👉 É como abrir a loja e tirar a primeira foto da vitrine.
📋 4) Phase 3 – Criar lista de testes⌗
Agora ele cria uma lista de tarefas.
Para cada “caminho do usuário” ele cria uma missão.
Exemplo:
- Testar cadastro
- Testar login
- Testar criação de perfil
- Testar exclusão de conta
E ainda cria uma missão final:
- Testar no celular, tablet e computador
🖱 5) Phase 4 – Testar de verdade⌗
Agora começa o teste real.
Para cada tarefa:
5a) Teste no navegador⌗
Ele:
- Abre a página
- Identifica botões
- Clica
- Preenche formulários
- Navega
- Tira screenshot
- Analisa se ficou bonito
- Verifica se apareceu erro no console (erros invisíveis)
👉 Ele literalmente usa o site como um humano.
5b) Conferir banco de dados⌗
Se o usuário criou conta:
Ele vai no banco e verifica:
- O usuário foi criado?
- Os dados estão corretos?
- Nada ficou duplicado?
- Nada ficou quebrado?
👉 É como confirmar no sistema interno se o pedido realmente foi registrado.
5c) Se encontrar erro⌗
Se algo estiver errado:
- Ele documenta o problema 2.
vou fazer dublagem
github.com/inematds/colebuilder ↗
📌 Conclusão⌗
Esse comando transforma agentes de código em sistemas quase autônomos de validação, criando um fluxo de:
Implementar → Testar como usuário → Corrigir bloqueios → Relatar → Iterar
É uma forma prática de tornar agentes de IA mais confiáveis em projetos reais.
🎯 Ideia Principal⌗
Os assistentes de código com IA não validam bem o próprio trabalho sozinhos. O autor criou um comando único de validação end-to-end (E2E) que transforma o agente em um sistema de “self-healing” (auto-correção), capaz de:
- Testar a aplicação como um usuário real
- Detectar erros de lógica
- Validar banco de dados
- Corrigir bloqueios automaticamente
- Gerar relatório estruturado final
🚀 O Problema⌗
- IA gera código muito rápido.
- A validação manual se torna impossível de acompanhar.
- O código gerado continua sendo responsabilidade do desenvolvedor.
- Revisar centenas/milhares de linhas é mentalmente pesado.
🧠 A Solução: Workflow de Auto-Validação (Self-Healing AI Workflow)⌗
Um comando /e2e test que executa um processo estruturado em 6 etapas principais.
Funciona em qualquer codebase com frontend.
🧩 Estrutura do Workflow⌗
1️⃣ Checagem de Pré-Requisitos⌗
- Exige frontend
- Usa Vercel Agent Browser CLI (ou ferramenta similar)
- No Windows → usar WSL
2️⃣ Fase de Pesquisa (Research Phase)⌗
Três subagentes rodam em paralelo:
- 📦 Entende estrutura do app e jornadas do usuário
- 🗄️ Analisa schema do banco de dados
- 🐛 Faz code review (caça bugs e erros de lógica)
Depois disso, o agente principal recebe todo o contexto.
3️⃣ Inicialização do App⌗
- Sobe o servidor de desenvolvimento
- Resolve erros automaticamente
- Abre o app via browser automation
- Tira screenshot inicial
4️⃣ Criação da Lista de Tarefas⌗
O agente gera uma lista de jornadas reais de usuário, como:
- Criar conta
- Fazer login
- Editar perfil
- Criar registros
- Atualizar dados
- Deletar dados
5️⃣ Loop de Teste Sistemático (For Loop Interno)⌗
Para cada jornada:
🔎 Ele:⌗
- Navega usando browser automation
- Interage com UI
- Tira screenshots
- Consulta banco de dados
- Verifica se registros foram criados/atualizados/deletados
🔁 Se houver erro bloqueante:⌗
- Corrige o código
- Reexecuta o teste
- Tira novos screenshots
- Valida novamente
Esse loop continua até a jornada funcionar completamente.
⚠️ Ele corrige apenas problemas críticos (blockers). Problemas médios ou pequenos ficam para revisão humana.
6️⃣ Testes Responsivos⌗
Checagem básica de:
- Mobile
- Tablet
- Desktop
📊 Relatório Final Estruturado⌗
Sempre no mesmo formato:
- ✅ O que foi corrigido automaticamente
- ⚠️ Problemas restantes
- 📸 Screenshots gerados
- 📋 Jornadas testadas
Pode gerar relatório Markdown para nova sessão com o agente.
🗄️ Validação de Banco de Dados⌗
O agente:
- Executa queries diretas
- Confirma criação/atualização de registros
- Detecta inconsistências que não aparecem na UI
Dica extra:
- Usar banco isolado (ex: Neon branch) para não sujar ambiente principal
🔄 Uso Durante Desenvolvimento (PIV Loop)⌗
O autor recomenda integrar ao processo:
PIV = Plan → Implement → Validate⌗
No plano da feature, incluir:
“Use o E2E test skill para validação completa após implementação.”
Assim cada feature já passa automaticamente por regressão.
💰 Custo e Tokens⌗
- Processo é pesado e demorado
- Não é feito para ser rápido
- É feito para ser completo
- Economiza tokens no longo prazo (menos retrabalho)
🌐 Ferramentas Utilizadas⌗
- Claude Code Skill
- Vercel Agent Browser CLI
- PostgreSQL (Neon)
- Screenshots automáticos
- Bright Data (para scraping web externo, patrocinador)
🏆 Principais Benefícios⌗
- Reduz carga mental
- Automatiza validação
- Detecta bugs lógicos
- Verifica banco + frontend
- Gera documentação automática
- Cria ciclo de auto-correção
- Funciona em qualquer app com frontend
⚠️ Limitações⌗
- Só funciona bem para apps com frontend
- É pesado em tokens
- Pode demorar bastante
- Não resolve todos os problemas sozinho
🧠 Conceito Central⌗
Delegar o máximo possível da validação para a IA mas manter o controle humano sobre decisões finais.
Workflow de Auto-Validação
1