ProofShot — Visueller Verifikations-Workflow
ProofShot ist ein Open-Source, agentenunabhängiges CLI, mit dem Sie Ihre eigene Arbeit in einem echten Browser überprüfen können – Video-Proof, Screenshots und Fehlerberichte, ohne Vendor-Lock-in.
Wann verwenden
Verwenden Sie ProofShot nach:
- dem Erstellen einer neuen UI-Funktion oder Seite
- dem Ändern vorhandener UI-Komponenten
- dem Beheben eines visuellen Fehlers
- jeder Änderung, die das Aussehen für den Benutzer beeinflusst
Der Workflow (befolgen Sie immer diese 3 Schritte)
Schritt 1: Sitzung starten
proofshot start --run "your-dev-command" --port PORT --description "was Sie gerade überprüfen möchten"
Dies öffnet einen Browser und beginnt mit der Aufzeichnung. Falls der Port bereits belegt ist, beendet Proofshot den vorhandenen Prozess automatisch.
Verwenden Sie immer --run, damit Proofshot die Ausgabe Ihres Dev-Servers starten und aufzeichnen kann (Server-Logs erscheinen im Proof-Bericht).
Nur dann --run weglassen, wenn der Server explizit vom Benutzer oder einem anderen Prozess gestartet wurde – ohne --run werden keine Server-Logs aufgezeichnet.
Falls 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 zum Navigieren, Interagieren und Überprüfen:
proofshot exec snapshot -i # Interaktive Elemente anzeigen
proofshot exec open http://localhost:PORT/seite # Zu einer Seite navigieren
proofshot exec click @e3 # Eine Schaltfläche klicken
proofshot exec fill @e2 "[email protected]" # Ein Formularfeld ausfüllen
proofshot exec screenshot schritt-NAME.png # Wichtige Momente erfassen
Machen Sie Screenshots zu wichtigen Zeitpunkten – diese werden zum visuellen Proof. Überprüfen Sie, was Sie erwarten, indem Sie die Snapshot-Ausgabe lesen.
Schritt 3: Stoppen und Bündeln des Proofs
proofshot stop
Dies stoppt die Aufzeichnung, sammelt Konsolen- und Serverfehler und generiert
eine SUMMARY.md mit Video, Screenshots und Fehlerbericht.
Schritt 4 (optional): Proof an den PR anhängen
proofshot pr # PR automatisch aus dem aktuellen Branch erkennen
proofshot pr 42 # Eine bestimmte PR-Nummer angeben
Dies lädt Screenshots und Video auf GitHub hoch und fügt einen formatierten Kommentar an den PR an. Standardmäßig wird die offizielle GitHub Contents API auf einem proofshot-artifacts-Branch verwendet. Verwenden Sie --upload-provider github-web-attachments, wenn Sie speziell GitHub-Anhangs-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 eines Formulars, nach der Weiterleitung)
- Wenn Sie während der Überprüfung Fehler finden, beheben Sie diese und führen Sie den Workflow erneut aus
- Verwenden Sie
proofshot prnach dem Stoppen, um Proof direkt an den Pull Request anzuhängen