Front-End einer inhaltsorientierten Webanwendung testen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Tests sind entscheidend, um die Funktionalität, Qualität, Zugänglichkeit, Sicherheit und Leistung Ihrer inhaltsbasierten Webanwendung sicherzustellen. Durch Tests können Sie die Nutzererfahrung bewerten und feststellen, ob weitere Entwicklungen erforderlich sind. Ihre Webanwendung sollte die Qualitätsstandards erfüllen und erwartungsgemäß funktionieren.
Hier finden Sie grundlegende Informationen zum Testen, mit denen Sie Ihre Webanwendung barrierefrei und nutzerfreundlich gestalten können.
| Komponenten |
| Farbkontrast |
Stellt sicher, dass das Kontrastverhältnis für Lesbarkeit optimiert ist. Für verschiedene Arten von Farbenblindheit und benutzerdefinierte Farben mit hohem Kontrast müssen Prüfungen durchgeführt werden.
|
| Typografie |
Ermittelt, ob die Anwendung verschiedene Geräte und Einstellungen unterstützt. Durch die Verwendung der relativen Schriftgröße und der nicht linearen Skalierung kann die Typografie trotzdem mit der maximalen Größe verwendet werden.
|
| Bilder |
Stellt sicher, dass die Bilder eine hohe Qualität haben und schnell geladen werden können. Es ist wichtig, nach korrekten Fallbacks ohne Netzwerk und ohne optimierte Assets für höhere Auflösungen zu suchen.
|
| Navigation |
Die Navigation muss klar verständlich sein und Sie können mit der Maus, Berührung und der Tastatur bedient werden.
Durch Prüfen der History API wird sichergestellt, dass die Vor- und Zurück-Navigation ebenfalls korrekt erhalten bleibt.
|
| Suche |
Prüfen Sie, ob die Antwortzeiten in den URL-Suchparametern und im Suchfeld niedrig sind.
|
| Form |
Es wird sichergestellt, dass alle Formulare benutzerfreundlich ausgefüllt und eingereicht werden können. Wenn Sie die Standardformularübermittlung überschreiben, müssen die korrekten Ereignisse erfasst und geprüft werden, damit das Formular ordnungsgemäß zurückgesetzt und vor böswilliger Nutzereingabe geschützt wird.
|
| Leistung |
Stellt sicher, dass die Anwendung effizient und reaktionsschnell ist und kurze Ladezeiten ermöglicht. Dies sollte auch ein wichtiger Bestandteil von Regressionstests sein.
|
Es gibt viele Tools, mit denen Sie die Barrierefreiheit im Internet prüfen können. Es ist wichtig, mehrere Methoden zu verwenden, um die Bandbreite der Bedienungshilfen abzudecken. Achten Sie auf ARIA-Labels, A11y bei DOM-Elementen, Tastaturnavigation und Screenreader-Nutzung.
Mit Front-End-Test-Frameworks wie Jest, Vitest, Cypress, Mocha oder Jasmine können Sie Tests effizient schreiben und eine verhaltens- und testgesteuerte Entwicklung unterstützen. Durch die Einbindung in CI/CD-Pipelines können Sie auch Ihre Tests automatisieren und Regressionsfehler in Commits vermeiden.
Mit Runner-Frameworks wie Web Test Runner, Playwright, Web Driver oder dem Test Runner in Node.js können Sie diese Tests effizient ausführen und unterstützen Tests in mehreren Umgebungen und Plattformen. Diese Liste ist nicht vollständig und je nach verwendetem Framework können Tests integriert sein.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-07-25 (UTC).
[null,null,["Zuletzt aktualisiert: 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."]]
