Que fait ProofShot - Workflow de vérification visuelle ?
ProofShot est un outil CLI open-source et indépendant de l'agent qui vous permet de vérifier votre propre travail dans un navigateur réel - preuves 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-de-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 que proofshot démarre et capture 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 etape-NOM.png # Capturer des moments clés
Prenez des captures d'écran aux moments importants - elles deviendront la preuve visuelle. Vérifiez ce que vous attendez de voir en lisant la sortie du snapshot.
Étape 3 : Arrêter et rassembler la preuve
proofshot stop
Ceci 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) : Poster la preuve dans 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 poste un commentaire formaté sur la PR. Par défaut, il utilise l'API officielle GitHub Contents sur une branche proofshot-artifacts. Utilisez --upload-provider github-web-attachments si vous voulez spécifiquement des URLs d'attachement GitHub.
Conseils
- Incluez toujours un
--descriptionpertinent 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 praprès avoir arrêté pour attacher la preuve directement à la pull request