ProofShot: Verificación del Navegador para Agentes de IA de Programación

ProofShot es una CLI de código abierto y agnóstica a agentes que otorga a los agentes de IA de programación la capacidad de verificar las características de la interfaz de usuario que construyen grabando sesiones del navegador, capturando capturas de pantalla y recopilando errores. Aborda el problema en el que los agentes escriben código pero no pueden ver cómo se ve realmente en el navegador o detectar problemas de diseño y errores de la consola.

Cómo Funciona

La herramienta sigue un flujo de trabajo de tres pasos: iniciar, probar, detener. El agente de IA controla el navegador usando comandos de agente-navegador mientras ProofShot graba la sesión.

Uso básico:

proofshot start --run "npm run dev" --port 3000
# el agente navega, hace clic, toma capturas de pantalla
proofshot stop

Ejemplo detallado del flujo de trabajo:

# 1. Iniciar — abrir navegador, comenzar grabación, capturar registros del servidor
proofshot start --run "npm run dev" --port 3000 --description "Verificación del formulario de inicio de sesión"

2. Probar — el agente de IA controla el navegador
agent-browser snapshot -i  # Ver elementos interactivos
agent-browser open http://localhost:3000/login  # Navegar
agent-browser fill @e2 "[email protected]"  # Rellenar formulario
agent-browser click @e5  # Hacer clic en enviar
agent-browser screenshot ./proofshot-artifacts/step-login.png  # Capturar prueba
3. Detener — empaquetar video + capturas de pantalla + errores en artefactos de prueba
proofshot stop

Características Principales

• Funciona con cualquier agente de IA de programación que pueda ejecutar comandos de shell (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot, etc.)
• Empaquetado como una habilidad para que los agentes de IA entiendan cómo usarlo
• Basado en agent-browser de Vercel Labs (descrito como "mucho mejor y más rápido que Playwright MCP")
• No es un framework de pruebas — no decide aprobado/reprobado, solo proporciona evidencia
• Genera archivos HTML autónomos con video, capturas de pantalla y registros
• Puede subir artefactos a PRs de GitHub como comentarios en línea con proofshot pr

Instalación y Configuración

npm install -g proofshot
proofshot install

El primer comando instala la CLI y agent-browser (con Chromium sin cabeza). El segundo detecta tus herramientas de IA de programación e instala la habilidad ProofShot a nivel de usuario — funciona automáticamente en todos los proyectos.

Artefactos de Salida

Cada sesión produce una carpeta con marca de tiempo en ./proofshot-artifacts/ que contiene:

• session.webm — Grabación de video de toda la sesión
• viewer.html — Visor interactivo independiente con barra de desplazamiento, línea de tiempo y pestañas de Registro de Consola/Servidor
• SUMMARY.md — Informe en Markdown con errores, capturas de pantalla y video
• step-*.png — Capturas de pantalla capturadas en momentos clave
• session-log.json — Línea de tiempo de acciones con marcas de tiempo y datos de elementos
• server.log — Salida stdout/stderr del servidor de desarrollo (al usar --run)
• console-output.log — Salida de la consola del navegador

Comandos Disponibles

• proofshot install — Detectar herramientas de IA de programación e instalar la habilidad ProofShot
• proofshot start — Iniciar sesión de verificación con navegador, grabación, captura de errores
• proofshot stop — Detener grabación, recopilar errores, generar artefactos de prueba
• proofshot exec — Comando de paso a través

La herramienta es completamente gratuita y de código abierto, sin dependencia de proveedores ni de la nube. Está diseñada para desarrolladores que usan agentes de IA para construir características de interfaz de usuario y quieren verificar los resultados sin abrir manualmente el navegador cada vez.