ProofShot — Flujo de Trabajo de Verificación Visual
ProofShot es un CLI de código abierto, independiente del agente, que permite verificar tu propio trabajo en un navegador real: prueba en video, capturas de pantalla e informes de errores, sin bloqueo de proveedor.
Cuándo usarlo
Usa ProofShot después de:
- Construir una nueva característica o página de UI
- Modificar componentes de UI existentes
- Corregir un error visual
- Cualquier cambio que afecte lo que el usuario ve
El flujo de trabajo (siempre sigue estos 3 pasos)
Paso 1: Inicia la sesión
proofshot start --run "tu-comando-de-desarrollo" --port PUERTO --description "lo que estás a punto de verificar"
Esto abre un navegador y comienza a grabar. Si el puerto ya está en uso, proofshot eliminará el proceso existente automáticamente.
Usa siempre --run para que proofshot inicie y capture la salida de tu servidor de desarrollo (los registros del servidor aparecen en el informe de prueba).
Solo omite --run si el servidor fue iniciado explícitamente por el usuario u otro proceso; sin él, no se capturan registros del servidor.
Si una sesión anterior no se detuvo limpiamente, agrega --force para sobrescribirla.
Paso 2: Conduce el navegador y prueba
Usa proofshot exec para navegar, interactuar y verificar:
proofshot exec snapshot -i # Ver elementos interactivos
proofshot exec open http://localhost:PUERTO/pagina # Navegar a una página
proofshot exec click @e3 # Hacer clic en un botón
proofshot exec fill @e2 "[email protected]" # Rellenar un campo de formulario
proofshot exec screenshot paso-NOMBRE.png # Capturar momentos clave
Toma capturas de pantalla en momentos importantes: estas se convierten en la prueba visual. Verifica lo que esperas ver leyendo la salida del snapshot.
Paso 3: Detén y empaqueta la prueba
proofshot stop
Esto detiene la grabación, recopila errores de consola + servidor y genera un SUMMARY.md con video, capturas de pantalla e informe de errores.
Paso 4 (opcional): Publica la prueba en el PR
proofshot pr # Detectar automáticamente el PR desde la rama actual
proofshot pr 42 # Apuntar a un número de PR específico
Esto sube capturas de pantalla y video a GitHub y publica un comentario formateado en el PR. Por defecto, usa la API oficial de contenidos de GitHub en una rama proofshot-artifacts. Usa --upload-provider github-web-attachments si quieres específicamente URLs de adjuntos de GitHub.
Consejos
- Incluye siempre una
--descriptionsignificativa para que el humano sepa qué se probó - Toma capturas de pantalla ANTES y DESPUÉS de las acciones clave (por ejemplo, antes de enviar un formulario, después de la redirección)
- Si encuentras errores durante la verificación, corrígelos y vuelve a ejecutar el flujo de trabajo
- Usa
proofshot prdespués de detener para adjuntar la prueba directamente al pull request