5 種 WordPress 視覺回歸測試工具

已發表: 2023-01-31

在您的 WordPress 網站上優先考慮用戶體驗 (UX) 很重要。 否則，您可能會看到高跳出率和更短的現場停留時間。 但是，如果您自己不是訪問者，則很難識別面向用戶的問題。

幸運的是，借助視覺回歸測試 (VRT)，您將能夠識別前端的問題。 更好的是，一些 VRT 工具對初學者完全友好，並與 WordPress 無縫集成。

在這篇文章中，我們將仔細研究視覺回歸測試。 然後，我們將回顧 WordPress 網站的五個最佳工具。 讓我們開始吧！

視覺回歸測試簡介

視覺回歸測試 (VRT) 可檢測您網站上的任何視覺變化、問題或錯誤。 這是必不可少的，因為大多數通用功能測試無法識別視覺錯誤的細微之處。

視覺回歸測試通過對您的網站進行掃描來工作。 該軟件將截取您所有網頁的屏幕截圖，然後定期創建其他圖像。 這樣，該工具可以比較屏幕截圖並識別發生的任何更改。

VRT 可以發現多種類型的錯誤，包括：

  • 服務器問題，例如內容未正確加載
  • 可能導致設計元素錯位或重疊的代碼更改
  • 未正確獲取的 API 集成
  • 不適應不同屏幕尺寸的佈局
  • 可能會損害您整個網站的嚴重問題，例如有問題的鏈接和更新會在您的網站上留下揮之不去的問題

每當您對 WordPress 網站進行更改（包括更新 WordPress 核心以及更新主題或插件）時，都存在出錯的風險。 沒有 VRT，如果您不訪問您的網站或手動掃描您的所有頁面，就無法了解這些問題。 因此，此類工具可以幫助保護您的用戶體驗。

在視覺回歸工具中尋找什麼

如果您想為您的網站添加視覺回歸工具，需要考慮幾個重要因素。

  • 編程技能：一些視覺回歸工具需要高水平的技術經驗，例如安裝服務器軟件和編寫編碼測試腳本。 另一方面，您還可以找到對初學者更友好的自動化工具。
  • 誤報：最好的 VRT 工具可以區分網站上的視覺錯誤和無害更改。 過於簡單的軟件可能會標記每個更改，這可能會耗費您的時間來篩選。
  • 內容：選擇 VRT 工具時要考慮的最重要因素之一是界面更改的頻率。 例如，靜態網站通常可以使用簡單的工具。 同時，動態內容可能更適合具有高級功能的工具。
  • 開源：開源工具可以免費下載和修改，但如果遇到困難，您將無法獲得實際支持團隊的幫助。
  • 價格：確保您不會陷入無法適應可擴展性的長期合同。 此外，確保您的計劃有足夠的資源在您的網站上成功運行也很重要。

通過考慮上述因素，您更有可能最終獲得最適合您需求的視覺回歸測試工具。

現在您對視覺回歸測試有了更多了解，這裡有五個適用於 WordPress 的最佳 VRT 工具！

1. VRT——視覺回歸測試

VRTs - 視覺回歸測試

信息與下載查看演示

VRTs – Visual Regression Tests 是一款功能強大、用戶友好的工具，專為 WordPress 網站設計。 雖然此列表中的其他選項需要外部服務和技術經驗，但 Visual Regression Tests 可以與您現有的網站無縫配合。 您將能夠從 WordPress 儀表板控制一切。

更好的是，該工具支持自動化。 因此，它不需要編碼技能或持續維護。 安裝後，Visual Regression Tests 立即開始工作，非常適合初學者。

視覺回歸測試的工作原理是從它在您的站點上激活的那一刻起拍攝參考快照。 然後，該插件每天和每次更新內容時都會拍攝一張照片。 如果存在差異，您將收到一封電子郵件通知，您可以在插件的“警報”部分查看更改。

主要特徵

  • 即時電子郵件提醒讓您放心。
  • GDPR 合規性可確保訪問者的隱私和安全。
  • 在分屏和並排模式之間切換以輕鬆比較屏幕截圖。

價格

您可以免費使用 Visual Regression Tests 插件。 或者，要解鎖更多測試，請開始使用每月 39 美元起的付費計劃。

2.篩選器

Screenster 多功能測試工具

信息與下載

Screenster 是一種多用途測試工具，可檢測 UI 中的視覺變化。 除了視覺回歸測試，Screenster 還提供其他服務。 例如，該工具將在您與頁面交互時記錄您的網站，重新運行記錄的測試，並幫助優化網絡操作。

