AmElmo/proofshot

Vérification visuelle des fonctionnalités UI. À utiliser après avoir construit ou modifié un composant, une page ou une fonctionnalité visuelle. Lance une session de vérification avec enregistrement vidéo et capture d’erreurs, puis conduisez le navigateur pour tester, puis arrêtez pour regrouper les preuves pour l’humain.

Qu'est-ce que proofshot ?

ProofShot est un outil CLI open-source et indépendant de l’agent, conçu pour la vérification visuelle des interfaces utilisateur. Il permet aux développeurs de valider leurs modifications UI en enregistrant une session réelle dans un navigateur — vidéo, captures d’écran et rapports d’erreurs — sans dépendre d’un fournisseur spécifique. Le workflow en trois étapes (start, exec, stop) est simple : lancer ProofShot avec la commande de développement, piloter le navigateur pour interagir avec l’interface et capturer des moments clés via des snapshots, puis arrêter la session pour générer un bundle de preuves incluant un résumé, la vidéo et les erreurs console/serveur. ProofShot supporte également l’ajout automatique des preuves sur les pull requests GitHub, soit via l’API officielle de contenu, soit avec des liens d’attachements. Il est particulièrement utile après avoir construit une nouvelle fonctionnalité, modifié un composant existant ou corrigé un bug visuel, et s’intègre facilement dans les workflows CI/CD pour garantir que les changements n’introduisent pas de régressions visuelles.

Compatible avec~Claude Code~Codex CLI~Cursor

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

Documentation

ProofShot — Workflow de vérification visuelle

ProofShot est un CLI open-source, indépendant de l’agent, qui vous permet de vérifier votre propre travail dans un vrai navigateur — preuve vidéo, captures d’écran et rapports d’erreurs, sans verrouillage propriétaire.

Quand l’utiliser

Utilisez ProofShot après :

Avoir construit une nouvelle fonctionnalité ou page UI
Avoir modifié des composants UI existants
Avoir corrigé un bug visuel
Tout changement qui affecte ce que l’utilisateur voit

Le workflow (suivez toujours ces 3 étapes)

Étape 1 : Démarrer la session

proofshot start --run "votre-commande-dev" --port PORT --description "ce que vous allez vérifier"

Cela ouvre un navigateur et commence l’enregistrement. Si le port est déjà utilisé, proofshot tuera automatiquement le processus existant.

Utilisez toujours --run pour laisser proofshot démarrer et capturer la sortie de votre serveur de développement (les logs du serveur apparaissent dans le rapport de preuve). Omettez --run uniquement si le serveur a été explicitement démarré par l’utilisateur ou un autre processus — sans cela, aucun log serveur n’est capturé.

Si une session précédente n’a pas été arrêtée proprement, ajoutez --force pour la remplacer.

Étape 2 : Conduire le navigateur et tester

Utilisez proofshot exec pour naviguer, interagir et vérifier :

proofshot exec snapshot -i                                    # Voir les éléments interactifs
proofshot exec open http://localhost:PORT/page                # Naviguer vers une page
proofshot exec click @e3                                      # Cliquer sur un bouton
proofshot exec fill @e2 "[email protected]"                    # Remplir un champ de formulaire
proofshot exec screenshot step-NAME.png                       # Capturer des moments clés

Prenez des captures d’écran aux moments importants — elles deviennent la preuve visuelle. Vérifiez ce que vous attendez de voir en lisant la sortie du snapshot.

Étape 3 : Arrêter et regrouper la preuve

proofshot stop

Cela arrête l’enregistrement, collecte les erreurs console + serveur et génère un SUMMARY.md avec vidéo, captures d’écran et rapport d’erreurs.

Étape 4 (optionnelle) : Publier la preuve sur la PR

proofshot pr              # Détection automatique de la PR depuis la branche courante
proofshot pr 42           # Cibler un numéro de PR spécifique

Cela télécharge les captures d’écran et la vidéo sur GitHub et poste un commentaire formaté sur la PR. Par défaut, il utilise l’API officielle de contenu GitHub sur une branche proofshot-artifacts. Utilisez --upload-provider github-web-attachments si vous voulez spécifiquement des URLs d’attachement GitHub.

Astuces

Incluez toujours un --description pertinent pour que l’humain sache ce qui a été testé
Prenez des captures d’écran AVANT et APRÈS les actions clés (par exemple, avant la soumission du formulaire, après la redirection)
Si vous trouvez des erreurs lors de la vérification, corrigez-les et relancez le workflow
Utilisez proofshot pr après l’arrêt pour attacher la preuve directement à la pull request