Communitygithub.com

AmElmo/proofshot

UI 功能視覺驗證。在構建或修改任何 UI 元件、頁面或視覺功能後使用。啟動含影片錄製與錯誤捕捉的驗證工作階段,由您驅動瀏覽器進行測試,結束後將證明工件打包供人類審查。

proofshot 是什麼?

ProofShot 是一款開源且與代理無關的 CLI 工具,能讓開發者或 AI 代理在真實瀏覽器中驗證 UI 變更,並產出包含影片、螢幕截圖與錯誤報告的視覺證明。它支援任何命令列環境,無需綁定特定供應商,且與 GitHub PR 緊密整合。工作流程包含三個步驟:啟動含錄影的瀏覽器工作階段、使用 `proofshot exec` 指令驅動瀏覽器進行互動與截圖、以及停止工作階段並打包摘要。另外可透過 `proofshot pr` 將證明工件直接張貼至 Pull Request。這對於需要可靠、可重現的前端驗證以確保交付品質的開發者與代理特別實用。

相容平台~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/skills/opencode

在你喜歡的 AI 中提問

開啟一個已預先載入此 Agent Skill 的新對話。

說明文件

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

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

相關技能