ProofShot : Vérification du navigateur pour les agents d'IA de codage

ProofShot est un CLI open-source et indépendant des agents qui donne aux agents d'IA de codage la capacité de vérifier les fonctionnalités de l'interface utilisateur qu'ils construisent en enregistrant des sessions de navigation, en capturant des captures d'écran et en collectant les erreurs. Il résout le problème où les agents écrivent du code mais ne peuvent pas voir à quoi il ressemble réellement dans le navigateur ou détecter les problèmes de mise en page et les erreurs de la console.

Comment ça fonctionne

L'outil suit un flux de travail en trois étapes : démarrer, tester, arrêter. L'agent d'IA pilote le navigateur en utilisant des commandes agent-browser pendant que ProofShot enregistre la session.

Utilisation de base :

proofshot start --run "npm run dev" --port 3000
# l'agent navigue, clique, prend des captures d'écran
proofshot stop

Exemple détaillé du flux de travail :

# 1. Démarrer — ouvrir le navigateur, commencer l'enregistrement, capturer les logs du serveur
proofshot start --run "npm run dev" --port 3000 --description "Vérification du formulaire de connexion"

2. Tester — l'agent d'IA pilote le navigateur
agent-browser snapshot -i  # Voir les éléments interactifs
agent-browser open http://localhost:3000/login  # Naviguer
agent-browser fill @e2 "[email protected]"  # Remplir le formulaire
agent-browser click @e5  # Cliquer sur soumettre
agent-browser screenshot ./proofshot-artifacts/step-login.png  # Capturer la preuve
3. Arrêter — regrouper la vidéo + captures d'écran + erreurs dans les artefacts de preuve
proofshot stop

Fonctionnalités principales

• Fonctionne avec tout agent d'IA de codage capable d'exécuter des commandes shell (Claude Code, Cursor, Codex, Gemini CLI, Windsurf, GitHub Copilot, etc.)
• Emballé en tant que compétence pour que les agents d'IA comprennent comment l'utiliser
• Basé sur agent-browser de Vercel Labs (décrit comme "bien meilleur et plus rapide que Playwright MCP")
• N'est pas un framework de test — ne décide pas de la réussite/échec, fournit seulement des preuves
• Génère des fichiers HTML autonomes avec vidéo, captures d'écran et logs
• Peut télécharger les artefacts vers les PR GitHub en tant que commentaires en ligne avec proofshot pr

Installation et configuration

npm install -g proofshot
proofshot install

La première commande installe le CLI et agent-browser (avec Chromium headless). La seconde détecte vos outils de codage IA et installe la compétence ProofShot au niveau utilisateur — fonctionne automatiquement sur tous les projets.

Artefacts de sortie

Chaque session produit un dossier horodaté dans ./proofshot-artifacts/ contenant :

• session.webm — Enregistrement vidéo de toute la session
• viewer.html — Visionneuse interactive autonome avec barre de défilement, chronologie et onglets Console/Logs serveur
• SUMMARY.md — Rapport Markdown avec erreurs, captures d'écran et vidéo
• step-*.png — Captures d'écran capturées aux moments clés
• session-log.json — Chronologie des actions avec horodatages et données d'éléments
• server.log — Sortie stdout/stderr du serveur de développement (lors de l'utilisation de --run)
• console-output.log — Sortie de la console du navigateur

Commandes disponibles

• proofshot install — Détecter les outils de codage IA et installer la compétence ProofShot
• proofshot start — Démarrer une session de vérification avec navigateur, enregistrement, capture d'erreurs
• proofshot stop — Arrêter l'enregistrement, collecter les erreurs, générer les artefacts de preuve
• proofshot exec — Commande de transmission

L'outil est entièrement gratuit et open source, sans verrouillage fournisseur ni dépendance cloud. Il est conçu pour les développeurs qui utilisent des agents IA pour construire des fonctionnalités d'interface utilisateur et veulent vérifier les résultats sans ouvrir manuellement le navigateur à chaque fois.