Prueba el frontend de una app web basada en el contenido
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
Las pruebas son fundamentales para garantizar la funcionalidad, la calidad, la accesibilidad, la seguridad y el rendimiento de tu aplicación web basada en contenido. Las pruebas te permiten evaluar la experiencia del usuario y determinar si se requiere más desarrollo. Tu aplicación web debe cumplir con los estándares de calidad y tener el rendimiento esperado.
Esto proporciona una guía de prueba básica que debes tener en cuenta para hacer que tu aplicación web sea accesible y fácil de usar.
Componentes |
Contraste de color |
Garantiza que la proporción de contraste esté optimizada para la legibilidad. Se deben realizar verificaciones para varios tipos de daltonismo y los colores forzados con alto contraste definidos por el usuario.
|
Tipografía |
Determina si la aplicación se adapta a diferentes dispositivos y configuraciones. Si se usa el tamaño de fuente relativo y el escalamiento no lineal, la tipografía se puede seguir usando en el tamaño máximo.
|
Imágenes |
Garantiza que las imágenes sean de alta calidad y se puedan cargar rápidamente. Es importante verificar los resguardos correctos sin red y elementos optimizados para resoluciones más altas.
|
Navigation |
Garantiza que la navegación sea clara y fácil de usar con el mouse, la navegación táctil y el teclado.
La verificación de la API de History garantiza que la navegación hacia atrás y hacia adelante también se conserve correctamente.
|
Buscar |
Verifica si hay una latencia baja en los tiempos de respuesta a las consultas en el campo de búsqueda y los parámetros de consulta de la URL.
|
Formulario |
Garantiza que todos los formularios sean fáciles de completar y enviar. Si se anula el envío predeterminado de formularios, se deben escuchar y verificar los eventos correctos para restablecer el formulario correctamente y garantizar la protección contra entradas de usuarios maliciosos.
|
Rendimiento |
Garantiza que la aplicación sea eficiente y responsiva, con tiempos de carga rápidos. Esta también debería ser una parte importante de las pruebas de regresión.
|
Existen muchas herramientas que puedes usar para verificar la accesibilidad web. Es importante usar varios métodos para abarcar el rango de componentes de accesibilidad. Asegúrate de verificar las etiquetas ARIA, la accesibilidad en los elementos del DOM, la navegación con teclado y el uso del lector de pantalla.
Los frameworks de prueba de frontend, como Jest, Vitest, Cypress, Mocha o Jasmine, te ayudan a escribir pruebas de manera eficiente y admitir el desarrollo basado en comportamientos y en pruebas. Con las integraciones en canalizaciones de CI/CD, también puedes automatizar tus pruebas y ayudar a evitar errores de regresión en las confirmaciones.
Los frameworks del ejecutor, como el ejecutor de pruebas web, Playwright, el controlador web o el ejecutor de pruebas de Node.js, te permiten ejecutar estas pruebas de manera eficiente y admitir pruebas en varios entornos y plataformas. Esta no es una lista exhaustiva y, según el framework que uses, es posible que haya pruebas integradas.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-07-25 (UTC)
[null,null,["Última actualización: 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."]]