在我們開始之前，讓我們快速回答一些問題：

視覺回歸測試是什么意思？

視覺回歸測試是比較兩個不同版本之間應用程序 UI 視覺外觀的過程，以確保沒有意外的視覺變化。該過程涉及截取各種 UI 元素的屏幕截圖，并將它們與之前捕獲的屏幕截圖進行比較，以確定視覺外觀的任何變化。視覺回歸測試有助于確保應用程序的 UI 在不同的設備、瀏覽器和操作系統中保持一致和視覺吸引力。

你為什么要自動化它？

自動化視覺回歸測試有助于在開發周期的早期識別 UI 問題，這可以節省大量時間和金錢，否則這些時間和金錢可能會花在以后修復問題上。想一想修復 Q/A、UAT 或生產中遇到的 UI 怪癖所花費的時間（以及金錢）。你為什么不自動捕捉那些視覺錯誤？

手動目視檢查怎么樣？

盡管您可以執行手動目視檢查，但不建議僅依賴它們，因為與使用自動化套件相比，它會花費更多時間。發現 UI 中的差異可能具有挑戰性，即使對于細微的視覺錯誤也是如此。請看下面的例子——你能找出這 8 個不同之處嗎？大概。但這比自動化套件花費的時間要長得多。

自動視覺回歸測試捕獲了多少百分比的視覺錯誤？

來自各種來源（BrowserStack、AppliTools 等）的研究表明，自動化視覺回歸測試可以捕獲大多數視覺錯誤，成功率在 95% 到 99% 之間，具體取決于應用程序的復雜性和所使用的測試過程。

在本文中，我們將探索 4 個流行的自動化視覺回歸測試庫：Chromatic、Percy、Jest Image Snapshot和BackstopJS。

Chromatic

Chromatic是專門為Storybook設計的視覺回歸測試工具。Chromatic 提供了一個云平臺，允許用戶測試和管理項目的 UI 組件，確保所做的任何更改都不會導致意外的視覺變化。

誰使用 Chromatic？

Adobe、Auth0、CircleCI、GOV.UK、BBC 等。

彩色的優點

• 輕松集成：專為 Storybook 構建（由 Storybook 的維護者！），可以無縫地為您的組件庫或設計系統進行設置。
• 團隊協作：Chromatic 為團隊協作提供了一個平臺，允許您與團隊成員共享測試結果、發表評論并討論任何問題。
• 構建分析：Chromatic 提供詳細的構建分析，向您展示進行了哪些更改、進行更改的人員以及它們如何影響您的 UI 組件。

彩色的缺點

• 有限的自定義選項：雖然 Chromatic 的 UI 旨在易于使用，但它可能無法提供與其他視覺回歸測試工具一樣多的靈活性或自定義。
• 定價：Chromatic 提供了一個免費的計劃，合作者和故事書不受限制。但是，其免費套餐每月有 5,000 個快照的限制，因此如果您認為自己會達到該限制，則值得考慮第一層（$149/月）是否對您的團隊來說負擔得起?？梢栽诖颂幷业礁喽▋r信息。
• 沒有本地測試選項：Chromatic 目前不提供在將視覺變化部署到服務器之前在本地機器上測試視覺變化的方法，這對某些團隊來說可能是一個限制。

Percy

Percy是一個一體化的視覺審閱平臺，提供廣泛的功能和集成。它被BrowserStack收購，后者是應用程序和瀏覽器測試領域的行業領導者。Percy 幫助開發人員捕捉視覺回歸、簡化審查流程并允許團隊輕松協作和跟蹤更改。

誰使用Percy？

谷歌、Sentry、Shopify、Fastly、Basecamp 等。

Percy的優點

• 多才多藝和靈活：Percy 可用于在廣泛的應用程序中進行視覺回歸測試，而不僅僅是 Storybook。Percy 具有高級功能，例如跨瀏覽器測試、與流行測試框架的集成，以及允許對測試過程進行更廣泛的自定義和控制的強大 API。
• 可擴展性：Percy 的擴展性非常好，即使是最大的項目也可以輕松管理可視化回歸測試。
• 協作：Percy 提供了廣泛的協作工具，包括評論和共享功能，允許開發人員一起工作以快速識別和解決問題。

Percy的缺點

• 有限的定制：一些用戶可能會發現 Percy 的開箱即用設置和功能不能滿足他們特定的測試需求，因為定制選項有限。
• 對外部服務的依賴：由于 Percy 是一個基于云的工具，開發人員將需要依賴外部服務提供商來托管和維護平臺，這可能會引入額外的依賴關系和潛在的故障點。
• 定價：Percy 提供了一個免費計劃，其中包含無限的合作者和故事書。但是，它的免費套餐每月有 5,000 個快照的限制，因此如果您認為自己會達到該限制，則值得考慮您的團隊是否可以負擔得起第一層?？梢栽诖颂幷业礁喽▋r信息。

