案例研究 - WebdriverIO 如何協助線上影片公司加速發佈並提升程式碼品質

JW Player 是一個可嵌入的線上影片播放器，每天產生超過十億次的獨特觀看次數。為了維持和擴大這種規模，播放器需要在多種不同的網路和行動平台上運作。這增加了自動化測試的重要性，以便在部署到如此多不同的目標時，提高我們對發布版本的信心。在漫長的專案中轉換了包含 6,000 多個測試的舊有測試框架後，JW Player 的測試工程團隊已經能夠以更少的迴歸問題交付更及時的發布版本。感謝 WebdriverIO，我們沒有遇到任何重大的回滾，並提高了對自身產品品質的信心。

選擇 WebdriverIO

在遷移到 WebdriverIO 之前，我們一直在 Cucumber 之上使用開源的 Ruby 框架。JW Player 正式支援七種桌上型電腦和行動網路瀏覽器，以及追溯到 10 和 4.4 的 iOS 和 Android 版本。為了涵蓋這些平台，我們每晚執行大約 25,000 個 UI 驗收測試。舊有的實作方式產生了兩個問題。首先，我們在 Ruby 中遇到了效能限制，因為在所有平台上執行單一測試可能需要長達 9 小時。其次，由於播放器是以 JavaScript 實作，產品工程師不太可能接受並貢獻基於 Ruby 的框架。轉向 JavaScript 原生框架解決了這兩個問題。

Selenium Webdriver 長期以來一直是網路自動化的首選標準。大約在 2018 年，我們的團隊開始探索幾項新興的測試技術。Cypress 的瀏覽器支援有限，Microsoft Playwright 尚未發布，而 Puppeteer 只會在 Chrome 上執行。基於 Webdriver 的解決方案，憑藉其在瀏覽器供應商中廣泛且專用的支援，顯然是贏家。

最初吸引我們使用 WebdriverIO 的原因是其簡單明瞭的 API 和對我們需要測試的所有瀏覽器和裝置的完整支援，相較之下，Cypress 和 Puppeteer 缺乏對一個或多個必要平台的支援。然而，更重要的是其豐富的插件系統和活躍、積極參與的開發人員社群。來自 Sauce Labs 的贊助（該公司已在測試領域聲名鵲起）讓我們有信心 WebdriverIO 將繼續成長，而不會變成廢棄軟體。

WebdriverIO 開箱即用就支援我們的幾個現有和期望的工具組。例如，Allure 報告（我們用它來快速梳理產品缺陷）以及 Report Portal（我們用它來監控測試健康狀況並追蹤一段時間內的趨勢）等工具都讓我們可以輕鬆整合。細緻的執行前和執行後掛鉤讓測試工程師擁有前所未有的能力來塑造測試的執行方式和位置。

Webdriver.IO 實務方法

隨著越來越多功能被新增到 WebdriverIO 中，我們可以透過刪除開源相依性和雜亂的 mixin 程式碼來不斷簡化我們的程式碼庫。我們甚至能夠讓舊框架所依賴的服務完全停止運作。

• 去年發布的 網路基本功能，讓我們能夠刪除對 Browsermob Proxy 的依賴，Browsermob Proxy 是一個常用的代理工具，用於 Selenium Webdriver 應用程式中攔截和操作 HTTP 請求。我們現在呼叫 browser.mock()，指定我們要擷取的請求的子字串或 regex，並提供一個簡單的模擬物件來取代資產。延遲回應的能力讓我們可以自動化幾個需要手動執行的複雜測試。然後，我們能夠驗證當特定請求（例如廣告）由於網路或其他外部條件而延遲時，播放器的行為是否正常

  // mock.js
  export function delayResponse3seconds() {
      return new Promise((resolve) => setTimeout(() => {
          return resolve('{ "foo": bar }');
      }, 3000));
  }
  
  // test.js
  import { delayResponse3seconds } from './mock';
  
  function rewritePattern(pattern, replacement) {
     console.log(`Attempting to rewrite: ${pattern} with: ${replacement}`);
     const toRewrite = browser.mock(`**/${pattern}`);
     toRewrite.respond(delayResponse3seconds);
     console.log(`Successfully rewrote ${pattern} to ${replacement}`);
  }

• 開箱即用的 Chrome Devtools 協議支援也使我們能夠自動化一些手動繁瑣的測試。在初始頁面載入後，能夠呼叫 browser.throttle(“Good3G”) 讓我們能夠更準確地驗證行動使用者在更真實條件下影片播放器的行為。

• 感謝 WebdriverIO 的 CDP 對應，我們能夠建立和維護一套效能測試。在頁面載入並與播放器互動後，呼叫 browser.getMetrics() 讓我們能夠驗證當播放器設定並嵌入到客戶網站上時，不會對最終使用者造成任何不必要的累計版面配置位移，從而造成破壞性的頁面載入體驗。

摘要

總體而言，JW Player 遷移到 WebdriverIO 絕對是巨大的成功。除了效能和舊框架的「生活品質」改進之外，WebdriverIO 的功能集還讓我們能夠自動化數百個手動測試案例。我們已經能夠大幅縮短迴歸週期，從大約 1 週縮短到僅需幾天。然而，最重要的是，這些改進讓我們能夠發現創紀錄數量的缺陷，從而提高產品品質並提供更多客戶價值。