Was macht ProofShot - Visueller Verifizierungs-Workflow?
ProofShot ist ein Open-Source, agentenagnostisches CLI, mit dem du deine eigene Arbeit in einem echten Browser verifizieren kannst - Videobeweise, Screenshots und Fehlerberichte, ohne Vendor-Lock-in.
Wann verwenden
Verwende ProofShot nach:
- Erstellen einer neuen UI-Funktion oder -Seite
- Ändern vorhandener UI-Komponenten
- Beheben eines visuellen Fehlers
- Jeder Änderung, die das vom Benutzer Gesehene beeinflusst
Der Workflow (befolge immer diese 3 Schritte)
Schritt 1: Sitzung starten
proofshot start --run "dein-entwicklungsbefehl" --port PORT --beschreibung "was du gleich verifizieren wirst"
Dies öffnet einen Browser und beginnt mit der Aufzeichnung. Falls der Port bereits belegt ist, beendet proofshot den vorhandenen Prozess automatisch.
Verwende immer --run, damit proofshot deinen Dev-Server startet und die Ausgabe aufzeichnen kann (Server-Logs erscheinen im proof-Bericht).
Verzichte nur dann auf --run, wenn der Server explizit vom Benutzer oder einem anderen Prozess gestartet wurde - ohne --run werden keine Server-Logs erfasst.
Falls eine vorherige Sitzung nicht sauber beendet wurde, füge --force hinzu, um sie zu überschreiben.
Schritt 2: Browser steuern und testen
Verwende proofshot exec, um zu navigieren, zu interagieren und zu verifizieren:
proofshot exec snapshot -i # Interaktive Elemente anzeigen
proofshot exec open http://localhost:PORT/seite # Zu einer Seite navigieren
proofshot exec click @e3 # Einen Button klicken
proofshot exec fill @e2 "[email protected]" # Ein Formularfeld ausfüllen
proofshot exec screenshot schritt-NAME.png # Wichtige Momente festhalten
Mache Screenshots an wichtigen Momenten - diese werden zum visuellen Beweis. Überprüfe, was du erwartest, indem du die Snapshot-Ausgabe liest.
Schritt 3: Stoppen und den Beweis bündeln
proofshot stop
Dies stoppt die Aufzeichnung, sammelt Konsolen- und Serverfehler und generiert eine SUMMARY.md mit Video, Screenshots und Fehlerbericht.
Schritt 4 (optional): Beweis im PR posten
proofshot pr # PR automatisch aus aktuellem Branch erkennen
proofshot pr 42 # Bestimmte PR-Nummer anvisieren
Dies lädt Screenshots und Video auf GitHub hoch und postet einen formatierten Kommentar im PR. Standardmäßig wird die offizielle GitHub Contents API auf einem proofshot-artifacts-Branch verwendet. Verwende --upload-provider github-web-attachments, wenn du speziell GitHub-Attachment-URLs haben möchtest.
Tipps
- Füge immer eine aussagekräftige
--beschreibunghinzu, damit der Mensch weiß, was getestet wurde - Mache Screenshots VOR und NACH wichtigen Aktionen (z.B. vor dem Absenden eines Formulars, nach der Weiterleitung)
- Wenn du während der Verifizierung Fehler findest, behebe sie und führe den Workflow erneut aus
- Verwende
proofshot prnach dem Stoppen, um den Beweis direkt an den Pull Request anzuhängen