B/S架構頁面巡檢實踐

1 前言

在B/S架構下，軟體以浏覽器作為用戶端運作，一旦部署上線，就需要耗費大量人力對其進行回歸測試以確定系統的穩定性。回歸測試主要關注軟體的基礎功能，這是一項高度重複的工作，要求不斷打開頁面并檢查是否存在潛在錯誤。這包括但不限于頁面是否報錯、頁面的請求是否完全加載成功，以及頁面的響應時間是否過長等等。

傳統的測試方法存在一些不足，不能及時發現問題，且需要投入大量人力。在頁面巡檢中，優化測試方法變得尤為重要。通過引入更智能、高效的測試政策，可以提高問題發現的效率，減少人力成本。是以，對于B/S架構下的軟體，我們需要探索更先進的測試方法，以便更迅速、準确地發現潛在問題，確定系統的健壯性。

2 技術選型

2.1 Chrome DevTools Protocol（CDP）

Chrome DevTools Protocol（CDP）是一種開放的協定，由 Google 開發并用于與基于 Chromium 核心的浏覽器進行通信和控制，允許開發者與浏覽器進行通信和互動。CDP 提供了一種直接通路 Chrome 内部開發工具的方式，使開發者能夠監控、調試和修改浏覽器的行為。

1. 底層協定：CDP 提供了一種低級别的通信協定，允許開發者通過 WebSocket 連接配接與運作中的 Chrome 執行個體進行通信。這使得開發者能夠直接控制浏覽器的底層行為。
2. 強大的調試能力：CDP 允許開發者在運作中的浏覽器中執行調試操作，例如斷點設定、代碼執行、監視變量等。這對于開發者來說是調試 Web 應用程式的強大工具。
3. 網絡分析和修改：CDP 允許開發者監控和修改浏覽器的網絡請求和響應。開發者可以通過 CDP 進行網絡性能分析、模拟不同網絡條件，甚至修改請求或響應資料。
4. 頁面加載控制：CDP 允許開發者控制頁面的加載過程，包括導航、加載事件、資源請求等。這對于執行自動化測試或性能優化非常有用。
5. DOM 操作：CDP 提供了對 Document Object Model（DOM）的直接通路和操作能力。開發者可以通過 CDP 操作頁面的結構，例如查找元素、修改元素屬性等。
6. 浏覽器性能分析：CDP 允許開發者進行浏覽器性能分析，監控浏覽器的運作時性能，并識别潛在的性能問題。
7. 安全性：CDP 的通路是受到安全限制的，需要經過授權。這確定了開發者對浏覽器的通路是有限制和安全的。
8. 工具的自動化：CDP 可以被用于建構各種工具，例如自動化測試工具、性能分析工具等，以幫助開發者更好地了解和優化他們的 Web 應用程式。

通過 CDP，開發者可以建構自動化測試工具、性能優化工具、爬蟲以及其他需要深入浏覽器内部機制的應用程式。

2.2 PlayWright

Playwright 是一個由 Microsoft Edge 團隊開發的開源浏覽器自動化工具。它提供了一組強大的 API，用于控制浏覽器的行為，執行自動化測試、截圖、錄制等任務。Playwright 的設計理念包括跨浏覽器支援、多語言支援、良好的性能和強大的功能。

與傳統的浏覽器自動化工具如 Selenium 和 Puppeteer 相比，它們在一些方面存在差異，大家可以根據業務需求進行選擇。

多語言支援	多測覽器支援	無頭測覽器支援	原生CDP支援	社群活躍度
playwright	✓	✓	✓	✓	高
puppeteer	×	×	✓	✓	⾼
selenium	✓	✓	✓	>=V4.0	⾼

由于我們項目需要支援多種浏覽器，首先排除了 puppeteer，因為 puppeteer 最初就是專為 Chrome 和 Chromium 而設計。

Selenium 雖然也是一款非常優秀的浏覽器自動化工具，并且随着版本疊代，在最新的 Selenium 4 版本中也加入的 CDP 的支援，但 Selenium 需要自行導入封裝各個子產品，可能會導緻啟動變慢并且穩定性不高，是以我們技術選型使用同樣支援多浏覽器和 CDP 的 Playwright。

3 技術實作

3.1 整體架構

