測試內容導向網頁應用程式前端
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
測試至關重要,可確保內容導向網頁應用程式的功能、品質、無障礙功能、安全性和效能。測試可讓您評估使用者體驗,並判斷是否需要進一步開發。您的網頁應用程式應符合品質標準並正常運作。
這些指南提供基本的測試指南,可做為提高網頁應用程式的無障礙程度和容易使用的可用性。
元件 |
色彩對比 |
確保對比度經過最佳化調整,以提升可讀性。應用程式必須針對各種色盲類型進行檢查,以及使用者定義高對比的強迫色彩。 |
字體排版 |
判斷應用程式是否採用不同的裝置和設定。使用相對字型大小和非線性縮放,字體上限仍可使用。 |
圖片 |
確保圖片品質良好,而且可快速載入。請務必檢查沒有網路的正確備用項,以及最佳化的素材資源,以便獲得更高的解析度。 |
導覽 |
確保導覽介面清晰,且可透過滑鼠、觸控和鍵盤瀏覽方式使用。
檢查記錄 API 可確保正確保存返回和向前瀏覽功能。 |
搜尋 |
檢查網址查詢參數和搜尋欄位中的查詢回應時間是否縮短。
|
表單 |
請務必提供容易使用及提交的所有表單。如要覆寫預設表單,則需要監聽正確的事件並加以檢查,確認表單是否妥善重設,以及防範惡意使用者輸入內容。 |
效能 |
確保應用程式兼具效率和回應能力,且能快速載入。這也應該是迴歸測試中重要的一環。 |
您可以使用多種工具檢查網頁無障礙功能。為了涵蓋無障礙元件的範圍,請務必使用多種方法。請務必檢查 ARIA 標籤、 DOM 元素、鍵盤導覽和螢幕閱讀器是否使用。
前端測試架構 (例如 Jest、Vitest、Cypress、Mocha 或 Jasmine) 可協助您有效編寫測試,並支援行為導向和測試導向的開發作業。整合至 CI/CD 管道後,您也可以自動執行測試,並避免修訂版本發生迴歸錯誤。
Runner 架構 (例如 Web Test Runner、Playwright、Web Driver 或 Node.js 中的 Test Runner) 可讓您有效率地執行這些測試,並支援跨多個環境和平台的測試。這份清單並未列出所有項目,視您使用的架構而定,或許可以內建測試。
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2025-07-25 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2025-07-25 (世界標準時間)。"],[],["Testing should evaluate web application accessibility, functionality, and performance. Key actions include checking color contrast for readability, ensuring relative typography scaling, and verifying image quality and load times. Navigation should be usable via mouse, touch, and keyboard. Search response times should be fast, and forms must be user-friendly with appropriate event handling. Performance, including fast load times, is vital. Multiple tools and front-end frameworks (e.g., Jest, Cypress) can aid in this process, and automation via CI/CD pipelines is recommended.\n"]]