Buddy Visual Tests

Buddy Visual Tests 比對渲染後的 UI 快照與核准基準，及早找出視覺回歸。適用於 pipeline、GitHub Actions 與本機流程，支援程式碼與無腳本擷取。

AI測試與QA

訪問網站

概覽

Buddy Visual Tests 是一項視覺回歸測試功能，用來找出功能測試無法偵測的 UI 變更。它會將應用程式渲染後的快照與核准基準比對，並將差異標示出來供審查，包括版面位移、樣式漂移、元素缺失與響應式破損。

此產品是為希望在交付流程中加入視覺檢查、又不想從零撰寫新測試斷言的團隊而設計。它可在 Buddy Pipelines、GitHub Actions 或本機執行，Buddy 將此功能描述為 Preview 中。

核心功能

以像素為基礎的回歸偵測

擷取渲染後的快照，並與核准基準比對，讓版面位移、樣式偏移、缺少元素與響應式破壞能在合併前被發現。

以套件為單位的測試組織

依據要渲染的內容與比對方式定義套件，包括瀏覽器與裝置組合，以及差異門檻。

依變體的基準

按瀏覽器與裝置變體分別比對快照，而不只是以 session 層級處理，因此可分開審查手機與桌面結果。

以核准流程更新基準

審查差異並核准或拒絕變更後的快照；核准的變更會成為該分支後續執行的新參考。

CI 與本機執行

在視覺變更審查完成前暫停 Buddy pipelines，或使用 GitHub Actions 與本機執行來在 Buddy 之外使用相同流程。

多種擷取路徑

可依團隊是否已有測試程式碼或想要無腳本測試，選擇 URL 或 sitemap 擷取、E2E 外掛，或 Storybook 上傳。

適用情境

部署前的 pipeline 品質閘門
當 UI 變更意外改動渲染時，使用 Visual Tests 來阻止發佈。核准動作可讓 Buddy pipeline 暫停，直到有人審查差異並核准或拒絕該 session。
人工審查 agent 或開發者造成的 UI 變更
針對 agent 或開發者所產生的變更進行視覺檢查，並審查實際變動的像素。當變更在功能上正確、但仍可能引入視覺回歸時，這特別有用。
用於線上頁面的無腳本測試
當你不想在 repository 中加入測試程式碼時，可使用 URL 或 sitemap 擷取。Buddy 可直接從 URL 對線上頁面建立快照，並與已核准的基準比對。
既有測試與 Storybook 工作流程
將 Visual Tests 接到既有的 Playwright、Cypress、Selenium 或 Puppeteer 工作流程，或上傳 Storybook build 供元件庫與設計系統使用。
響應式與跨瀏覽器審查
比對瀏覽器與裝置特定的快照，以找出只會出現在手機、平板或不同瀏覽器引擎上的問題。

Pros and Cons

Pros

可捕捉功能測試可能漏掉的視覺問題，例如版面移位或隱藏／缺少內容。
支援多種輸入路徑，包括 E2E 外掛、Storybook，以及 URL 或 sitemap 擷取。
可與 Buddy Pipelines、GitHub Actions 和本機執行搭配使用。
使用具分支意識的基準，因此某分支上的核准不會自動變更另一分支的參考狀態。
可在人工審查並核准 session 前暫停 pipeline。

Cons

此功能目前處於 Preview，因此團隊應將其視為尚未正式全面提供。
來源資料未說明 Visual Tests 的獨立定價模式；僅提到 Buddy 整體定價方案與 Preview 註記。

FAQ

如何設定 Visual Tests？

Visual Tests 會以套件（suite）方式設定。在 Buddy 中，前往 TEST → Visual Tests，新增一個套件，並選擇快照收集方式：透過 E2E 測試外掛、Storybook 上傳，或無腳本的 URL／sitemap 擷取。文件指出之後可將套件串接到 Buddy Pipelines、GitHub Actions，或本機電腦。

什麼是 visual test session？

Session 是一次 Visual Tests 的單次執行。它包含該次執行所擷取的快照，涵蓋套件中啟用的瀏覽器、系統與裝置組合；若發現差異，則會等待審核。

基準是如何決定的？

Visual Tests 會將每個快照對照基準來比對，且基準會依快照與瀏覽器／裝置變體個別解析。在功能分支上，第一次執行會與該分支祖先歷史中最新核准的基準比對；之後在該分支上的執行則會與新核准的快照比對。

我可以在哪裡執行 Visual Tests？

來源文件顯示可在 Buddy Pipelines 與 GitHub Actions 執行，也註明 Visual Tests 可在本機執行。首頁也描述了一個以 bdy 指令為基礎的 CLI 工作流程。

Visual Tests 有獨立定價嗎？

定價頁顯示 Buddy 提供免費方案與付費方案，而 Visual Tests 頁面則說明 Visual Tests 在 Preview 期間免費。文件未描述獨立的 Visual Tests 定價或配額模型。

Quick Facts

類別: 視覺回歸測試
平台: Buddy CI/CD；亦支援 GitHub Actions 與本機執行
狀態: Preview
主要使用者: 部署 UI 變更的開發者與 agent
來源網域: buddy.works
定價訊號: Preview 期間免費；Buddy 亦提供免費與付費方案