執行測試的策略
本文介紹瞭如何進行跨瀏覽器測試：如何選擇要測試的瀏覽器和裝置，如何實際測試這些瀏覽器和裝置，以及如何與使用者組一起測試。
| 先決條件 | 熟悉核心 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 原生瀏覽器（最後兩個版本）、Android 版 Chrome 和 Firefox（最後兩個版本）在手機/平板電腦上
- B級：Opera Mini
- C級：n/a
如果您的目標受眾主要位於其他地區，則最常見的瀏覽器和作業系統可能與上述不同。
注意：“我公司執行長使用黑莓手機，因此我們最好確保它在該手機上看起來不錯”也是需要考慮的事情。
瀏覽器統計資料
某些網站會顯示特定區域中流行的瀏覽器。例如，Statcounter 提供了北美趨勢的概覽。
使用分析
如果您能獲得更準確的資料來源，則可以使用 Google Analytics 等分析應用程式，例如 Google Analytics，它會準確告訴您人們使用哪些瀏覽器瀏覽您的網站。當然，這依賴於您已經擁有可用於此目的的網站，因此不適用於全新的網站。
您也可以考慮使用開源且注重隱私的分析平臺，例如 Open Web Analytics 和 Matomo。他們希望您自行託管分析平臺。
設定 Google Analytics
- 首先，您需要一個 Google 帳戶。使用此帳戶登入 Google Analytics。
- 選擇 Google Analytics（網路）選項，然後點選“註冊”按鈕。
- 在註冊頁面中輸入您的網站/應用詳細資訊。設定非常直觀；最重要的欄位是網站 URL。這需要是您網站/應用的根 URL。
- 填寫完所有內容後，按“獲取跟蹤 ID”按鈕，然後接受出現的服務條款。
- 下一頁將提供一些程式碼片段和其他說明。對於基本網站，您需要做的就是複製“網站跟蹤”程式碼塊，並將其貼上到您希望使用 Google Analytics 在網站上跟蹤的所有不同頁面中。您可以將程式碼片段放在結束的
</body>標記下方，或其他合適的位置，以防止它與您的應用程式程式碼混淆。 - 將更改上傳到開發伺服器或其他需要程式碼的位置。
就是這樣！您的網站現在應該可以開始報告分析資料了。
研究分析資料
現在，您應該能夠返回到 Analytics 網頁主頁，並開始檢視您收集到的有關網站的資料（當然，您需要留出一點時間才能實際收集一些資料）。
預設情況下，您應該會看到報告選項卡，如下所示
您可以使用 Google Analytics 檢視大量資料——不同類別的自定義報告等——我們沒有時間一一討論。Analytics 入門指南為初學者提供了有關報告（以及更多內容）的一些有用指導。
您可以透過從左側選單中選擇“受眾 > 技術 > 瀏覽器和作業系統”來檢視使用者使用的瀏覽器和作業系統。
注意：使用 Google Analytics 時，需要注意誤導性偏差，例如“我們沒有 Firefox 移動使用者”可能會導致您不費心支援 Firefox 移動版。但如果網站在 Firefox 移動版上最初就存在問題，那麼您將不會有任何 Firefox 移動使用者。
其他注意事項
您應將可訪問性作為 A 級測試要求（我們將在我們的處理常見可訪問性問題文章中介紹確切的測試內容）。
此外，您還應瞭解特定情況的需求。例如，如果您的產品針對行動電話是訪問網際網路主要方式的市場，則可能需要優先考慮移動瀏覽器支援。
最終支援圖表
因此，我們的最終支援圖表最終將如下所示
- A級：Windows/Mac 版 Chrome 和 Firefox、Mac 版 Safari 和 Edge（每個瀏覽器的最後兩個版本）、iPhone/iPad 版 iOS Safari、手機/平板電腦上的 Android 原生瀏覽器（最後兩個版本）、Android 版 Chrome 和 Firefox（最後兩個版本）在手機/平板電腦上。可訪問性透過常見測試。
- 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 版本的特定錯誤，則可以使用 Linux PC。Linux 使用者通常使用 Firefox、Opera 和 Chrome。如果只有一臺機器可用，您可以考慮建立一臺雙啟動機器，在單獨的分割槽上執行 Linux 和 Windows。Ubuntu 的安裝程式使設定變得非常容易；請參閱WindowsDualBoot以獲取相關幫助。
- 幾個低規格的移動裝置，以便您可以測試動畫等功能在功能較弱的處理器上的效能。
您的主要工作機器也可以用作安裝其他工具以用於特定目的的地方，例如可訪問性稽核工具、螢幕閱讀器和模擬器/虛擬機器。
一些大型公司擁有裝置實驗室，這些實驗室儲存了大量不同的裝置，使開發人員能夠在非常具體的瀏覽器/裝置組合上查詢錯誤。小型公司和個人通常無法負擔如此複雜的實驗室，因此傾向於使用較小的實驗室、模擬器、虛擬機器和商業測試應用程式。
我們將在下面介紹其他每個選項。
注意： 已經有一些努力致力於建立公共訪問的裝置實驗室——請參閱 開放裝置實驗室。
注意： 我們還需要考慮可訪問性——您可以安裝許多有用的工具到您的機器上以方便進行可訪問性測試，但我們將在稍後的課程中的“處理常見可訪問性問題”文章中介紹這些內容。
模擬器
模擬器基本上是在您的計算機內部執行的程式，它們可以模擬某種裝置或特定裝置條件，使您可以比必須找到特定硬體/軟體組合進行測試更方便地進行一些測試。
模擬器可能像測試裝置條件一樣簡單。例如，如果您想快速粗略地測試響應式設計的寬度/高度媒體查詢，您可以使用 Firefox 的 響應式設計模式。Safari 也有類似的模式，可以透過轉到 Safari > 首選項 並選中 顯示“開發”選單，然後選擇 開發 > 進入響應式設計模式 來啟用。Chrome 也有一些類似的功能：裝置模式（請參閱 使用裝置模式模擬移動裝置）。
不過，大多數情況下，您需要安裝某種模擬器。您需要測試的最常見的裝置/瀏覽器如下所示
- 用於開發 Android 應用的官方 Android Studio IDE 對於僅在 Google Chrome 或舊的原生 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）。此時，您需要將對話方塊指向安裝程式映像/磁碟，它將像在物理機器上一樣執行安裝 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 標誌。