İçerik odaklı web uygulaması ön ucunu test etme
Koleksiyonlar ile düzeninizi koruyun
İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.
Testler, içerik odaklı web uygulamanızın işlevselliğini, kalitesini, erişilebilirliğini, güvenliğini ve performansını sağlamak için çok önemlidir. Testler, kullanıcı deneyimini değerlendirmenize ve daha fazla geliştirme gerekip gerekmediğini belirlemenize olanak tanır. Web uygulamanız kalite standartlarını karşılamalı ve beklendiği gibi çalışmalıdır.
Bu adım, web uygulamanızı erişilebilir ve kullanıcı dostu hale getirmek için göz atabileceğiniz temel test rehberliğini sağlar.
| Bileşenler |
| Renk kontrastı |
Kontrast oranının okunabilirlik için optimize edilmesini sağlar. Çeşitli renk körlüğü türleri ve kullanıcı tanımlı yüksek kontrastlı zorunlu renkler için kontrollerin yapılması gerekir.
|
| Yazı biçimi |
Uygulamanın farklı cihazları ve ayarları barındırıp barındıramayacağını belirler. Tipografi, göreli yazı tipi boyutu ve doğrusal olmayan ölçeklendirme kullanılarak maksimum boyutta kullanılabilir.
|
| Resimler |
Resimlerin yüksek kaliteli olmasını ve hızlı bir şekilde yüklenebilmesini sağlar. Ağ içermeyen doğru yedeklerin ve daha yüksek çözünürlükler için optimize edilmiş öğelerin olup olmadığını kontrol etmek önemlidir.
|
| Gezinme |
Gezinmenin anlaşılır olmasını ve fare, dokunma ve klavyeyle kullanılabilmesini sağlar.
Geçmiş API'sini denetlemek, geri ve ileri gezinme işlevlerinin de doğru bir şekilde
korunmasını sağlar.
|
| Arama |
URL sorgu parametreleri ve arama alanında bulunan sorgulara yanıt sürelerinin düşük olup olmadığını kontrol edin.
|
| Form |
Tüm formların doldurulması ve gönderilmesinin kullanıcı dostu olmasını sağlar. Varsayılan form gönderme işlemi geçersiz kılınırsa doğru etkinlikler dinlenip doğru form sıfırlaması ve kötü amaçlı kullanıcı girişine karşı koruma için kontrol edilmelidir.
|
| Performans |
Uygulamanın verimli ve duyarlı olmasını, ayrıca hızlı yükleme sürelerinin olmasını sağlar. Bu, regresyon testinin de önemli bir parçası olmalıdır.
|
Web erişilebilirliğini kontrol etmek için
kullanabileceğiniz birçok araç vardır. Çeşitli erişilebilirlik bileşenlerini kapsamak için
birden fazla yöntem kullanmak önemlidir. ARIA etiketlerini, DOM öğelerinde a11y'yi, klavyeyle gezinmeyi ve ekran okuyucu kullanımını kontrol ettiğinizden emin olun.
Jest, Vitest, Cypress, Mocha veya Jasmine gibi kullanıcı arabirimi test çerçeveleri, testleri verimli bir şekilde yazmanıza ve davranış odaklı ve test odaklı gelişimi desteklemenize yardımcı olur. Ayrıca CI/CD ardışık düzenlerine entegre ederek testlerinizi otomatikleştirebilir ve kaydetmelerdeki regresyon hatalarının önlenmesine yardımcı olabilirsiniz.
Web Test Runner, Playwright, Web Driver veya Node.js'deki Test Çalıştırıcısı gibi çalıştırıcı çerçeveleri, bu testleri verimli bir şekilde yürütmenizi ve birden çok ortam ve platformda testleri desteklemenizi sağlar. Bu, kapsamlı bir liste değildir ve kullandığınız çerçeveye bağlı olarak yerleşik testler olabilir.
Aksi belirtilmediği sürece bu sayfanın içeriği Creative Commons Atıf 4.0 Lisansı altında ve kod örnekleri Apache 2.0 Lisansı altında lisanslanmıştır. Ayrıntılı bilgi için Google Developers Site Politikaları'na göz atın. Java, Oracle ve/veya satış ortaklarının tescilli ticari markasıdır.
Son güncelleme tarihi: 2025-07-25 UTC.
[null,null,["Son güncelleme tarihi: 2025-07-25 UTC."],[[["\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."]]
