Para los desarrolladores, es mejor detectar cualquier defecto de accesibilidad durante las pruebas unitarias y E2E. Esta charla mostrará cómo automatizar las pruebas de accesibilidad utilizando jest y cypress.
Cómo detectar defectos de accesibilidad durante las pruebas unitarias y E2E
Video Summary and Transcription
Esta charla proporciona formas de detectar defectos de accesibilidad durante las pruebas, incluyendo la adición de pruebas de accesibilidad a un sitio web para Studio Ghibli utilizando React, NX, Jazz, JazzX, Cypress y CypressX. Se enfatiza la importancia de unitizar componentes y realizar pruebas de extremo a extremo con Cypress y CypressX para garantizar la accesibilidad. Se explica el proceso de configuración de las pruebas de CypressX, destacando el uso de typings y el archivo de soporte de CypressX. Estas herramientas facilitan a los desarrolladores evitar errores de accesibilidad durante el desarrollo.
1. Introducción a las pruebas de accesibilidad
Voy a mostrarles algunas formas de detectar defectos de accesibilidad durante las pruebas. Los errores de accesibilidad son difíciles de solucionar, especialmente cuando las pruebas se realizan al final de un proyecto. Voy a demostrar cómo agregar pruebas de accesibilidad a un sitio web para Studio Ghibli. La pila tecnológica incluye React, NX, Jazz, JazzX, Cypress y CypressX.
Hola a todos, les voy a mostrar algunas formas de detectar defectos de accesibilidad durante las pruebas de unidad y de extremo a extremo. Primero, un poco sobre mí, soy Emily, soy una desarrolladora en Toronto y actualmente trabajo para una empresa llamada Narwhal. Así es como me siento cuando tengo que solucionar un error de accesibilidad, básicamente haciendo muchos parches. Como desarrolladora, el accesibilidad es el tipo de error que no quiero que me asignen. En mis proyectos anteriores, las pruebas de accesibilidad generalmente se realizan al final del proyecto, para cuando tengo que solucionar esos errores, la página ya está construida. Es muy difícil hacer cambios estructurales y mover componentes en ese momento. Esta charla les mostrará algunas formas de automatizar algunas pruebas de accesibilidad mientras estamos desarrollando. Les voy a mostrar cómo agrego pruebas de accesibilidad a este sitio web simple que he creado. Es un motor de búsqueda para Studio Ghibli. Studio Ghibli es una compañía de animación japonesa. Esta aplicación simple te permitirá buscar películas y personajes de este estudio. Así es como se ve este sitio web. Puedes buscar cualquier cosa, por ejemplo, princesa. Si ingreso princesa aquí y busco, me mostrará todas las películas relacionadas con princesas. Si busco, por ejemplo, Kiki aquí, me mostrará películas y personajes relacionados con Kiki. Puedo hacer clic en la película aquí y me mostrará los detalles de la película. Pasemos rápidamente por la pila tecnológica. El frontend es React. La herramienta Monorepo es NX, que es desarrollada por mi empresa Noworld. NX es una herramienta poderosa que configurará las pruebas de unidad y de extremo a extremo para tu caja de herramientas. Así que te recomiendo que lo pruebes. Para las pruebas de unidad, voy a usar Jazz y JazzX. Para las pruebas de extremo a extremo, voy a usar Cypress y CypressX. Para las pruebas de unidad, uso Jazz y JazzX. Puedes instalar JazzX y sus tipos. Usa el comando aquí. Ahora, con JazzX instalado, necesito configurarlo. Agrego un archivo de configuración llamado Jazz.setup.js aquí. Dentro del archivo JazzConfig, necesito agregar la clave SetupFileAfterEnvironment y
2. Unitizando Componentes y Pruebas de Extremo a Extremo
La configuración está lista. Ahora quiero unitizar el componente del formulario de búsqueda para verificar violaciones de accesibilidad. Los desarrolladores pueden agregar pruebas similares a cada componente de la aplicación para garantizar la accesibilidad. Pasemos a las pruebas de extremo a extremo con Cypress y CypressX. Aquí hay una prueba de Cypress para la página de búsqueda.
Tengo una prueba de Cypress para la página de búsqueda, que básicamente consiste en ingresar texto en el campo de búsqueda. Enviar el formulario de búsqueda y asegurarse de que se redirija a la página de resultados con el
3. Pruebas de CypressX y Accesibilidad
Para configurar las pruebas de CypressX, agregue typings en el archivo tx.config e importe desde CypressX en el archivo de soporte. Luego, inyecte X en la declaración before each y agregue la prueba. Verifique la accesibilidad. Al ejecutar nuevamente la prueba de Cypress, se mostrarán las violaciones de accesibilidad en la página de búsqueda. Estas herramientas facilitan a los desarrolladores evitar errores de accesibilidad durante el desarrollo.