測試內容導向網頁應用程式前端

測試至關重要,可確保內容導向網頁應用程式的功能、品質、無障礙功能、安全性和效能。測試可讓您評估使用者體驗,並判斷是否需要進一步開發。您的網頁應用程式應符合品質標準並正常運作。

這些指南提供基本的測試指南,可做為提高網頁應用程式的無障礙程度和容易使用的可用性。

元件
色彩對比 確保對比度經過最佳化調整,以提升可讀性。應用程式必須針對各種色盲類型進行檢查,以及使用者定義高對比的強迫色彩。
字體排版 判斷應用程式是否採用不同的裝置和設定。使用相對字型大小和非線性縮放,字體上限仍可使用。
圖片 確保圖片品質良好,而且可快速載入。請務必檢查沒有網路的正確備用項,以及最佳化的素材資源,以便獲得更高的解析度。
導覽 確保導覽介面清晰,且可透過滑鼠、觸控和鍵盤瀏覽方式使用。 檢查記錄 API 可確保正確保存返回和向前瀏覽功能。
搜尋 檢查網址查詢參數和搜尋欄位中的查詢回應時間是否縮短。
表單 請務必提供容易使用及提交的所有表單。如要覆寫預設表單,則需要監聽正確的事件並加以檢查,確認表單是否妥善重設,以及防範惡意使用者輸入內容。
效能 確保應用程式兼具效率和回應能力,且能快速載入。這也應該是迴歸測試中重要的一環。

您可以使用多種工具檢查網頁無障礙功能。為了涵蓋無障礙元件的範圍,請務必使用多種方法。請務必檢查 ARIA 標籤、 DOM 元素、鍵盤導覽和螢幕閱讀器是否使用。

前端測試架構 (例如 JestVitestCypressMochaJasmine) 可協助您有效編寫測試,並支援行為導向和測試導向的開發作業。整合至 CI/CD 管道後,您也可以自動執行測試,並避免修訂版本發生迴歸錯誤。

Runner 架構 (例如 Web Test RunnerPlaywrightWeb DriverNode.js 中的 Test Runner) 可讓您有效率地執行這些測試,並支援跨多個環境和平台的測試。這份清單並未列出所有項目,視您使用的架構而定,或許可以內建測試。