ProofShot — 視覺驗證工作流程
ProofShot 是一個開源、與代理無關的命令列工具，讓您在真實瀏覽器中驗證自己的工作 — 包含影片證據、螢幕截圖和錯誤報告，沒有廠商鎖定。
使用時機
在以下情況之後使用 ProofShot：
- 建置一個新的 UI 功能或頁面
- 修改現有的 UI 元件
- 修復視覺錯誤
- 任何影響使用者所見內容的變更
工作流程（請務必遵循以下 3 個步驟）
步驟 1：啟動工作階段
proofshot start --run "your-dev-command" --port PORT --description "您即將驗證的內容"
這會開啟一個瀏覽器並開始錄製。如果連接埠已被占用，proofshot 會自動終止現有程序。
務必使用 --run 讓 proofshot 啟動並擷取您的開發伺服器輸出（伺服器日誌會出現在驗證報告中）。
僅在伺服器是由使用者或其他程序明確啟動時才能省略 --run — 否則將無法擷取伺服器日誌。
如果先前的 session 未正常停止，請加上 --force 來覆蓋。
步驟 2：驅動瀏覽器並進行測試
使用 proofshot exec 進行導航、互動和驗證：
proofshot exec snapshot -i # 檢視可互動元素
proofshot exec open http://localhost:PORT/page # 導航到頁面
proofshot exec click @e3 # 點擊按鈕
proofshot exec fill @e2 "[email protected]" # 填寫表單欄位
proofshot exec screenshot step-NAME.png # 捕捉關鍵時刻
在重要時刻拍攝螢幕截圖 — 這些將成為視覺證據。 透過閱讀快照輸出，驗證您期望看到的內容。
步驟 3：停止並打包證據
proofshot stop
這會停止錄製、收集主控台和伺服器錯誤，並生成一個包含影片、螢幕截圖和錯誤報告的 SUMMARY.md。
步驟 4（可選）：將證據張貼到 PR
proofshot pr # 從當前分支自動偵測 PR
proofshot pr 42 # 指定特定的 PR 編號
這會將螢幕截圖和影片上傳到 GitHub，並在 PR 上發布一個格式化的評論。預設使用官方 GitHub 內容 API，存儲在名為 proofshot-artifacts 的分支上。如果您特別想要 GitHub 附件 URL，請使用 --upload-provider github-web-attachments。
提示
- 務必提供有意義的 --description，讓驗證者知道測試了什麼內容
- 在關鍵操作前後都拍攝螢幕截圖（例如，在表單提交前、重新導向後）
- 如果在驗證過程中發現錯誤，請修正錯誤並重新執行工作流程
- 停止後使用
proofshot pr，將證據直接附加到 Pull Request