跨瀏覽器測試簡介
什麼是跨瀏覽器測試？
跨瀏覽器測試是指確保網站在各種瀏覽器和裝置上都能正常工作的實踐。Web 開發人員應考慮
- 不同的瀏覽器，包括一些稍微舊一點的瀏覽器，它們不支援所有最新的 JS/CSS 功能。
- 不同的裝置，從桌上型電腦和筆記型電腦到平板電腦和智慧手機，再到智慧電視，具有不同的硬體功能。
- 殘疾人士，他們可能依賴螢幕閱讀器等輔助技術，或僅使用鍵盤。
請記住，你不是你的使用者——僅僅因為你的網站在你的 MacBook Pro 或高階 Galaxy Nexus 上可以正常工作，並不意味著它對所有使用者都能正常工作！
注意：讓網路為所有人服務 討論了不同的瀏覽器、它們的市場份額以及相關的跨瀏覽器相容性問題。
網站應該能夠在不同的瀏覽器和裝置上訪問，並且能夠被殘疾人訪問（例如，螢幕閱讀器友好）。只要核心功能可以透過某種方式訪問，網站就不需要在所有瀏覽器和裝置上提供完全相同的體驗。例如，現代瀏覽器可能有一些動畫、3D 和閃亮的效果，而舊版瀏覽器可能只顯示包含相同資訊的平面圖形。
此外，網站幾乎不可能在所有瀏覽器和裝置上都能正常工作，因此 Web 開發人員應與網站所有者就程式碼將在哪些瀏覽器和裝置上執行達成一致。
為什麼會出現跨瀏覽器問題？
跨瀏覽器問題發生的原因有很多，請注意，這裡我們討論的是在不同瀏覽器/裝置/瀏覽偏好之間行為不同的問題。在處理跨瀏覽器問題之前，你應該已經修復了程式碼中的錯誤（如果需要，請檢視 除錯 HTML、除錯 CSS 和 哪裡出錯了？故障排除 JavaScript 中的先前主題，以重新整理你的記憶）。
跨瀏覽器問題通常發生是因為
- 有時瀏覽器存在錯誤，或者以不同的方式實現功能。這種情況比以前好多了；早在 IE4 和 Netscape 4 競爭成為 20 世紀 90 年代主流瀏覽器時，瀏覽器公司故意以不同的方式實現功能，以試圖獲得競爭優勢，這使得開發人員的生活變得非常糟糕。如今，瀏覽器在遵循標準方面做得更好，但差異和錯誤仍然偶爾會出現。
- 一些瀏覽器對技術功能的支援級別可能不同於其他瀏覽器。當處理瀏覽器剛剛開始實現的尖端功能，或者必須支援不再開發的非常舊的瀏覽器時，這是不可避免的，這些瀏覽器可能在很久以前（即不再對其進行任何新工作）就已停止開發，那時新功能甚至還沒有發明出來。例如，如果你想在你的網站中使用尖端的 JavaScript 功能，它們可能在舊版瀏覽器中無法正常工作。如果你需要支援舊版瀏覽器，你可能需要不使用這些功能，或者在需要時使用某種交叉編譯器將你的程式碼轉換為舊式的語法。
- 某些裝置可能存在限制，導致網站執行緩慢或顯示效果不佳。例如，如果某個網站的設計是為了在臺式電腦上看起來不錯，那麼它在移動裝置上可能會顯得非常小並且難以閱讀。如果你的網站包含大量大型動畫，它在高階平板電腦上可能沒問題，但在低端裝置上可能會反應遲鈍或卡頓。
……以及更多其他原因。
在後面的文章中，我們將探討常見的跨瀏覽器問題，並檢視這些問題的解決方案。
跨瀏覽器測試的工作流程
所有這些跨瀏覽器測試工作聽起來可能既費時又令人恐懼，但它不必如此——你只需要仔細計劃，並確保在正確的地方進行足夠的測試，以確保你不會遇到意外問題。如果你正在從事一個大型專案，你應該定期對其進行測試，以確保新功能對你的目標受眾有效，並且程式碼的新增內容不會破壞之前正常工作的舊功能。
如果你將所有測試都留到專案結束時進行，那麼你發現的任何錯誤都比你邊走邊發現並修復它們要花費更多的時間和成本。
專案的測試和錯誤修復工作流程可以大致分為以下四個階段（這只是一個非常粗略的劃分——不同的人可能對這些事情有不同的做法）
初步計劃 > 開發 > 測試/發現 > 修復/迭代
步驟 2-4 將根據需要重複多次，以完成所有實現。我們將在後續文章中更詳細地介紹測試過程的不同部分，但現在，讓我們先總結一下每個步驟中可能發生的事情。
初步計劃
在初步計劃階段，你可能會與網站所有者/客戶（這可能是你的老闆，或者你正在為其構建網站的外部公司的某個人）舉行幾次計劃會議，在這些會議中，你確定網站應該是什麼——它應該包含哪些內容和功能，它應該是什麼樣子，等等。此時，你還需要了解開發網站需要多長時間——他們的截止日期是什麼，他們將為你的工作支付多少錢？我們不會詳細介紹這一點，但跨瀏覽器問題會對這種計劃產生嚴重影響。
一旦你對所需的功能集以及你可能使用哪些技術來構建這些功能有了瞭解，你應該開始探索目標受眾——這個網站的目標受眾將使用哪些瀏覽器、裝置等？客戶可能已經從他們之前進行的研究中獲得了關於此方面的資料，例如，來自他們擁有的其他網站，或者來自你正在處理的網站的先前版本。如果沒有，你可以透過檢視其他來源獲得一個很好的想法，例如競爭對手的使用統計資料，或網站將服務的國家/地區。你也可以使用一些直覺。
例如，你可能正在構建一個為北美客戶服務的電子商務網站。該網站應該能夠完全在最近幾個版本的流行桌面和移動瀏覽器中執行——這應該包括 Chrome（以及 Edge、Opera，因為它們基於與 Chrome 相同的渲染引擎）、Firefox 和 Safari。它也應該符合 WCAG AA 標準，具備可訪問性。
現在你知道了你的目標測試平臺，你應該回顧一下所需的功能集以及你將使用的技術。例如，如果電子商務網站所有者希望在產品頁面中構建一個由 WebGL 提供支援的每個產品的 3D 導覽，那麼他們需要接受這在所有舊版瀏覽器版本中都無法正常工作。
你應該列出潛在的問題區域。
注意：你可以透過在 MDN（你所在的網站！）上查詢不同的功能來找到技術的瀏覽器支援資訊。你還可以諮詢 caniuse.com，以獲取更多有用的詳細資訊。
一旦你同意了這些細節，你就可以開始開發網站了。
開發
現在開始開發網站。你應該將開發的不同部分拆分為模組，例如，你可能會將不同的網站區域拆分——首頁、產品頁面、購物車、支付流程等。然後，你可能會進一步細分這些模組——實現一個通用的網站頁首和頁尾，實現產品頁面詳細資訊檢視，實現持久的購物車小部件，等等。
跨瀏覽器開發有多種通用策略，例如
- 儘可能讓所有目標瀏覽器中的所有功能都能正常工作。這可能涉及編寫不同的程式碼路徑，以不同的方式在不同的瀏覽器中重現功能，或者使用 Polyfill 使用 JavaScript 或其他技術模擬任何缺少的支援，或者使用允許你編寫一段程式碼並在後臺執行不同操作的庫，具體取決於瀏覽器支援什麼。
- 接受某些功能在所有瀏覽器中都不會以相同的方式工作，並在不支援完整功能的瀏覽器中提供不同的（可接受的）解決方案。有時由於裝置限制，這是不可避免的——無論你如何設計網站，電影寬屏都不會提供與 4 英寸移動螢幕相同的視覺體驗。
- 接受你的網站在某些舊版瀏覽器中無法正常工作，然後繼續前進。如果你的客戶/使用者群對此沒有問題，那麼這沒問題。
通常，你的開發將涉及上述三種方法的組合。最重要的是，你在提交每個小部分之前都要對其進行測試——不要將所有測試都留到最後！
測試/發現
在每個實現階段之後，你需要測試新功能。首先，你應該確保程式碼中沒有任何通用問題阻止你的功能正常工作
- 在系統上的幾個穩定瀏覽器中對其進行測試，例如 Firefox、Safari、Chrome 或 Edge。
- 進行一些低保真可訪問性測試，例如嘗試僅使用鍵盤使用你的網站，或者透過螢幕閱讀器使用你的網站以檢視它是否可導航。
- 在 Android 或 iOS 等移動平臺上進行測試。
此時，修復新程式碼中發現的任何問題。
接下來，你應該嘗試將測試瀏覽器列表擴充套件到完整的目標受眾瀏覽器列表，並開始專注於消除跨瀏覽器問題（有關 確定目標瀏覽器 的更多資訊，請參閱下一篇文章）。例如
- 嘗試在所有你能使用的現代桌面瀏覽器上測試最新的更改——包括桌面上的 Firefox、Chrome、Opera、Edge 和 Safari（理想情況下包括 Mac、Windows 和 Linux）。
- 在常見的手機和平板電腦瀏覽器中進行測試（例如，iPhone/iPad 上的 iOS Safari，iPhone/iPad/Android 上的 Chrome 和 Firefox），
- 還在目標列表中包含的其他任何瀏覽器中進行測試。
最簡單的選擇是自己儘可能多地進行測試（如果你在團隊中工作，可以邀請隊友幫忙）。你應該儘量在真實的物理裝置上進行測試。
如果你沒有辦法在物理硬體上測試所有不同的瀏覽器、作業系統和裝置組合，你也可以使用模擬器（在桌面電腦上使用軟體模擬裝置）和虛擬機器（允許你在桌面電腦上模擬多個作業系統/軟體組合的軟體）。這是一種非常受歡迎的選擇，尤其是在某些情況下——例如，Windows不允許你在同一臺機器上同時安裝多個版本的Windows，因此使用多個虛擬機器通常是唯一的選擇。
另一個選擇是使用者組——利用開發團隊之外的一群人來測試你的網站。這可以是一群朋友或家人，一群其他員工，當地大學的一個班級，或者一個專業的使用者測試設定，人們付費來測試你的網站並提供結果。
最後，你可以使用審計或自動化工具來更智慧地進行測試；隨著專案規模的擴大，這是一個明智的選擇，因為手動進行所有這些測試可能會花費很長時間。你可以設定自己的測試自動化系統（Selenium 是一個流行的選擇），例如，它可以在多個不同的瀏覽器中載入你的網站，並
- 檢視按鈕點選是否成功導致某些事情發生（例如，地圖顯示），在測試完成後顯示結果。
- 對每個瀏覽器截圖，讓你能夠檢視佈局在不同瀏覽器之間是否一致。
如果你希望在測試方面投入資金，也有一些商業工具可以為你自動化大部分的設定和測試（例如 Sauce Labs 和 Browser Stack）。這些型別的工具通常能夠實現持續整合工作流程，在程式碼更改被允許提交到程式碼庫之前，會自動對其進行測試。
在預釋出瀏覽器上進行測試
在預釋出版本的瀏覽器上進行測試通常是一個好主意；請參閱以下連結
如果你在你的網站中使用了非常新的技術，並且想要針對最新的實現進行測試，或者如果你在最新版本的瀏覽器中遇到了錯誤，並且想要檢視瀏覽器開發者是否在更新版本中修復了該錯誤，那麼這一點尤其重要。
修復/迭代
一旦你發現了錯誤，你需要嘗試修復它。
首先要儘可能地縮小錯誤發生的位置。從報告錯誤的人那裡獲取儘可能多的資訊——什麼平臺、裝置、瀏覽器版本等。在類似的配置上嘗試（例如，在不同的桌面平臺上使用相同的瀏覽器版本，或者在同一平臺上使用幾個不同版本的相同瀏覽器）以檢視錯誤的持續範圍。
這可能不是你的錯——如果瀏覽器中存在錯誤，那麼希望供應商會盡快修復它。它可能已經被修復了——例如，如果 Firefox 49 版本中存在錯誤，但在 Firefox Nightly（版本 52）中不再存在，那麼他們已經修復了它。如果它沒有被修復，那麼你可能需要提交一個錯誤報告（請參閱下面的報告錯誤）。
如果這是你的錯，你需要修復它！找出錯誤的原因與任何 Web 開發錯誤的策略相同（同樣，請參閱除錯 HTML、除錯 CSS 和 哪裡出錯了？解決 JavaScript 問題）。一旦你發現了導致錯誤的原因，你需要決定如何在導致問題的特定瀏覽器中解決它——你不能直接更改問題程式碼，因為這可能會破壞其他瀏覽器中的程式碼。通常的方法是透過某種方式分叉程式碼，例如，使用 JavaScript 特性檢測程式碼來檢測問題特性無法工作的情況，並在這些情況下執行一些可以工作的不同程式碼。
修復完成後，你需要重複你的測試過程，以確保你的修復正常工作，並且沒有導致網站在其他地方或其他瀏覽器中出現故障。
報告錯誤
重申上面所說的話，如果你在瀏覽器中發現錯誤，你應該報告它們。