本次頁面巡檢基于經過封裝的 Playwright，該工具提供了多語言的實作和 API 調用，最終通過 Chrome DevTools Protocol（CDP）協定來控制 Chromium 浏覽器。巡檢流程整體劃分為三個關鍵子產品，分别是基于 Vue 的展示層、基于 Java 的後端服務和基于 Node.js 的巡檢服務。

圖1 業務架構圖

查略 playwright 官網可看到它⽀持多種開發預⾔，但是考慮到 Playwright 最初是的生态系統是基于 NodeJS 且在社群中有更多的支援和資源，是以巡檢端使用 NodeJS 開發。

圖2 playwright 官網展示頁

3.2 業務流程

圖3 業務流程圖

觸發巡檢任務有兩種方式，手動觸發和自動觸發。一旦觸發了巡檢任務，服務端會根據預先配置的巡檢參數對目标頁面進行基礎參數拼裝，然後通過 HTTP 請求将巡檢請求發送到巡檢端。

巡檢端在接收到請求後，異步地觸發 Playwright，使用無頭浏覽器加載頁面，并收集頁面的各種狀态資訊。最終，巡檢端将收集到的資訊打包回調給服務端。

服務端在處理巡檢回調時，根據回調資料包與巡檢的配置進行分析，生成巡檢結果并通知相關團隊成員。

4 主要功能

4.1 多系統間的相容性

因巡檢端本身支援 HTTP 協定，是以可以通過在多個不同系統部署巡檢節點實作相容性的簡易測試，比如說 Linux、 Windows 、Mac。這樣也可以模拟到使用者在不同的操作環境下的體驗，提高系統的穩健性。

不同的作業系統可能對頁面渲染、請求等有不同的行為結果，可以更加全面的評估系統在各個作業系統下的表現。

4.2 靈活的配置

1. 業務關注：通過關注頁面内各個請求的狀态碼比對，能夠更準确地捕獲業務邏輯中的問題，而不僅僅是 HTTP 請求的成功或失敗。
2. 定制化配置：URL 過濾和重複巡檢次數的配置允許根據具體需求對巡檢行為進行定制，使其更适應不同頁面和業務場景。
3. 排除偶發性問題：通過配置重複巡檢次數，可以排除⼀些偶發性的問題，提高巡檢結果的準确性。

4.3 頁面性能結果的收集

使用 CDP 控制 Chromium 浏覽器提供了很多性能資料，我們可以通過分析這些資料，能夠了解前端頁面的加載渲染和執行過程。

1. 性能資料收集：擷取頁面加載時的詳細性能資料，包括網絡請求、JavaScript 執行時間以及渲染過程，為我們提供全面的性能名額。
2. 網絡請求分析：監控和分析每個網絡請求的詳細資訊，包括請求和響應頭、狀态碼和請求耗時，幫助識别慢速請求和其他影響性能的問題。
3. JavaScript 執行分析：跟蹤 JavaScript 代碼的執行過程，發現可能導緻頁面延遲的腳本，為代碼優化提供有針對性的指導。
4. DOM 和 CSS 分析：擷取頁面的 DOM 結構和 CSS 樣式資訊，有助于識别可能導緻頁面渲染問題的元素和樣式。
5. 頁面截圖：通過擷取頁面截圖，提供可視化的視覺回報，友善檢查頁面的加載狀态。

5 結語

5.1 總結

頁面巡檢是⼀種全面的自動化測試方法，目的是驗證 Web 應用程式的前端 UI 和後端接口的正常運作。通過結合 UI 自動化和接口自動化，頁面巡檢可以有效地捕獲并驗證系統中的各種問題，包括但不限于頁面渲染、功能互動、接口請求等方面。

通過綜合利用 UI 自動化和接口自動化，頁面巡檢成為確定 Web 應用程式高品質、高穩定性的關鍵測試政策。在快節奏的軟體開發中，頁面巡檢的全面性和效率提升為團隊提供了可靠的保障，確定系統在不斷疊代中保持穩健。

5.2 後續計劃

• JsonSchema 支援：利用 JsonSchema 對觸達業務做針對性和自動化測試，減少人工的投入
• 移動裝置的支援：目前基于 NodeJS 的 PlayWright 已經實驗性支援了 Android 裝置
• 增強子鍊的相容性：目前部分子鍊相容性還是較差，比如頁面内嵌的 iframe 或者動态連結等

本文作者

大頭，來自缦圖網際網路中心測試團隊。

來源-微信公衆号:缦圖coder

出處:https://mp.weixin.qq.com/s/SzJhQ2pPXHWgsmV9qdBk0A