執行測試的策略
本文解釋瞭如何進行跨瀏覽器測試：如何選擇要測試的瀏覽器和裝置，如何實際測試這些瀏覽器和裝置，以及如何與使用者組一起測試。
| 預備知識 | 熟悉核心 HTML、CSS 和 JavaScript 語言；瞭解 跨瀏覽器測試的高階原則。 |
|---|---|
| 目標 | 瞭解跨瀏覽器測試涉及的高階概念。 |
選擇要測試的瀏覽器和裝置
由於你無法測試所有瀏覽器和裝置的組合，因此只需確保你的網站在最重要的瀏覽器和裝置上執行即可。在實際應用中，“重要”通常意味著“在目標受眾中普遍使用”。
你可以根據你打算提供的支援量來對瀏覽器和裝置進行分類。例如
- A 級：常用/現代瀏覽器 — 已知具備能力。徹底測試並提供全面支援。
- B 級：舊版/功能較弱的瀏覽器 — 已知不具備能力。進行測試，並提供更基本的體驗，以完全訪問核心資訊和服務。
- C 級：稀有/未知瀏覽器 — 不進行測試，但假定它們具備能力。提供完整的網站，該網站應該可以執行，至少具有我們防禦性編碼提供的後備方案。
在以下部分中，我們將以這種格式構建支援圖表。
注意：雅虎率先推廣了這種方法，採用了其 分級瀏覽器支援 方法。
預測受眾最常用的瀏覽器
這通常涉及根據使用者人口統計資料進行有根據的猜測。例如，假設你的使用者位於北美和西歐
快速線上搜尋會告訴你，北美和西歐的大多數人使用 Windows 或 Mac 桌上型電腦/筆記型電腦，主要瀏覽器是 Chrome、Firefox、Safari 和 Edge。你可能只想測試這些瀏覽器的最新版本，因為這些瀏覽器會定期更新。所有這些都應該歸入 A 級。
這個人群中的大多數人還使用 iOS 或 Android 手機，所以你可能想測試最新版本的 iOS Safari、舊版 Android 原生瀏覽器的最後幾個版本，以及 iOS 和 Android 上的 Chrome 和 Firefox。理想情況下，你應該在手機和平板電腦上測試這些瀏覽器，以確保響應式設計有效。
Opera Mini 不太擅長運行復雜的 JavaScript，所以我們也應該把它歸入 B 級。
因此，我們選擇測試哪些瀏覽器是基於我們預期使用者會使用的瀏覽器。這給我們帶來了以下支援圖表
- A 級：Windows/Mac 上的 Chrome 和 Firefox，Mac 上的 Safari，Windows 上的 Edge，iPhone/iPad 上的 iOS Safari，手機/平板電腦上的 Android 原生瀏覽器（最後兩個版本），以及手機/平板電腦上的 Chrome 和 Firefox for Android（最後兩個版本）
- B 級：Opera Mini
- C 級：不適用
如果你的目標受眾主要位於其他地方，那麼最常見的瀏覽器和作業系統可能與上述有所不同。
注意：“我公司的 CEO 使用 Blackberry，所以我們最好確保它在上面看起來不錯”也可以是需要考慮的因素。
瀏覽器統計資料
一些網站顯示了某個地區流行的瀏覽器。例如，Statcounter 提供了北美趨勢的概念。
使用分析
如果你能獲得資料，更準確的資料來源是像 Google Analytics 這樣的分析應用程式，它會告訴你人們使用哪些瀏覽器瀏覽你的網站。當然，這依賴於你已經有一個網站來使用它，所以它不適用於全新網站。
你也可以考慮使用開源且注重隱私的分析平臺，例如 Open Web Analytics 和 Matomo。它們期望你自行託管分析平臺。
設定 Google Analytics
- 首先，你需要一個 Google 帳戶。使用此帳戶登入 Google Analytics。
- 選擇 Google Analytics（網路）選項，然後點選 註冊 按鈕。
- 在註冊頁面輸入你的網站/應用程式詳細資訊。這設定起來相當直觀；最重要的是填寫正確的網站 URL 欄位。這需要是你的網站/應用程式的根 URL。
- 填寫完所有內容後，按下 獲取跟蹤 ID 按鈕，然後接受出現的服務條款。
- 下一頁為你提供了一些程式碼片段和其他說明。對於一個基本網站，你需要做的是複製 網站跟蹤 程式碼塊，並將其貼上到你網站上所有需要使用 Google Analytics 跟蹤的不同頁面中。你可以將這些片段放置在你的結束
</body>標籤下方，或者其他適當的位置，以避免與你的應用程式程式碼混淆。 - 將更改上傳到開發伺服器，或你需要程式碼的任何其他位置。
就是這樣！你的網站現在應該可以開始報告分析資料了。
研究分析資料
現在你應該能夠返回 Analytics Web 主頁，並開始檢視你收集的關於你網站的資料（當然，你需要留出一點時間來實際收集一些資料）。
預設情況下，你應該會看到報告選項卡，如下所示
你可以使用 Google Analytics 檢視大量資料——不同類別的自定義報告等——我們沒有時間討論所有這些。 Analytics 入門 為初學者提供了關於報告（以及更多）的一些有用指導。
你可以透過從左側選單中選擇 受眾群體 > 技術 > 瀏覽器和作業系統 來檢視使用者正在使用的瀏覽器和作業系統。
注意：使用 Google Analytics 時，你需要注意誤導性偏差，例如，“我們沒有 Firefox Mobile 使用者”可能會導致你不去支援 Firefox mobile。但如果網站一開始在 Firefox mobile 上就損壞了，那麼你就不會有任何 Firefox Mobile 使用者。
其他注意事項
你應該將可訪問性作為 A 級測試要求。
此外，你應該瞭解特定情況的需求。例如，如果你的產品面向以手機作為主要上網方式的市場，你可能需要將移動瀏覽器支援放在首位。
最終支援圖表
所以，我們最終的支援圖表將如下所示
- A 級：Windows/Mac 上的 Chrome 和 Firefox，Mac 上的 Safari，以及 Edge（各自的最後兩個版本），iPhone/iPad 上的 iOS Safari，手機/平板電腦上的 Android 原生瀏覽器（最後兩個版本），以及手機/平板電腦上的 Chrome 和 Firefox for Android（最後兩個版本）。透過常見可訪問性測試。
- B 級：Opera Mini。
- C 級：Opera，其他小眾現代瀏覽器。
你要測試什麼？
當你的程式碼庫有新的新增需要測試時，在開始測試之前，你應該寫一份需要透過的測試要求列表才能被接受。這些要求可以是視覺上的或功能上的——兩者結合起來才能構成一個可用的網站功能。
此功能的測試標準可以這樣編寫
A 級和 B 級
- 按鈕應該可以透過使用者的主要控制機制啟用，無論是滑鼠、鍵盤還是觸控。
- 切換按鈕應該使資訊框出現/消失。
- 文字應該可讀。
- 使用螢幕閱讀器的視力障礙使用者應該能夠訪問文字。
A 級
- 資訊框在出現/消失時應該平滑地動畫。
- 漸變和文字陰影應該能增強盒子外觀。
你可能會注意到按鈕無法僅透過鍵盤使用。我們可以透過使用 JavaScript 實現切換的鍵盤控制來彌補這一點，或者使用其他方法。
這些測試標準很有用，因為
組建測試實驗室
進行瀏覽器測試的一個選擇是自己進行測試。為此，你可能會結合使用實際物理裝置和模擬環境（使用模擬器或虛擬機器）。
物理裝置
通常，最好使用執行要測試的瀏覽器的真實裝置——這在行為和整體使用者體驗方面提供了最高的準確性。對於一個合理的低級別裝置實驗室，你可能需要以下裝置
- 一臺 Mac，安裝了你需要測試的瀏覽器——這可以包括 Firefox、Chrome、Opera 和 Safari。
- 一臺 Windows PC，安裝了你需要測試的瀏覽器——這可以包括 Edge（或 IE）、Chrome、Firefox 和 Opera。
- 一臺配置較高的 Android 手機和平板電腦，安裝了你需要測試的瀏覽器——這可以包括 Android 上的 Chrome、Firefox 和 Opera Mini，以及原始的 Android 原生瀏覽器。
- 一臺配置較高的 iOS 手機和平板電腦，安裝了你需要測試的瀏覽器——這可以包括 iOS 上的 Safari 以及 Chrome、Firefox 和 Opera Mini。
以下也是不錯的選擇，如果你能獲得的話
- 一臺可用的 Linux PC，以防你需要測試特定於 Linux 版本瀏覽器的錯誤。Linux 使用者通常使用 Firefox、Opera 和 Chrome。如果你只有一臺機器可用，你可以考慮建立一個雙引導機器，在單獨的分割槽上執行 Linux 和 Windows。
- 幾臺配置較低的移動裝置，以便你可以測試動畫等功能在效能較低的處理器上的表現。
你的主要工作機器也可以是安裝其他專用工具的地方，例如輔助功能審計工具、螢幕閱讀器以及模擬器/虛擬機器。
一些大型公司擁有裝置實驗室，其中儲備了大量不同的裝置，使開發人員能夠在非常特定的瀏覽器/裝置組合上查詢錯誤。小型公司和個人通常無法負擔如此複雜的實驗室，因此傾向於使用較小的實驗室、模擬器、虛擬機器和商業測試應用程式。
我們將在下面介紹其他選項。
注意：已經做出了一些努力來建立可公開訪問的裝置實驗室——請參閱 開放裝置實驗室。
注意：我們還需要考慮可訪問性——有許多有用的工具可以安裝在你的機器上以方便可訪問性測試，但我們將在本課程後面的《處理常見可訪問性問題》文章中介紹它們。
模擬器
模擬器本質上是在你的計算機內部執行的程式，它們模擬某種裝置或特定的裝置條件，讓你比不得不尋找特定的硬體/軟體組合進行測試更方便地進行一些測試。
模擬器可能只是測試裝置條件那麼簡單。例如，如果你想對響應式設計的寬度/高度媒體查詢進行一些快速而粗略的測試，你可以使用 Firefox 的 響應式設計模式。Safari 也有類似的模式，可以透過轉到 Safari > 偏好設定，並勾選 顯示開發選單，然後選擇 開發 > 進入響應式設計模式 來啟用。Chrome 也有類似的功能：裝置模式（請參閱 使用裝置模式模擬移動裝置）。
但通常情況下，你必須安裝某種模擬器。你最常需要測試的裝置/瀏覽器如下
- 用於開發 Android 應用程式的官方 Android Studio IDE 對於僅僅在 Google Chrome 或舊版 Stock Android 瀏覽器上測試網站來說有點重量級，但它確實帶有一個強大的 模擬器。如果你想要更輕量級的選項，Andy 是一個不錯的選擇，它可以在 Windows 和 Mac 上執行。
- Apple 提供了一個名為 Simulator 的應用程式，它執行在 Xcode 開發環境之上，並模擬 iPad/iPhone/Apple Watch/Apple TV。這包括原生的 iOS Safari 瀏覽器。不幸的是，這隻能在 Mac 上執行。
你通常也可以找到其他移動裝置環境的模擬器，例如
- 如果你想測試 Opera Mini，可以單獨模擬它。
注意：許多模擬器實際上需要使用虛擬機器（見下文）；在這種情況下，通常會提供說明，並且/或者虛擬機器的使用會整合到模擬器的安裝程式中。
虛擬機器
虛擬機器是在你的桌面計算機上執行的應用程式，它允許你模擬整個作業系統，每個作業系統都獨立地儲存在自己的虛擬硬碟中（通常由主機硬碟上的一個大型檔案表示）。有許多流行的虛擬機器應用程式可用，例如 Parallels、VMware 和 Virtual Box；我們個人喜歡後者，因為它免費。
注意：執行虛擬機器模擬需要大量的硬碟空間；你模擬的每個作業系統都可能佔用大量記憶體。你通常會為每次安裝選擇所需的硬碟空間；你可能只需 10GB 即可，但有些來源建議 50GB 或更多，以便作業系統能夠可靠執行。大多數虛擬機器應用程式提供的一個不錯的選擇是建立一塊動態分配的硬碟，它會根據需要增長和收縮。
要使用 Virtual Box，你需要
- 獲取你想要模擬的作業系統的安裝盤或映象（例如 ISO 檔案）。Virtual Box 無法提供這些；大多數，例如 Windows 作業系統，都是無法免費分發的商業產品。
- 下載適用於你的作業系統的相應安裝程式 並安裝。
- 開啟應用程式；你將看到如下檢視：
- 要建立新的虛擬機器，請點選左上角的 新建 按鈕。
- 按照說明填寫相應的對話方塊。你將
- 為新虛擬機器提供一個名稱
- 選擇要安裝的作業系統和版本
- 設定分配多少 RAM（我們建議 2048MB 或 2GB 左右）
- 建立虛擬硬碟（在包含 立即建立虛擬硬碟、VDI（虛擬磁碟映像） 和 動態分配 的三個對話方塊中選擇預設選項）。
- 選擇虛擬硬碟的檔案位置和大小（選擇一個合適的名稱和位置來儲存它，大小指定大約 50GB，或者你願意指定的任何大小）。
現在，新的虛擬機器應該會出現在主 Virtual Box UI 視窗的左側選單中。此時，你可以雙擊開啟它——它將開始啟動虛擬機器，但尚未安裝作業系統（OS）。此時你需要將對話方塊指向安裝程式映像/磁碟，它將像在物理機器上一樣執行安裝作業系統的步驟。
警告：你需要在此時確保你擁有要安裝在虛擬機器上的作業系統映象，並立即安裝它。如果你此時取消此過程，可能會導致虛擬機器無法使用，並且你需要將其刪除並重新建立。這並非致命，但很煩人。
此過程完成後，你的主機計算機視窗中應該會執行一個虛擬機器作業系統。
你需要像對待任何真實安裝一樣對待這個虛擬作業系統安裝——例如，除了安裝你要測試的瀏覽器外，還要安裝防病毒程式來保護它免受病毒侵害。
擁有多個虛擬機器非常有用，特別是對於 Windows IE/Edge 測試——在 Windows 上，你無法並排安裝多個版本的預設瀏覽器，因此你可能需要構建一個虛擬機器庫，以便根據需要處理不同的測試，例如
- Windows 10 和 Edge 14
- Windows 10 和 Edge 13
注意：虛擬機器另一個好處是虛擬磁碟映象相當獨立。如果你在一個團隊中工作，可以建立一個虛擬磁碟映象，然後複製並分發。只需確保你擁有執行所有這些 Windows 副本或其他你正在執行的許可產品所需的許可證。
自動化和商業應用程式
正如上一章中提到的，透過使用某種自動化系統，你可以減輕很多瀏覽器測試的痛苦。你可以設定自己的測試自動化系統（Selenium 是流行的選擇），這需要一些設定，但當你搞定它時，會非常有益。
還有一些商業工具可用，例如 Sauce Labs、Browser Stack 和 LambdaTest，它們可以為你完成此類工作，而無需擔心設定問題，如果你願意在測試上投入一些資金的話。
另一個替代方案是使用無程式碼測試自動化工具，例如 Endtest。
我們將在本模組後面介紹如何使用這些工具。
使用者測試
在我們繼續之前，我們將透過討論使用者測試來結束本文——如果你有一個願意測試你的新功能的使用者組，這可能是一個不錯的選擇。請記住，這可以像你喜歡的那樣低成本或複雜——你的使用者組可以是一群朋友、一群同事，或一群無償或有償的志願者，這取決於你是否有錢用於測試。
通常，你會讓你的使用者在某種開發伺服器上檢視包含新功能的頁面或檢視，這樣你就不會在完成之前將最終網站或更改上線。你應該讓他們按照一些步驟進行操作，並報告他們得到的結果。提供一組步驟（有時稱為指令碼）很有用，這樣你就可以獲得與你試圖測試的內容相關的更可靠的結果。我們上面在你要測試什麼部分提到了這一點——將那裡詳述的測試標準轉換為要遵循的步驟很容易。例如，以下內容適用於視力正常的使用者
- 在你的臺式計算機上用滑鼠點選幾次問號按鈕。重新整理瀏覽器視窗。
- 在你的臺式計算機上用鍵盤選擇並激活幾次問號按鈕。
- 在你的觸控式螢幕裝置上輕觸幾次問號按鈕。
- 切換按鈕應該使資訊框出現/消失。在上述三種情況中，它是否這樣做了？
- 文字是否可讀？
- 資訊框在出現/消失時是否平滑地動畫？
執行測試時，以下方法也可能是個好主意
- 儘可能設定一個單獨的瀏覽器配置檔案，停用瀏覽器擴充套件和其他此類內容，並在該配置檔案中執行測試（例如，參閱 使用配置檔案管理器建立、刪除和切換 Firefox 配置檔案 和 與他人共享 Chrome 或新增使用者）。
- 在執行測試時，如果可用，使用瀏覽器的隱私模式功能（例如，Firefox 中的 隱私瀏覽，Chrome 中的 隱身模式），這樣就不會儲存 cookie 和臨時檔案等內容。
這些步驟旨在確保你正在測試的瀏覽器儘可能“純淨”，即沒有安裝任何可能影響測試結果的東西。
注意：如果你的硬體條件允許，另一個有用的低成本選項是在低端手機/其他裝置上測試你的網站——隨著網站變得更大，功能更多，網站變慢的可能性也會更高，因此你需要開始更多地考慮效能。嘗試在低端裝置上使你的功能正常執行，將使其在高階裝置上獲得良好體驗的可能性更大。
注意：一些伺服器端開發環境提供了有用的機制，可以將網站更改僅推廣給一部分使用者，從而提供了一種有用的機制，可以在不需要單獨的開發伺服器的情況下，讓一部分使用者測試某個功能。一個例子是 Django Waffle Flags。
總結
閱讀本文後，你應該對如何識別目標受眾/目標瀏覽器列表，以及如何有效地在該列表上執行跨瀏覽器測試有了很好的瞭解。
接下來，我們將把注意力轉向你的測試可能發現的實際程式碼問題，從 HTML 和 CSS 開始。