為 Storybook 選擇哪種云解決方案？

在我看來，如果我已經在使用/計劃將它用于其他視覺回歸測試（例如在 Cypress E2E 測試套件中），我會選擇 Percy，以便將您的視覺回歸測試整合到一個平臺中。另一方面，如果我只需要為 Storybook 執行視覺回歸測試，我會選擇 Chromatic。Chromatic 由其維護者專門為其 Storybook 設計，使其更具兼容性和面向未來。由于 Chromatic 專門針對 Storybook 進行了優化，因此它可以更好地與平臺集成并提供更簡化的工作流程。

@percy/storybookvs.的 NPM 趨勢chromatic似乎表明大多數人都得出了相同的結論：

Jest Image Snapshot

Jest Image Snapshot是為 Jest 構建的視覺回歸測試工具。它允許開發人員拍攝渲染組件或元素的快照，并將它們與之前存儲的圖像進行比較，以檢查是否存在任何視覺差異或變化。它通過渲染組件或元素并使用無頭瀏覽器生成渲染輸出的圖像來工作。然后使用像素到像素比較將生成的圖像與先前存儲的圖像進行比較，如果發現任何差異，Jest 將報告測試失敗。

誰使用 Jest Image Snapshot？

美國運通等

Jest Image Snapshot的優點

• 易于使用：Jest Image Snapshot 易于設置和使用，適合各種經驗水平的開發人員使用。它與流行的測試框架 Jest 無縫集成，無需額外配置。
• Independent : Jest Image Snapshot 可以在本地使用，無需外部服務，對于喜歡在本地測試和調試應用程序的開發人員來說，這是一個更方便、更具成本效益的解決方案。
• 定價：這是一個開源項目，并且 100% 免費。

Jest Image Snapshot 的缺點

• 性能開銷：本地視覺回歸測試可能會占用大量資源，運行測試會減慢開發過程，尤其是對于大型項目。
• 對 Jest 的依賴：顧名思義，Jest Image Snapshot 與 Jest 測試框架緊密集成，這可能不適合使用其他測試框架的團隊。
• 有限的配置選項：雖然 Jest Image Snapshot 易于設置和使用，但它提供的配置選項不如其他視覺回歸測試工具那么多。這對于在測試中需要更大靈活性的團隊來說可能會受到限制。

BackstopJS

BackstopJS是一種用于 Web 應用程序的開源視覺回歸測試工具，可自動將 Web 應用程序當前狀態的屏幕截圖與其先前版本進行比較，以識別任何視覺變化。它使用無頭瀏覽器自動化來模擬用戶交互并捕獲網頁的屏幕截圖。BackstopJS 可以配置為跨多個視口測試多個頁面和響應式設計。它還支持用戶身份驗證，可以與各種 CI/CD 管道集成。BackstopJS 使用配置文件來定義要測試的 URL、視口和其他設置。

BackstopJS 的優點

• 配置靈活：BackstopJS可配置性強，適用于測試不同類型、視覺需求多樣的應用。它允許您定義自定義場景、設置不同的環境并調整參數以達到所需的測試水平。
• 強大的比較：BackstopJS 提供了一個強大的圖像比較引擎，即使是最小的視覺差異也能檢測出來。它使用逐像素比較和閾值來確定更改是否足夠重要以被視為失敗。
• 定價：這是一個開源項目，并且 100% 免費。

BackstopJS 的缺點

• 復雜性：與其他視覺回歸工具相比，BackstopJS 需要更多配置和設置，這可能使其實施起來更加復雜。
• 較慢的測試：由于 BackstopJS 生成和比較屏幕截圖的方式，與其他視覺回歸工具相比，它的運行速度可能更慢。
• 有限的支持：雖然 BackstopJS 有可用的文檔和社區支持，但它可能不如其他擁有更大用戶群和更成熟的支持網絡（例如 Percy）的工具那么強大。

總之，每種工具都具有獨特的功能和優點，以及潛在的缺點。選擇哪個用于視覺回歸測試取決于各種因素，例如項目要求、團隊偏好和可用資源。在選擇每種工具時都需要權衡取舍，決定取決于哪些因素對您的項目最重要。

在我看來，Percy提供了最全面和用戶友好的解決方案，使其成為尋求高級工具的團隊的絕佳選擇。Chromatic 是只需要測試 Storybook 庫的團隊的合適選擇，而BackstopJS更適合尋求更全面測試功能的團隊。Jest Image Snapshot 對于使用 Jest 從事較小項目的開發人員來說是一個不錯的選擇。

最終，將自動化視覺回歸測試納入您的開發過程對于及早發現 UI 缺陷并確保為您的網站或應用程序提供高質量的用戶體驗至關重要。