跨瀏覽器測試

本模組重點介紹跨不同瀏覽器測試 Web 專案。我們探討如何識別目標受眾(例如,您最需要關注哪些使用者、瀏覽器和裝置?)、如何進行測試、不同型別程式碼面臨的主要問題以及如何緩解這些問題、哪些工具最有助於幫助您測試和修復問題,以及如何使用自動化來加快測試速度。

先決條件

在嘗試使用此處詳細介紹的工具之前,您確實應該首先學習核心 HTMLCSSJavaScript 語言的基礎知識。

指南

跨瀏覽器測試簡介

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

執行測試的策略

接下來,我們將深入探討如何進行測試,包括識別目標受眾(例如,您應該確保哪些瀏覽器、裝置和其他細分市場都經過測試)、低保真測試策略(獲取各種裝置和一些虛擬機器,並在需要時進行臨時測試)、更高階的策略(自動化,使用專用測試應用)以及與使用者組進行測試。

處理常見的 HTML 和 CSS 問題

在奠定基礎之後,我們將專門研究在 HTML 和 CSS 程式碼中常見的跨瀏覽器問題,以及可以用來防止問題發生或修復已發生問題的工具。這包括程式碼檢查、處理 CSS 字首、使用瀏覽器開發者工具追蹤問題、使用 polyfill 為瀏覽器新增支援、解決響應式設計問題等等。

處理常見的 JavaScript 問題

現在,我們將探討常見的跨瀏覽器 JavaScript 問題以及如何修復它們。這包括如何使用瀏覽器開發者工具追蹤和修復問題、使用 polyfill 和庫解決問題、使現代 JavaScript 功能在舊版瀏覽器中也能正常工作等資訊。

處理常見的無障礙訪問問題

接下來,我們將注意力轉向可訪問性,提供關於常見問題、如何進行簡單測試以及如何使用稽核/自動化工具查詢可訪問性問題的資訊。

實現特性檢測

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

自動化測試簡介

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

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

在本文中,我們將教您如何安裝自己的自動化環境,並使用 Selenium/WebDriver 和 selenium-webdriver 等測試庫(針對 Node)執行自己的測試。我們還將探討如何將您的本地測試環境與上一篇文章中討論過的商業應用整合。