1.2 安裝 Node.js

確保已經安裝了。在終端中運行以下命令確認是否已安裝：

如果沒有安裝，可以訪問官網進行下載并安裝。

1.3 創建 Playwright 項目

1. 打開，點擊。
2. 在左側的選項中選擇，右側會自動顯示環境。
3. 確保使用的是正確的版本，點擊。
4. 會自動運行來初始化項目，生成項目結構。此時，會為我們創建一個包含文件和配置的項目。

1.4 初始化項目

生成的項目，這里都用默認選項，一路回車即可。

等項目初始化完成

修改下配置文件，注釋掉不需要的瀏覽器支持，例如 Firefox

修改下 tests/examples.spec.ts 后運行即可

運行下，結果顯示通過

1.5 安裝圖像對比庫

接下來，我們將使用庫來進行圖像對比。運行以下命令來安裝它：

安裝完成后如圖所示：

項目結構完成上述步驟后，項目的目錄結構如下所示：

自動化回歸測試

在文件夾下，創建一個名為的文件，編寫以下代碼來實現截圖和對比功能：

代碼解析

1. ：此函數使用庫對比兩張截圖，判斷它們是否一致。
2. ：打開淘寶首頁，作為回歸驗證的目標頁面。
3. ：捕獲頁面截圖并保存。
4. 基準截圖：如果是第一次運行，腳本會將當前截圖保存為基準截圖，后續測試中將與該基準截圖進行對比。

運行測試

1. 打開終端，導航到項目目錄。

2. 運行以下命令啟動測試：

3. 腳本將自動打開瀏覽器，訪問淘寶首頁，捕獲當前截圖，并與基準截圖進行對比。

4. 如果截圖一致，輸出 "UI回歸測試通過，截圖一致！"；

如果有差異，輸出 "UI回歸測試失敗，截圖有差異！"。

總結

通過以上步驟，我們使用和創建了一個回歸驗證的自動化測試框架。核心步驟如下：

• 創建項目：在中選擇模板，并初始化項目。借助于測試框架樣例可以快速開始新的測試編寫。
• 實現了回歸測試：使用捕獲頁面截圖，并通過對比截圖判斷是否發生變化。這里演示了和測試框架示例不一樣的寫法，更貼近開發人員的實現思路。
• 運行和分析測試結果：運行測試腳本并分析截圖對比結果，確保頁面沒有出現不期望的變動。

以上，開發人員和測試人員能夠高效地完成回歸驗證工作。如果你覺得本教程對你有幫助，還請點個贊，關個注，下次更新不迷路！

原文轉載自：https://mp.weixin.qq.com/s/aMuf1yW5xrpeig7JB6etKQ