測試內容導向網頁應用程式前端
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
測試至關重要,可確保內容導向網頁應用程式的功能、品質、無障礙功能、安全性和效能。測試可讓您評估使用者體驗,並判斷是否需要進一步開發。您的網頁應用程式應符合品質標準並正常運作。
這些指南提供基本的測試指南,可做為提高網頁應用程式的無障礙程度和容易使用的可用性。
元件 |
色彩對比 |
確保對比度經過最佳化調整,以提升可讀性。應用程式必須針對各種色盲類型進行檢查,以及使用者定義高對比的強迫色彩。 |
字體排版 |
判斷應用程式是否採用不同的裝置和設定。使用相對字型大小和非線性縮放,字體上限仍可使用。 |
圖片 |
確保圖片品質良好,而且可快速載入。請務必檢查沒有網路的正確備用項,以及最佳化的素材資源,以便獲得更高的解析度。 |
導覽 |
確保導覽介面清晰,且可透過滑鼠、觸控和鍵盤瀏覽方式使用。
檢查記錄 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 (世界標準時間)。
[null,null,["上次更新時間:2025-07-25 (世界標準時間)。"],[[["\u003cp\u003eTesting is essential for ensuring the functionality, quality, accessibility, security, and performance of your web application, ultimately enhancing user experience.\u003c/p\u003e\n"],["\u003cp\u003eKey components of web application testing include color contrast, typography, images, navigation, search, forms, and performance.\u003c/p\u003e\n"],["\u003cp\u003eUtilize a variety of accessibility testing tools and methods to cover a comprehensive range of components like ARIA labels, keyboard navigation, and screen reader compatibility.\u003c/p\u003e\n"],["\u003cp\u003eLeverage front-end testing frameworks such as Jest, Vitest, Cypress, Mocha, or Jasmine to efficiently write and automate tests, supporting both behavior-driven and test-driven development.\u003c/p\u003e\n"],["\u003cp\u003eEmploy runner frameworks like Web Test Runner, Playwright, Web Driver, or Node.js's Test Runner for executing tests across multiple environments and platforms.\u003c/p\u003e\n"]]],["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"],null,["# Testing a content-driven web app frontend\n\nTesting is crucial to ensuring the functionality, quality, accessibility,\nsecurity, and performance of your content driven web application. Testing lets\nyou assess the user experience and determine if further development is\nnecessary. Your web application should meet quality standards and perform as\nexpected.\n\nThis provides basic testing guidance for you to consider to make your web\napplication accessible and user-friendly.\n\n| Components ||\n|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| Color contrast | Ensures that the contrast ratio is optimized for readability. Checks need to be done for various types of color blindness and user defined high contrast forced colors. |\n| Typography | Determines if the application accommodates different devices and settings. By using relative font size and non linear scaling the typography can still be usable on the max size. |\n| Images | Ensures that the images are high quality and can load quickly. It is important to check for correct fallbacks with no network and optimized assets for higher resolutions. |\n| Navigation | Ensures that the navigation is clear and usable by mouse, touch and keyboard navigation. Checking the history api ensures the back and forward navigation is also preserved correctly. |\n| Search | Check for low latency in response times to queries in the URL query parameters and search field. |\n| Form | Ensures that all forms are user-friendly to complete and submit. If overriding the default form submission the correct events need to be listened to and checked for proper form reset and protection against malicious user input. |\n| Performance | Ensures that the application is efficient and responsive, with fast load times. This should be an important part of regression testing too. |\n\nThere are [many tools](https://www.w3.org/WAI/ER/tools/) you can\nuse to check web accessibility. It is important to use multiple methods in order\nto cover the range of accessibility components. Be sure to check for ARIA\nlabels, a11y on DOM elements, keyboard navigation, and screen reader use.\n\nFront end testing frameworks, such as [Jest](https://jestjs.io/),\n[Vitest](https://vitest.dev/),\n[Cypress](https://www.cypress.io/),\n[Mocha](https://mochajs.org/) or\n[Jasmine](https://jasmine.github.io/) help you write tests\nefficiently and support behavior-driven and test-driven development. With\nintegrations into CI/CD pipelines you can also automate your tests and help\nprevent regression bugs in commits.\n\nRunner frameworks, such as [Web Test\nRunner](https://modern-web.dev/docs/test-runner/overview/),\n[Playwright](https://playwright.dev/), [Web\nDriver](https://webdriver.io/) or the [Test Runner in\nNode.js](https://nodejs.org/api/test.html) let you execute these\ntests efficiently and support testing across multiple environments and\nplatforms. This is not an exhaustive list and depending on the framework you are\nusing there could be testing built-in."]]