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.
![TestJS Summit 2021](https://gitnation.imgix.net/stichting-frontend-amsterdam/image/upload/v1619376949/rlwmbgekjgai9xefiety.png?auto=format,compress&fit=scale&w=60)
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.
En su ejemplo, Emily demostró cómo realizar una prueba de unidad en un componente de formulario de búsqueda para verificar la ausencia de violaciones de accesibilidad.
Emily es una desarrolladora que trabaja en Toronto para una empresa llamada Narwhal.
Emily tiene como objetivo mostrar cómo detectar y manejar defectos de accesibilidad durante las pruebas de unidad y de extremo a extremo en el desarrollo de software.
Emily demostró una aplicación simple de búsqueda para películas y personajes de Studio Ghibli.
Para las pruebas de unidad, Emily utiliza Jazz y JazzX, mientras que para las pruebas de extremo a extremo usa Cypress y CypressX.
NX es una herramienta Monorepo desarrollada por la empresa Narwhal, que ayuda a configurar las pruebas de unidad y de extremo a extremo de forma eficiente.
Emily sugiere automatizar las pruebas de accesibilidad integrándolas directamente en el proceso de desarrollo de componentes, lo que ayuda a detectar y corregir errores de accesibilidad antes en el ciclo de desarrollo.
Realizar pruebas de accesibilidad desde el inicio del desarrollo ayuda a identificar y corregir problemas antes, evitando cambios estructurales complejos y costosos más adelante en el ciclo de desarrollo.
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.
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
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
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
Comments