測試

任何複雜度達到一定程度的程式碼庫都需要有配套的測試系統,以確保在新增新程式碼時,程式碼庫能繼續正確且高效地執行,並持續滿足使用者的需求。本模組列出了您應該開始學習的基礎知識。

注意:本模組最初完全專注於跨瀏覽器測試,但我們正在對其進行重新調整,以涵蓋一般性測試。一旦有時間,我們將更新內容,以涵蓋一般的測試基礎知識、功能和相容性測試,以及可用性測試。

預備知識

在開始本模組之前,您應該已經學習了 HTMLCSSJavaScript 的基礎知識。

教程

跨瀏覽器測試入門

本文作為本模組的開篇,將概述跨瀏覽器測試的主題,解答“什麼是跨瀏覽器測試?”、“您將遇到的最常見問題型別有哪些?”以及“測試、識別和修復問題的主要方法是什麼?”等問題。

執行測試的策略

接下來,我們將深入探討執行測試的細節,包括確定目標受眾(例如,應確保測試哪些瀏覽器、裝置和其他細分市場)、低保真測試策略(準備一系列裝置和一些虛擬機器,並在需要時進行臨時測試)、更高階的技術策略(自動化、使用專用測試應用程式)以及與使用者組一起測試。

處理常見的 HTML 和 CSS 問題

在設定好場景後,我們將具體探討在 HTML 和 CSS 程式碼中會遇到的常見跨瀏覽器問題,以及可用於預防問題發生或修復已發生問題的工具。這包括程式碼 linting、處理 CSS 字首、使用瀏覽器開發者工具來追蹤問題、使用 polyfills 為瀏覽器新增支援、解決響應式設計問題等。

實現特性檢測

功能檢測涉及確定瀏覽器是否支援某個程式碼塊,並根據其是否支援(或不支援)來執行不同的程式碼,從而使瀏覽器始終能夠提供可用的體驗,而不是在某些瀏覽器中崩潰/報錯。本文詳細介紹瞭如何編寫自己的簡單功能檢測、如何使用庫來加速實現,以及像 @supports 這樣的原生功能檢測特性。

自動化測試入門

每天手動在多個瀏覽器和裝置上執行多次測試可能會變得乏味且耗時。為了高效地處理這個問題,您應該熟悉自動化工具。在本文中,我們將介紹現有的工具、如何使用任務執行器,以及如何使用商業瀏覽器測試自動化應用程式(如 Sauce Labs 和 Browser Stack)的基礎知識。

設定您自己的自動化測試環境

在本文中,我們將教您如何安裝自己的自動化環境,並使用 Selenium/WebDriver 和像 Node 的 selenium-webdriver 這樣的測試庫來執行自己的測試。我們還將探討如何將本地測試環境與前文中討論的商業應用程式整合。