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

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

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

你為什么要自動化它？

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

手動目視檢查怎么樣？

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

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

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

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

Chromatic

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

誰使用 Chromatic？

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

彩色的優(yōu)點(diǎn)

• 輕松集成：專為 Storybook 構(gòu)建（由 Storybook 的維護(hù)者！），可以無縫地為您的組件庫或設(shè)計系統(tǒng)進(jìn)行設(shè)置。
• 團(tuán)隊協(xié)作：Chromatic 為團(tuán)隊協(xié)作提供了一個平臺，允許您與團(tuán)隊成員共享測試結(jié)果、發(fā)表評論并討論任何問題。
• 構(gòu)建分析：Chromatic 提供詳細(xì)的構(gòu)建分析，向您展示進(jìn)行了哪些更改、進(jìn)行更改的人員以及它們?nèi)绾斡绊懩?UI 組件。

彩色的缺點(diǎn)

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

Percy

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

誰使用Percy？

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

Percy的優(yōu)點(diǎn)

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

Percy的缺點(diǎn)

• 有限的定制：一些用戶可能會發(fā)現(xiàn) Percy 的開箱即用設(shè)置和功能不能滿足他們特定的測試需求，因為定制選項有限。
• 對外部服務(wù)的依賴：由于 Percy 是一個基于云的工具，開發(fā)人員將需要依賴外部服務(wù)提供商來托管和維護(hù)平臺，這可能會引入額外的依賴關(guān)系和潛在的故障點(diǎn)。
• 定價：Percy 提供了一個免費(fèi)計劃，其中包含無限的合作者和故事書。但是，它的免費(fèi)套餐每月有 5,000 個快照的限制，因此如果您認(rèn)為自己會達(dá)到該限制，則值得考慮您的團(tuán)隊是否可以負(fù)擔(dān)得起第一層。可以在此處找到更多定價信息。

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

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

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

Jest Image Snapshot

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

誰使用 Jest Image Snapshot？

美國運(yùn)通等

Jest Image Snapshot的優(yōu)點(diǎn)

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

Jest Image Snapshot 的缺點(diǎn)

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

BackstopJS

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

BackstopJS 的優(yōu)點(diǎn)

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

BackstopJS 的缺點(diǎn)

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

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

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

最終，將自動化視覺回歸測試納入您的開發(fā)過程對于及早發(fā)現(xiàn) UI 缺陷并確保為您的網(wǎng)站或應(yīng)用程序提供高質(zhì)量的用戶體驗至關(guān)重要。