測試非常重要。無論您要將整個網站或應用程式,還是新功能,提供給使用者前,都必須先進行這項重要步驟,確認一切運作正常。不過,許多測試仍需手動執行,同事或測試工程師會被要求檢查新功能,並回報問題。
雖然這類手動測試可找出某些類別的問題,但可能會遺漏許多問題。進行測試的人員可能會遺漏極端情況,或完全無法透過應用程式測試特定歷程。他們也沒有您編寫程式碼時擁有的所有資訊,因此不知道您為了避免哪些特定問題而加入程式碼。隨著時間流逝,新功能也陸續加入,他們會回頭重新測試所有先前運作正常的功能,確保變更不會導致這些功能無法正常運作嗎?
因此,Chrome 團隊認為自動化測試非常重要。使用可靠且可重複測試功能是否有問題的測試套件,您就能確保在現在和日後的開發作業中,每個細節都經過測試。您身為功能開發人員的知識會封裝在測試中。
不過,我們也瞭解自動化測試可能會帶來挑戰。因此,Chrome 團隊提供下列工具和指南,盡可能讓您無縫轉換。
布偶操作員
Puppeteer 是 Node.js 程式庫。您可以使用這項服務,透過易於使用的高階 API 自動化 Chrome、Chromium 和 Firefox。
雖然這個 API 原本是以 Chrome DevTools 通訊協定為基礎,但目標是在今年底前,將新的進階 WebDriver BiDi 通訊協定做為 Puppeteer 的基礎。WebDriver BiDi 由所有主要瀏覽器供應商共同開發,可簡化許多自動化用途,並支援許多新用途,且與各瀏覽器相容。
。但您不必等待。Puppeteer 的 API 目前已支援許多自動化用途,而 WebDriver BiDi 只會進一步改善這些用途。從測試、視覺檢索到程序自動化,您可以透過網頁互動、要求攔截和螢幕截圖等功能,執行許多操作。您甚至可以使用它,透過 WebGPU 和 WebGL 在雲端測試網路 AI 模型。
WebdriverIO 是完整的瀏覽器測試架構,而 Privacy Sandbox 分析工具 也使用 Puppeteer,可讓您更深入瞭解網站上的 Cookie 和使用者資料使用情形。
無頭 Chrome
如果你曾使用 Puppeteer 自動化 Chrome,可能會發現在執行測試時,系統不會顯示瀏覽器視窗。根據預設,Puppeteer 會以無頭模式啟動 Chrome。也就是說,在自動化動作執行期間,系統不會顯示實際的瀏覽器視窗。
不過,你知道 Chrome 的無頭模式不僅是沒有視窗的 Chrome,其實也是完全獨立維護的 Chrome 版本嗎?這會導致混淆,且難以追蹤錯誤和問題。
自 Chrome 112 起,我們推出了新的無頭模式,現在採用與一般 Chrome 相同的程式碼集。這不僅可減少先前的混淆情形,還可提供先前無法使用的功能,例如在自動化期間使用擴充功能。
自 22 版起,Puppeteer 就會預設使用這項新功能。如果您透過其他自動化解決方案使用無頭 Chrome,可以使用 --headless=new
命令列切換鍵強制啟用新的無頭模式。
雖然 Chrome 的新無頭模式功能更強大,但不如舊版無頭模式輕巧。如果資源非常有限,或不需要 Chrome 的所有功能,您可以使用舊版無頭模式做為 chrome-headless-shell
。
Chrome for Testing
測試時,您需要對測試環境 (作業系統、瀏覽器和瀏覽器版本) 進行精細控管。但由於 Chrome 會自動更新,因此這可能會很困難。
因此,我們推出了 Chrome 測試版,這是一個沒有自動更新功能的 Chrome 版本,可在每個主要作業系統上使用,並與每個 Chrome 版本一併發布,可透過版本化封存檔存取。這樣一來,您就能針對特定版本的 Chrome 執行自動化工作流程,而無須進行太多調整。
您可以透過 Chrome 測試版可用性資訊主頁、JSON API 或 Puppeteer 指令列公用程式存取 Chrome 測試版二進位檔。
Puppeteer、Chrome 的更新無頭模式,以及 Chrome for Testing 只是我們團隊目前正在進行的部分工作,目的是讓瀏覽器自動化和執行測試的過程盡可能順暢。開發人員工具錄製器等相關工具可協助您建立測試:在 Chrome 中記錄使用者流程,然後在 Puppeteer 中重播。
在 web.dev 上瞭解測試
本文介紹的工具有助於改善自動化測試。不過,如果您是初學者,可能會覺得有許多內容需要理解和學習。因此,我們特別推出了 10 個單元課程Learn Testing on web.dev。這門深入課程涵蓋測試的核心概念、測試執行的位置和方式、測試類型,以及實際測試的內容。這會是測試旅程的絕佳起點。掌握基本概念後,歡迎前往自動化測試專區,深入瞭解更多測試問題的實用訣竅。