O que ProofShot — Fluxo de Verificação Visual faz?
ProofShot é um CLI de código aberto e independente de agente que permite verificar seu próprio trabalho em um navegador real — prova em vídeo, capturas de tela e relatórios de erro, sem dependência de fornecedor.
Quando usar
Use o ProofShot após:
- Criar um novo recurso ou página de UI
- Modificar componentes de UI existentes
- Corrigir um bug visual
- Qualquer alteração que afete o que o usuário vê
O fluxo de trabalho (siga sempre estas 3 etapas)
Etapa 1: Iniciar a sessão
proofshot start --run "seu-comando-de-desenvolvimento" --port PORTA --description "o que você está prestes a verificar"
Isso abre um navegador e começa a gravar. Se a porta já estiver em uso, o proofshot irá matar o processo existente automaticamente.
Sempre use --run para permitir que o proofshot inicie e capture a saída do seu servidor de desenvolvimento (os logs do servidor aparecem no relatório de prova).
Apenas omita --run se o servidor foi iniciado explicitamente pelo usuário ou por outro processo — sem ele, nenhum log do servidor é capturado.
Se uma sessão anterior não foi interrompida corretamente, adicione --force para sobrescrevê-la.
Etapa 2: Controlar o navegador e testar
Use o proofshot exec para navegar, interagir e verificar:
proofshot exec snapshot -i # Ver elementos interativos
proofshot exec open http://localhost:PORTA/pagina # Navegar para uma página
proofshot exec click @e3 # Clicar em um botão
proofshot exec fill @e2 "[email protected]" # Preencher um campo de formulário
proofshot exec screenshot etapa-NOME.png # Capturar momentos-chave
Tire capturas de tela em momentos importantes — elas se tornam a prova visual. Verifique o que você espera ver lendo a saída do snapshot.
Etapa 3: Parar e empacotar a prova
proofshot stop
Isso para a gravação, coleta erros do console e do servidor, e gera um SUMMARY.md com vídeo, capturas de tela e relatório de erro.
Etapa 4 (opcional): Postar a prova no PR
proofshot pr # Detectar PR automaticamente da branch atual
proofshot pr 42 # Especificar um número de PR
Isso envia capturas de tela e vídeo para o GitHub e posta um comentário formatado no PR. Por padrão usa a API oficial de conteúdos do GitHub em uma branch proofshot-artifacts. Use --upload-provider github-web-attachments se você quiser especificamente URLs de anexos do GitHub.
Dicas
- Sempre inclua um --description significativo para que o humano saiba o que foi testado
- Tire capturas de tela ANTES e DEPOIS de ações-chave (por exemplo, antes do envio do formulário, após o redirecionamento)
- Se encontrar erros durante a verificação, corrija-os e reexecute o fluxo de trabalho
- Use
proofshot prapós parar para anexar a prova diretamente ao pull request