除此之外，您還可以訪問更深入的配置設置。 您可以從比較中排除某些 UI 元素，並批准該工具選擇的所有更改。

更好的是，該工具比某些替代工具工作得更快，估計需要 5-30 分鐘來開發測試，三個小時來維護您的測試一個月。

然而，Screenster 具有陡峭的學習曲線。 首先，它需要一些服務器知識，因為您需要在 Screenster 的雲上運行測試或在本地環境中安裝 Screenster 服務器。 因此，它可能不是初學者的最佳選擇。

主要特徵

  • 根據您的網站需求自動化和安排測試。
  • 在本地和離線環境中執行測試。
  • 使用團隊門戶與團隊成員協作。

價格

您可以免費開始使用 Screenster，也可以從每月 25 美元起升級。

3.珀西

Percy 自動化可視化測試工具

信息與下載

Percy 是由 BrowserStack 創建的自動化可視化測試工具。 這是一個受歡迎的選擇，受到 Microsoft、Expedia 和 Twitter 等品牌的信任。 您可以使用 Percy 捕獲屏幕截圖並將它們逐個像素地與基線進行比較。 同時，它會突出顯示 UI 中的任何更改和錯誤。

Percy 的最佳功能之一是它專為協作而構建。 該平台生成帶有評論部分的視覺評論，以促進團隊討論。 此外，所有團隊成員都會收到通知，讓每個人都了解最新情況。

此外，此 VRT 工具旨在與您當前的工作流程相匹配。 因此，您可以將 Percy 與測試自動化框架集成或直接在您的應用程序中實現它。

主要特徵

  • 選擇忽略頁面的特定區域並凍結動畫以最大程度地減少誤報。
  • 在移動設備和桌面設備的不同瀏覽器和平台中呈現相同的頁面。
  • 受益於 GDPR 和 CCPA 合規性。

價格

Percy 有免費版本，您也可以從每月 149 美元起升級。

4.幽靈

Wraith網頁截圖對比工具

信息與下載

Wraith 是 BBC 開發的一款網頁截圖對比工具。 它使用無頭瀏覽器、Imagemagick 和 Ruby 來實現對前端更改的快速反饋。 這些功能有助於減少 UI 錯誤。 此外，您可以選擇整個頁面或特定的 CSS 選擇器來生成有針對性的測試。

但是，對於經驗不足的用戶來說，Wraith 可能會稍微複雜一些，需要安裝和腳本編寫知識。 您將收到一個gallery.html包，其中包含一個帶有圖像比較的diff PNG 文件。 此外，您還會收到一個data.txt文件，告知您已更改像素的百分比。

主要特徵

  • 在三個選項之間切換：直接比較、歷史模式和用於網站爬行的蜘蛛模式。
  • 使用捕獲模式比較動態內容。
  • 在不同環境中使用 Wraith，從實時網站到測試和暫存站點。

價格

Wraith 是開源且完全免費的。

5. 逆止器

Web 應用程序的 BackstopJS 視覺回歸測試

信息與下載

BackstopJS 是一種開源工具，可為 Web 應用程序提供可視化回歸測試。 它的工作原理是在不同的屏幕尺寸下創建網頁的屏幕截圖。 它還包括 Chrome 無頭渲​​染、CLI 報告和場景顯示過濾。

雖然 BackstopJS 非常易於使用，但它需要一些技術知識。 對於初學者，您需要熟悉安裝和腳本。 BackstopJS 使用 Resemble.js、CasperJS 和 PhantomJS。

要開始使用該工具，您將設置一個新的 BackstopJS 實例，您可以在其中指定 URL、cookie、屏幕尺寸、交互等。 然後，BackstopJS 創建一組測試並將它們與您的參考屏幕截圖進行比較。

如果發生任何更改，您將在可視化報告中收到通知。 如果測試看起來不錯，您可以批准測試以將參考文件替換為最新版本。

主要特徵

  • 模擬與 Playwright 或 Puppeteer 腳本的交互。
  • 全球或本地運行 BackstopJS 作為一個獨立的包應用程序。
  • 享受集成的 Docker 渲染，消除跨平台渲染問題。

價格

BackstopJS 是開源且免費的。

雖然維護功能強大且用戶友好的 WordPress 網站至關重要，但許多測試工具無法檢測您網站上的視覺變化。 幸運的是，通過可視化回歸測試，您可以輕鬆發現服務器問題、代碼更改和 API 問題。

您對使用 WordPress 視覺回歸測試工具有任何疑問嗎？ 在下面的評論部分讓我們知道！