AmElmo/proofshot

Verificación visual de características de UI. Úselo después de construir o modificar cualquier componente de UI, página o característica visual. Inicia una sesión de verificación con grabación de video y captura de errores, luego usted conduce el navegador para probar, y luego se detiene para empaquetar artefactos de prueba para el humano.

¿Qué es proofshot?

ProofShot es una herramienta CLI de código abierto y agnóstica de agente que permite a los desarrolladores verificar visualmente sus cambios de UI en un navegador real, grabando video, capturando pantallas y reportando errores sin dependencia de un proveedor específico. Es especialmente útil después de construir o modificar componentes de UI, corregir errores visuales o cualquier cambio que afecte la apariencia que ve el usuario. La herramienta sigue un flujo de trabajo de 3 pasos: iniciar la sesión con `proofshot start`, conducir el navegador y probar usando comandos como `proofshot exec` para navegar, hacer clic, llenar formularios y capturar pantallas, y detener la sesión con `proofshot stop` para generar un informe con video, pantallas y errores. Además, ProofShot puede publicar automáticamente las pruebas en un Pull Request de GitHub usando `proofshot pr`, facilitando la revisión humana. Está diseñado para funcionar en cualquier plataforma que soporte Node.js y un navegador compatible con Playwright.

Compatible con~Claude Code~Codex CLI~Cursor

npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/skills/claude

Documentación

ProofShot — Flujo de Trabajo de Verificación Visual

ProofShot es un CLI de código abierto y agnóstico de agente que le permite verificar su propio trabajo en un navegador real: prueba en video, capturas de pantalla e informes de error, sin dependencia de un proveedor.

Cuándo usarlo

Use 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 siga estos 3 pasos)

Paso 1: Iniciar la sesión

proofshot start --run "su-comando-de-desarrollo" --port PUERTO --description "lo que está a punto de verificar"

Esto abre un navegador y comienza la grabación. Si el puerto ya está en uso, proofshot terminará el proceso existente automáticamente.

Siempre use --run para que proofshot inicie y capture la salida de su servidor de desarrollo (los registros del servidor aparecen en el informe de prueba). Solo omita --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 de forma limpia, agregue --force para anularla.

Paso 2: Conducir el navegador y probar

Use 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]"                    # Llenar un campo de formulario
proofshot exec screenshot paso-NOMBRE.png                     # Capturar momentos clave

Tome capturas de pantalla en momentos importantes; estas se convierten en la prueba visual. Verifique lo que espera ver leyendo la salida de snapshot.

Paso 3: Detener y empaquetar la prueba

proofshot stop

Esto detiene la grabación, recopila errores de consola y del servidor, y genera un SUMMARY.md con video, capturas de pantalla e informe de error.

Paso 4 (opcional): Publicar 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 las capturas de pantalla y el 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. Use --upload-provider github-web-attachments si desea específicamente URLs de adjuntos de GitHub.

Consejos

Incluya siempre un --description significativo para que el humano sepa qué se probó
Tome capturas de pantalla ANTES y DESPUÉS de acciones clave (por ejemplo, antes de enviar un formulario, después de la redirección)
Si encuentra errores durante la verificación, corríjalos y vuelva a ejecutar el flujo de trabajo
Use proofshot pr después de detener para adjuntar la prueba directamente al Pull Request