VizDiff
vizdiff.io · 程式設計
VizDiff 是一款為 Storybook 打造的自架視覺回歸測試工具。它在 CI 中為元件截圖、標出像素變動，並在合併前於 GitLab 或 GitHub 送出狀態檢查。
關於 VizDiff
What Is VizDiff
VizDiff 抓的是單純靠程式碼審查會漏掉的介面改動。它接在你既有的 Storybook 設定上，每次提交都為每個 story 拍一張截圖，再拿這批新的畫面跟儲存的基準線比對。任何移動過的地方都會被標記出來，交給人來核准或退回。
這個工具跑在你自己的基礎架構上。沒有共用雲端帳號，截圖也存在你自己的儲存桶裡。這是視覺回歸測試，卻不必把介面交給第三方。Storybook 截圖測試就在 CI 裡跑，而每次截圖測試都會標出改動過的地方。如果你團隊本來就在 GitLab 或 GitHub 裡建置 Storybook，VizDiff 會接進你現有的流程，而不是要你搬家。
最主要的限制在於涵蓋範圍。VizDiff 懂 Storybook story，其他幾乎不管，所以要測整個頁面或應用流程的團隊需要更廣的工具。它同時假設你會自行部署並維護這套服務，不想維運任何東西的話就得排除它。
Getting Started
- 透過你的身分提供者登入 VizDiff（GitLab 上走 Microsoft Entra 或 SSO，GitHub 上走 GitHub OAuth）。
- 新增一個專案，複製它為該儲存庫產生的 Project Token。
- 把權杖存成
VIZDIFF_PROJECT_TOKEN，放進你的 CI 密鑰或變數裡。 - 在管線中加入上傳步驟，指向 Storybook 的建置目錄，例如
storybook-static。 - 開一筆合併請求，在 VizDiff 檢視拍下的截圖，然後核准或退回這次建置。
產品資訊
快速了解 VizDiff 的定價、支援平台與效能。
適合對象
這項工具最適合的使用者、任務與情境。
使用者
- 在 Storybook 中打造元件庫、想在合併前攔下回歸的前端團隊
- 已經在跑 CI 管線、不想再開一個雲端帳號的 GitLab 或 GitHub 使用者
- 資料規範嚴格、必須把截圖留在自家基礎架構的組織
- 能自己拉一個 Docker 部署的小型元件專案獨立開發者
任務
- 在程式碼進入主分支前，於拉取請求上攔下視覺回歸
- 檢視兩次 Storybook 建置之間哪些 story 有變動，並逐一簽核
- 維護一份全團隊共用的已核准截圖基準線，供大家比對
- 當某次提交帶來未經核准的介面改動時，自動擋下合併
情境
- 重新設計設計系統裡的某個元件，想確切看到它還擾動了哪些畫面
- 維護一個持續長大的元件庫，一點樣式改動就擴散到數十個 story
- 在分散式團隊裡協作，審查者無法在本機跑起應用來目視介面
- 收緊發布流程，因為介面瑕疵在單元測試全綠之後仍不斷溜出去
主要功能
Storybook Integration
VizDiff 讀取你團隊已經寫好的 story，所以沒有另一套測試要維護。你的管線建置好 Storybook 之後，CLI 會把產出上傳，工具再為每個 story 產生一張截圖。你在 Storybook 新增元件，它就會在下一輪比對中出現，不必額外設定。
GitLab and GitHub Status Checks
工具會在 GitLab 合併請求上送出提交狀態，或在 GitHub 拉取請求上送出一項檢查，GitLab 視覺測試與 GitHub 視覺測試共用同一套流程。在截圖產生期間，以及還需要有人檢視新增或變動的畫面時，這項檢查會維持待處理。若毫無變動，它會自己轉為成功，例行提交不必任何人動手就能放行。
Pixel-Level Diff Views
每個有變動的 story 都會開在一個比對對話框裡，提供 Old、New、Diff 與 2-Up 四種檢視。Diff 檢視就像一款像素差異工具，把移動過的像素標出來，2-Up 模式則把兩個版本並排放。用方向鍵就能在一張張之間移動，當單一分支牽動數十個 story 時這點很重要。
Shared Baselines
已核准的截圖會成為下一輪建置比對的基準線，整個團隊都看同一份。截圖存放在你自己的 S3 相容儲存桶裡，參考圖從不離開你的基礎架構。從已有核准截圖的提交開分支，能讓比對維持意義，而不是全部重置成新畫面。
Self-Hosted Deployment
VizDiff 以 MIT 授權的開放原始碼專案發布，以三個服務（api、worker、frontend）跑在 PostgreSQL 與你自己提供的儲存桶上。帶版本的多架構映像會發布到 GitHub Container Registry，Docker Compose 檔案與 Helm chart 都能用來安裝。沒有廠商帳號，也沒有按人頭計費。
優缺點
優點
- 截圖與基準線留在你自己的基礎架構上，適合資料規範嚴格的團隊
- 接在你管線本來就會產生的 Storybook 建置上，導入幾乎只是改一下 CI
- 狀態檢查會自行擋下合併，沒有變動時又會自行解除
- MIT 授權的開放原始碼，沒有按人頭計費要談
- 介面回歸測試在背景默默跑，審查者只在有東西移動時才需要看
- 同時支援 GitLab 與 GitHub，包含自架的 GitLab 執行個體
缺點
- 安裝需要自行部署並維護服務，也就是 Docker、PostgreSQL 和一個儲存桶
- 只測 Storybook story，整頁與多步驟流程就落在範圍之外
- 分支第一次執行只會建立基準線，所以早期的提交會把所有畫面都當成新的
- 登入仰賴外部身分提供者，純地端團隊要多接一些東西
常見問題
它在你 CI 管線執行時，為每個 Storybook story 拍一張截圖，把結果跟已核准的基準線比對，並回報哪些有變動。這些變動會以狀態檢查的形式出現在你的合併請求或拉取請求上，由同事核准或退回。
相關內容
探索與 VizDiff 相關的工具、技能與文章。
VizDiff 替代方案
Base Code
Base44 (Wix) · 程式設計 · 生產力Base Code 是 Base44 推出的共享雲端開發環境。團隊在對話中描述對既有 GitHub 儲存庫的修改，看著預覽確認結果，再以 Pull Request 交回工程團隊。
Google EmbeddingGemma 2
Google DeepMind · 寫作 · 圖片 · 程式設計Google EmbeddingGemma 2 是 7.4 億參數的開源模型，能把文字、程式碼、圖片、音訊與影片畫面轉成同一個 768 維空間裡的向量，在手機與筆電上就能執行。
GitGlow
GitGlow · 程式設計 · 生產力GitGlow 是桌面版 Git 用戶端，把你自己的程式碼與 AI 代理程式的變更集中在同一份審查裡，讓你在交付前看清楚機器上究竟要送出什麼。