回顧：過往的自動化測試歷程

Jecelyn Yeen
Maksim Sadym
Maksim Sadym
X GitHub

測試自動化的誕生

讓我們回到 1990 年代網路瀏覽器誕生的時光。隨著 Selenium 和 WebDriver 專案問世，測試自動化功能在 2000 年代才非屬實境，可解決跨瀏覽器和多裝置測試的種種挑戰。

這兩個專案於 2011 年以 Selenium WebDriver 身分加入，並在 2018 年成為 W3C 標準。我們通常會將其稱為 WebDriver 或 WebDriver「傳統版」。

Selenium WebDriver 專案的演進。
Slenium WebDriver 專案的演進

在 WebDriver「經典」之前，測試自動化功能相當困難。由於系統可自動進行瀏覽器測試，大幅改善開發人員與測試人員的生活品質。

JavaScript 的興起

隨著網頁開發的進化，更仰賴 JavaScript，許多新的自動化解決方案包括 WebdriverIO、Appium、Nightwatch、Protractor (已淘汰)、Testcafe、Cypress、Puppeteer 和 Playwright。

JavaScript 自動化工具。
JavaScript 自動化工具

自動化方法

這些工具大致上可以根據瀏覽器自動化方式，分為兩大類：

  • 高階：在瀏覽器中執行 JavaScript 的工具。舉例來說，Cypress 和 TestCafe 會利用網路 API 和 Node.js，直接在瀏覽器中執行測試。趣味小知識：第一版的 Selenium 也採用了相同方法。
  • 低層級：在瀏覽器以外執行遠端指令的工具。當工具需要更全面的控制權時 (例如開啟多個分頁或模擬裝置模式)，使用者就需要執行遠端指令，才能透過通訊協定控制瀏覽器。WebDriver 的「傳統版」和 Chrome 開發人員工具通訊協定 (CDP) 主要是兩種主要的自動化通訊協定。

在下一節中，我們會說明這兩個通訊協定，瞭解其優缺點。

WebDriver 傳統版和 CDP。

WebDriver 的「傳統版」與 Chrome 開發人員工具通訊協定 (CDP)

WebDriver " Classic" 是所有主要瀏覽器支援的網路標準。自動化指令碼會透過 HTTP 要求向驅動程式伺服器發出指令，然後透過內部瀏覽器專用的通訊協定與瀏覽器通訊。

它提供優異的跨瀏覽器支援，且其 API 是專為測試用而設計，但執行速度較慢，而且不支援部分低階控制項。

WebDriver 的《傳統》
WebDriver 的「傳統版」

舉例來說，假設您有可以點擊 await coffee.click(); 元素的測試指令碼。並且會轉譯為一系列 HTTP 要求。

# WebDriver: Click on a coffee element

curl -X POST http://127.0.0.1:4444/session/:element_id/element/click
   -H 'Content-Type: application/json'
   -d '{}'

另一方面，Chrome 開發人員工具通訊協定 (CDP) 最初是為 Chrome 開發人員工具和偵錯功能而設計，但 Puppeteer 則採用自動化技術。CDP 會透過 WebSocket 連線直接與 Chromium 瀏覽器通訊，藉此提升效能及進行低階控制。

不過，僅適用於以 Chromium 為基礎的瀏覽器，且並非開放標準。除此之外，CDP API 相對來說較為複雜。在某些情況下，與 CDP 合作並不一定符合人體工學。舉例來說，使用獨立程序的 iframe 需要耗費許多心力。

CDP。
Chrome 開發人員工具通訊協定

舉例來說，點選元素 await coffee.click(); 會轉譯為一系列 CDP 指令。

// CDP: Click on a coffee element

// Mouse pressed
{ 
  command: 'Input.dispatchMouseEvent', 
  parameters: {
    type: 'mousePressed', x: 10.34, y: 27.1, clickCount: 1 }
}

// Mouse released
{ 
  command: 'Input.dispatchMouseEvent', 
  parameters: {
    type: 'mouseReleased', x: 10.34, y: 27.1, clickCount: 1 }
}

什麼是低階控制項？

早在 WebDriver 「經典」開發時代，我們就不需要進行低階控制。但現在網路功能已經改變，現在的網路功能也越來越強大，而現在測試需要更精細的動作。

CDP 的用意是滿足所有偵錯需求，因此與 WebDriver 的「傳統版」相比，這項服務支援的低階控管功能更多。這項功能可以處理下列功能：

  • 擷取主控台訊息
  • 攔截網路要求
  • 模擬裝置模式
  • 模擬地理位置
  • 還有更多獎品等著您！

由於不同架構，無法在 WebDriver 的「經典」中執行這些操作，因為 WebDriver 的「傳統版」是以 HTTP 為基礎，因此難以訂閱及監聽瀏覽器事件。另一方面，CDP 則是以 WebSocket 為基礎的預設支援雙向訊息功能。

後續步驟：WebDriver BiDi

以下簡要說明 WebDriver「傳統」與 CDP 的優勢：

WebDriver 的「經典」 Chrome 開發人員工具通訊協定 (CDP)
最佳跨瀏覽器支援 快速的雙向訊息傳遞
W3C 標準 提供低階控制
專為測試打造

WebDriver BiDi 旨在結合 WebDriver「經典」與「CDP」的優質功能。這是新的標準瀏覽器自動化通訊協定，目前正在開發中。

進一步瞭解 WebDriver BiDi 專案，包括運作方式、願景和標準化程序。