ProofShot: Verificação de Navegador para Agentes de IA de Codificação

ProofShot é uma CLI de código aberto e independente de agente que dá aos agentes de IA de codificação a capacidade de verificar recursos de UI que eles constroem gravando sessões do navegador, capturando screenshots e coletando erros. Ele aborda o problema onde os agentes escrevem código mas não conseguem ver como ele realmente aparece no navegador ou detectar problemas de layout e erros do console.

Como Funciona

A ferramenta segue um fluxo de trabalho de três etapas: iniciar, testar, parar. O agente de IA controla o navegador usando comandos agent-browser enquanto o ProofShot grava a sessão.

Uso básico:

proofshot start --run "npm run dev" --port 3000
# agente navega, clica, tira screenshots
proofshot stop

Exemplo detalhado de fluxo de trabalho:

# 1. Iniciar — abrir navegador, começar gravação, capturar logs do servidor
proofshot start --run "npm run dev" --port 3000 --description "Verificação de formulário de login"

2. Testar — o agente de IA controla o navegador
agent-browser snapshot -i  # Ver elementos interativos
agent-browser open http://localhost:3000/login  # Navegar
agent-browser fill @e2 "[email protected]"  # Preencher formulário
agent-browser click @e5  # Clicar em enviar
agent-browser screenshot ./proofshot-artifacts/step-login.png  # Capturar prova
3. Parar — agrupar vídeo + screenshots + erros em artefatos de prova
proofshot stop

Principais Recursos

• Funciona com qualquer agente de IA de codificação que possa executar comandos shell (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot, etc.)
• Empacotado como uma habilidade para que agentes de IA entendam como usá-lo
• Baseado no agent-browser da Vercel Labs (descrito como "muito melhor e mais rápido que Playwright MCP")
• Não é um framework de teste — não decide aprovação/reprovação, apenas fornece evidências
• Gera arquivos HTML autônomos com vídeo, screenshots e logs
• Pode enviar artefatos para PRs do GitHub como comentários inline com proofshot pr

Instalação e Configuração

npm install -g proofshot
proofshot install

O primeiro comando instala a CLI e o agent-browser (com Chromium headless). O segundo detecta suas ferramentas de codificação de IA e instala a habilidade ProofShot no nível do usuário — funciona automaticamente em todos os projetos.

Artefatos de Saída

Cada sessão produz uma pasta com timestamp em ./proofshot-artifacts/ contendo:

• session.webm — Gravação de vídeo de toda a sessão
• viewer.html — Visualizador interativo independente com barra de progresso, linha do tempo e abas de Console/Log do Servidor
• SUMMARY.md — Relatório Markdown com erros, screenshots e vídeo
• step-*.png — Screenshots capturados em momentos-chave
• session-log.json — Linha do tempo de ações com timestamps e dados de elementos
• server.log — stdout/stderr do servidor de desenvolvimento (ao usar --run)
• console-output.log — Saída do console do navegador

Comandos Disponíveis

• proofshot install — Detectar ferramentas de codificação de IA e instalar habilidade ProofShot
• proofshot start — Iniciar sessão de verificação com navegador, gravação, captura de erros
• proofshot stop — Parar gravação, coletar erros, gerar artefatos de prova
• proofshot exec — Comando de passagem

A ferramenta é completamente gratuita e de código aberto, sem lock-in de fornecedor ou dependência de nuvem. É projetada para desenvolvedores que usam agentes de IA para construir recursos de UI e querem verificar os resultados sem abrir manualmente o navegador cada vez.