ProofShot — Visueller Verifizierungs-Workflow
ProofShot ist ein Open-Source, agentenunabhängiges CLI-Tool, mit dem Sie Ihre eigene Arbeit in einem echten Browser verifizieren können – mit Video-Beweis, Screenshots und Fehlerberichten, ohne Anbieterbindung.
Wann verwenden
Verwenden Sie ProofShot nach:
- Erstellen einer neuen UI-Funktion oder Seite
- Ändern bestehender UI-Komponenten
- Beheben eines visuellen Bugs
- Jeder Änderung, die beeinflusst, was der Benutzer sieht
Der Workflow (befolgen Sie immer diese 3 Schritte)
Schritt 1: Sitzung starten
proofshot start --run "ihr-dev-befehl" --port PORT --description "was Sie überprüfen möchten"
Dies öffnet einen Browser und beginnt mit der Aufzeichnung. Wenn der Port bereits verwendet wird, beendet proofshot den vorhandenen Prozess automatisch.
Verwenden Sie immer --run, damit proofshot die Ausgabe Ihres Dev-Servers starten und erfassen kann (Server-Logs erscheinen im Beweisbericht).
Lassen Sie --run nur weg, wenn der Server explizit vom Benutzer oder einem anderen Prozess gestartet wurde – ohne ihn werden keine Server-Logs erfasst.
Wenn eine vorherige Sitzung nicht sauber beendet wurde, fügen Sie --force hinzu, um sie zu überschreiben.
Schritt 2: Browser steuern und testen
Verwenden Sie proofshot exec, um zu navigieren, zu interagieren und zu überprüfen:
proofshot exec snapshot -i # Interaktive Elemente anzeigen
proofshot exec open http://localhost:PORT/page # Zu einer Seite navigieren
proofshot exec click @e3 # Einen Button klicken
proofshot exec fill @e2 "[email protected]" # Ein Formularfeld ausfüllen
proofshot exec screenshot step-NAME.png # Wichtige Momente erfassen
Machen Sie Screenshots zu wichtigen Momenten – diese werden zum visuellen Beweis. Überprüfen Sie, was Sie erwartet haben, indem Sie die Snapshot-Ausgabe lesen.
Schritt 3: Stoppen und Beweis bündeln
proofshot stop
Dies stoppt die Aufzeichnung, sammelt Konsole- und Server-Fehler und erstellt eine SUMMARY.md mit Video, Screenshots und Fehlerbericht.
Schritt 4 (optional): Beweis im PR posten
proofshot pr # PR aus aktuellen Branch automatisch erkennen
proofshot pr 42 # Auf eine bestimmte PR-Nummer zielen
Dies lädt Screenshots und Video auf GitHub hoch und postet einen formatierten Kommentar im PR. Standardmäßig verwendet es die offizielle GitHub Contents API auf einem proofshot-artifacts Branch. Verwenden Sie --upload-provider github-web-attachments, wenn Sie speziell GitHub-Attachment-URLs wünschen.
Tipps
- Geben Sie immer eine aussagekräftige
--descriptionan, damit der Mensch weiß, was getestet wurde - Machen Sie Screenshots VOR und NACH wichtigen Aktionen (z.B. vor dem Absenden des Formulars, nach der Weiterleitung)
- Wenn Sie während der Verifizierung Fehler finden, beheben Sie diese und führen Sie den Workflow erneut aus
- Verwenden Sie
proofshot prnach dem Stoppen, um den Beweis direkt an den Pull Request anzuhängen