AmElmo/proofshot

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

¿Qué es proofshot?

ProofShot es una herramienta CLI de código abierto, agnóstica de agentes, que permite verificar visualmente el trabajo propio en un navegador real, proporcionando video, capturas de pantalla e informes de errores, sin dependencia de un proveedor específico. Su flujo de trabajo consta de tres pasos principales: inicio de la sesión, donde se abre el navegador y comienza la grabación; la conducción del navegador para interactuar y probar; y la detención, que genera un resumen con el video, capturas de pantalla e informe de errores. Además, ofrece la opción de publicar la prueba directamente en una solicitud de extracción (PR) de GitHub. Es ideal para desarrolladores y agentes de IA que necesitan validar cambios visuales en la interfaz de usuario, asegurando que cada modificación sea revisada y documentada de manera efectiva. Compatible con cualquier plataforma que pueda ejecutar un navegador, ProofShot se integra fácilmente en flujos de trabajo de desarrollo, ofreciendo una verificación visual robusta y autónoma.

Compatible con~Claude Code~Codex CLI~Cursor✓OpenCode

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

Documentación

ProofShot - Flujo de trabajo de verificación visual

ProofShot es una CLI de código abierto y agnóstica de agente que te permite verificar tu propio trabajo en un navegador real - prueba en video, capturas de pantalla e informes de errores, sin dependencia de proveedor.

Cuándo usarlo

Usa ProofShot después de:

Construir una nueva característica o página de interfaz de usuario
Modificar componentes de interfaz de usuario 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: Iniciar 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.

Siempre usa --run para que proofshot inicie y capture la salida de tu servidor de desarrollo (los registros del servidor aparecen en el informe de prueba). Omite --run solo 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, añade --force para sobrescribirla.

Paso 2: Conducir el navegador y probar

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 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 errores.

Paso 4 (opcional): Publicar la prueba en el PR

proofshot pr              # Detecta automáticamente el PR desde la rama actual
proofshot pr 42           # Apunta 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 contenido de GitHub en una rama proofshot-artifacts. Usa --upload-provider github-web-attachments si específicamente quieres URLs de adjuntos de GitHub.

Consejos

Siempre incluye un --description significativo para que el humano sepa qué se probó
Toma capturas de pantalla ANTES y DESPUÉS de acciones clave (por ejemplo, antes de enviar un formulario, después de una redirección)
Si encuentras errores durante la verificación, corrígelos y vuelve a ejecutar el flujo de trabajo
Usa proofshot pr después de detener para adjuntar la prueba directamente al pull request