珀西視覺測試指南

珀西：無縫UI質量的自動視覺測試

與珀西合作創建的這篇文章探討瞭如何實現自動視覺測試，以確保您的用戶界面（UI）在不同的瀏覽器和屏幕尺寸之間保持一致。 在單元和集成測試驗證應用程序邏輯時，它們通常會錯過視覺缺陷。 珀西通過自動捕獲和比較視覺快照，突出差異並簡化審核過程來提供解決方案。

本教程將API驅動的單頁應用程序用作實際示例。您將了解Percy如何處理動態數據並與您的工作流程集成以進行有效的視覺評論和批准。

珀西的關鍵好處：>

>

早期檢測到UI問題：
• 捕獲傳統測試錯過的視覺錯誤，確保跨瀏覽器和屏幕尺寸的UI保持一致。 > >自動快照比較：
自動化視覺快照的捕獲和比較，突出顯示了差異的差異。
• 簡單集成：安裝和集成很簡單，類似於設置標準測試框架。
• >>動態數據處理：有效地管理UIS顯示動態數據，防止數據更改中的誤報。
• >簡化的批准工作流程：促進團隊審查和批准視覺變化，確保僅部署預期的修改。
versatile sdks：
• 提供用於各種測試框架的SDK，增強了與現有開發環境的兼容性。
• >先決條件：
>該教程針對熟悉ES6語法，Express.js（用於靜止API）的高級JavaScript開發人員（用於靜止的API），JQUERY，AXIOS，CSS框架，GIT分支策略，理想情況下，具有測試框架的經驗。需要一個github帳戶。 我們將使用GitHub上的樣品貨幣應用程序。

>

理解珀西：

Percy提供了一個平台和工作流程，用於可視化Web應用程序，靜態站點和組件庫的視覺測試。 它的免費計劃包括無限的團隊成員，每月5,000個快照（有一個月的歷史）和無限的項目。 該過程涉及安裝SDK，創建項目儀表板並與您的代碼庫集成。珀西（Percy）在Chrome和Firefox中提供快照，最多支持十個屏幕分辨率。

實現步驟：

1. > 設置演示項目： fork提供的GitHub存儲庫，並按照讀取文件說明設置樣本貨幣應用程序。

2. > 設置Percy Project儀表板：註冊免費的Percy帳戶，創建一個項目（“ Percy-Tutorial”），然後將其鏈接到您的GitHub存儲庫。獲取您的。 PERCY_TOKEN

3. 生成珀西快照：安裝package（@percy/script）。創建npm install -D @percy/script（請參閱代碼的原始文章）。該腳本使用Puppeteer與應用程序進行交互並為每個頁面生成快照。 請記住在單獨的終端中運行snapshots.js以在運行Percy腳本之前啟動應用程序。使用npm start。 export PERCY_TOKEN=<your_token> && npx percy exec -- node snapshots.js</your_token>執行腳本

4. >

   >處理動態數據：修改攔截API請求並用模擬數據替換響應，以確保一致的快照。 （有關更新的代碼，請參見原始文章）。 snapshots.js>

5. >

   批准工作流程：創建一個功能分支，進行視覺更改，提交，推動，在Github上創建拉動請求，運行Percy測試，批准Percy儀表板中的構建，然後合併分支。 最後，更新主分支並再次運行Percy測試以建立一個新的基線。

連續集成（CI）和SDK集成：

> Percy與各種CI/CD平台（AppVeyor，Azure Pipelines等）集成在一起，以進行自動測試。 它還支持各種SDK與不同的測試框架集成（例如柏樹）。 原始文章提供了柏樹集成的示例。

結論：

Percy通過自動化過程並提供簡化的工作流程來顯著增強UI測試，以審查和批准視覺變化。 通過將珀西整合到您的開發過程中，您可以大大降低使用視覺缺陷釋放產品的風險。 原始文章中的常見問題解答提供了有關視覺測試概念和珀西功能的進一步詳細信息。

以上是珀西視覺測試指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！