AmElmo/proofshot

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

Qu'est-ce que proofshot ?

ProofShot est un outil CLI open-source et indépendant de l'agent qui permet aux développeurs de vérifier visuellement leurs modifications UI dans un vrai navigateur. Il enregistre une vidéo, capture des captures d'écran et collecte les erreurs de la console et du serveur, le tout regroupé dans un rapport de preuve. L'outil s'intègre avec n'importe quel outil d'agent ou CI/CD, et permet de publier automatiquement les preuves sur une pull request GitHub. Son flux en trois étapes — démarrage, test, arrêt — est conçu pour être simple et reproductible, avec une option de publication directe sur la PR.

Compatible avec~Claude Code~Codex CLI~Cursor

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

Documentation

ProofShot — Workflow de vérification visuelle

ProofShot est un CLI open-source et 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'erreur, 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"

Ceci 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). N'omettez --run que 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 : Piloter 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-NOM.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 de l'instantané.

Étape 3 : Arrêter et regrouper la preuve

proofshot stop

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

É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

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

Conseils

Incluez toujours une --description significative pour que l'humain sache ce qui a été testé
Prenez des captures d'écran AVANT et APRÈS les actions clés (ex. avant la soumission du formulaire, après la redirection)
Si vous trouvez des erreurs pendant la vérification, corrigez-les et réexécutez le workflow
Utilisez proofshot pr après avoir arrêté pour attacher la preuve directement à la pull request