El front-end es la parte del lado del cliente de su aplicación.
Todo lo que es visible para sus usuarios es parte del front-end.
Para decirlo en otras palabras, las pruebas de front-end se tratan de pruebas de interfaz gráfica de usuario (GUI).
Para obtener una mejor imagen, si está desarrollando una plataforma de compras en línea, los probadores frontend verifican si la apariencia del sitio web está alineada con los requisitos. Además, se aseguran de que las cosas funcionen correctamente y se sientan de la forma en que el diseñador de la experiencia del usuario lo imaginó.
¿Por qué son tan importantes las pruebas de front-end?
Bueno… debido a que nuestros usuarios finales juzgan el libro por su portada y no tienen ni idea de la parte de atrás de las cosas, solo se dan cuenta cuando hay algún problema que pueden ver. Por lo tanto, los problemas en la interfaz de usuario sobresalen y se notan de inmediato. Por lo tanto, una empresa que quiere tener éxito debe proporcionar una experiencia de usuario excelente y consistente. Esto significa asegurarse de que la aplicación se ejecute rápido y sin errores, sin importar qué dispositivo o navegador se utilice.
¿Qué son las pruebas front-end automatizadas?
Probablemente ya esté familiarizado con las pruebas manuales. Por ejemplo, ha implementado un campo de entrada en un formulario. Luego, abre la página web, haga clic en el campo de entrada para verificar si funciona y envíe el formulario. Esta fue una prueba manual. Realizar esta prueba para todo lo que implementa una y otra vez es tedioso y no escalable. En cierto punto, ya no tendría tiempo para implementar nada y pasaría todo el día probando. Aquí es donde entra en juego la automatización. Al usar conceptos automatizados, podemos estar seguros de que las características seguirán funcionando como deberían.
Las pruebas automatizadas también ayudan especialmente con los llamados casos extremos. Casos de uso que tendemos a olvidar, como marcar una casilla para algún proceso de registro.
¿Cuáles son las principales razones para automatizar las pruebas?
- ¡Actualiza tu código con confianza! Las buenas pruebas le permiten refactorizar el código con la confianza de que no está rompiendo ninguna funcionalidad y sin cambiar las pruebas.
- Documentación incluida, ¡GRATIS! Las pruebas son útiles porque explican cómo funciona su código con el comportamiento esperado. Las pruebas, a diferencia de la documentación escrita a menudo, tienen que estar siempre actualizadas.
- Los errores se han ido para siempre, ¡casi! Al escribir casos de prueba para cada error, puede estar seguro de que nunca volverán. Más pruebas de escritura mejorarán su comprensión del código y los requisitos. Al usar las pruebas, es posible que encuentre problemas que de otro modo podría pasar por alto.
¿Qué se está probando en las pruebas de front-end?
PRUEBAS DE UNIDAD
Estos se centran en la entidad más pequeña de sus aplicaciones front-end.
Por lo general, estos son componentes en el contexto de React, pero cubren interfaces, clases y métodos. Estas pruebas simples y pequeñas verifican si la salida de una pequeña parte es igual a la esperada. Los controles están predefinidos y completamente aislados.
PRUEBAS DE INTEGRACIÓN
Como sugiere el nombre, este tipo de pruebas juntan múltiples componentes de código y prueban su interacción. En React, estos generalmente se construyen a partir de vistas que integran múltiples componentes.
PRUEBAS DE EXTREMO A EXTREMO
Estas pruebas son el santo grial ya que están probando la aplicación. Profundicemos un poco más en las pruebas de extremo a extremo.
¿Qué son las pruebas de extremo a extremo?
Las pruebas de extremo a extremo o las pruebas de interfaz de usuario son un enfoque para probar una aplicación web. Una prueba de extremo a extremo verifica que una aplicación web cumpla con los requisitos y funcione como se espera. Se prueba el llamado “flujo de usuario”. ¡Las pruebas de extremo a extremo son importantes! Pero a nadie le gusta… Pueden ser extremadamente engorrosos y consumir mucho tiempo. Por otro lado, solo las pruebas pueden brindar confianza en el producto final. Al final, las pruebas aseguran que no lancemos un producto defectuoso a nuestros usuarios.
¿Qué es el ciprés?
Cypress es una herramienta de prueba de automatización gratuita y de código abierto creada para aplicaciones web modernas basadas en marcos modernos como React. Proporciona una interfaz de usuario para mostrar qué pruebas y comandos se están ejecutando, aprobando y/o fallando.
¿Pero no existe el Selenio?
Cada desarrollador ha sufrido antes de configurar Selenium. Hay una multitud de pasos, a menudo extremadamente confusos, donde necesitamos versiones compatibles de Java, controladores, navegadores, incluso el propio Selenium, etc. ¡Es simplemente agotador! Sin mencionar que muchos desarrolladores front-end no necesariamente quieren usar Java. Además, Cypress supera fácilmente a Selenium en términos de velocidad, confiabilidad y facilidad de uso.
Instalación y configuración de Cypress
Cypress incluye documentación dedicada a las pruebas visuales y una lista de todos los complementos disponibles para ayudar a configurarlo para las pruebas de regresión visual.
Decidimos elegir cypress-plugin-snapshots debido a la facilidad de uso y la cantidad de tiempo necesario para la configuración inicial. Hay muchas herramientas y bibliotecas excelentes, ¡así que échales un vistazo!
Simplemente instalamos la biblioteca npm así:
npm instalar cypress cypress-plugin-instantáneas
Y así es como puede verse una configuración de cypress.j son:
¿Por qué integrar Cucumber con Cypress?
Existen varias herramientas para un marco de desarrollo basado en el comportamiento, pero la herramienta BDD más utilizada es Cucumber . BDD es una forma de desarrollo dirigido por pruebas (TDD). Las descripciones legibles por humanos de los requisitos del software se utilizan como base para las pruebas. Este enfoque nos ayuda a escribir las pruebas en un vocabulario común para todos los participantes del proyecto. Por esta razón, incluso alguien sin experiencia en desarrollo puede hacerse una idea de las pruebas realizadas.
pepino con pepinillo
Para Cypress solo podemos escribir nuestras pruebas en Javascript/TypeScript. Sin embargo, si queremos usar Cucumber, convertimos la prueba de Java Script a “ Gherkin ” (el lenguaje de Cucumber). Gherkin consiste principalmente en las cuatro palabras clave principales: “Dado”, “Cuando”, “Y” y “Entonces”. Usando las palabras clave podemos usar el código JavaScript ya usado.
Pruebas completas de JavaScript en Cypress
Con solo un vistazo, puede ver que será muy difícil para alguien sin conocimientos de desarrollador comprender el script de prueba puro.
Lo mismo con pepino y pepinillo
El archivo de prueba .feature
//integración/formulario.función
#lenguaje: es
Funcionalidad : prueba de la entrada del formulario
Escenario: F-01 Ingrese el formulario y envíe
Dado que visitamos la página del formulario
Cuando ingresamos el nombre “David”
E ingresamos el correo electrónico “david@devoteam.com”
E ingresamos el comentario “Esto es una Prueba”
Y enviamos el formulario
Luego estamos en la página de inicio
Sin embargo, si ahora miramos el archivo de prueba con Cucumber, se vuelve mucho más simple y legible.
Algunas palabras finales
Cypress with Cucumber es un excelente marco de prueba y, en mi opinión, tiene las siguientes ventajas:
- Fácil de instalar y configurar
- Más rápido ejecutando las pruebas directamente en la aplicación
- Tiene un poderoso depurador en tiempo real
- Fácil de escribir gracias a JavaScript, sin necesidad de Java
- API útil y sencilla
- Documentación súper detallada
- Comunidad muy activa
¿Cómo puedo aprender más?
Este artículo es parte de una serie más amplia centrada en las tecnologías y los temas que se encuentran en la primera edición de Devoteam TechRadar. Para leer más sobre estos temas, descargue TechRadar .
