ProofShot - 視覺驗證工作流程
ProofShot 是一款開源、與代理無關的 CLI 工具,讓您在真實瀏覽器中驗證自己的工作成果——包含影片證明、螢幕截圖與錯誤報告,且無供應商綁定。
使用時機
在以下情況後使用 ProofShot:
- 建置新的 UI 功能或頁面
- 修改現有 UI 元件
- 修復視覺錯誤
- 任何影響使用者所見內容的變更
工作流程(請務必遵循以下 3 個步驟)
步驟 1:啟動工作階段
proofshot start --run "your-dev-command" --port PORT --description "您即將驗證的內容"
這會開啟瀏覽器並開始錄製。如果連接埠已被佔用,proofshot 會自動終止現有程序。
務必使用 --run 讓 proofshot 啟動並捕捉您的開發伺服器輸出(伺服器記錄會出現在證明報告中)。
僅在使用者或其他程序已明確啟動伺服器時才可省略 --run——否則將無法捕捉伺服器記錄。
如果先前的工作階段未正常結束,請加上 --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 contents API 在 proofshot-artifacts 分支上進行。如果您特別需要 GitHub 附件 URL,請使用 --upload-provider github-web-attachments。
提示
- 務必提供有意義的 --description,讓審查者知道測試了什麼內容
- 在關鍵動作前後都拍攝螢幕截圖(例如:表單送出前、重新導向後)
- 如果在驗證過程中發現錯誤,請修正後重新執行工作流程
- 停止後使用
proofshot pr將證明直接附加至 Pull Request