Desarrollo web: Control de calidad automatizado

Pruebas end to end en CasperJS

¡Prueba gratis durante 10 días

nuestros 1244 cursos !

Prueba gratis Mostrar modalidades de suscripción
CasperJS es un excelente framework, completo, sencillo y robusto, puede hacer prácticamente cualquier prueba en el navegador que pueda hacer una persona. En esta lección aprenderemos cómo poner todas sus funcionalidades a trabajar para realizar una prueba de principio a fin en la funcionalidad de un sitio web.
09:54

Transcripción

Las pruebas "end-to-end" nos van a permitir a nosotros analizar una característica de nuestra aplicación desde el inicio hasta el final del proceso. Más que revisar un elemento, analizamos procesos completos. En esta lección te voy a mostrar cómo realizar una prueba "end-to-end", y vamos a utilizar, como ejemplo, Twitter. Acá yo estoy dentro de "twitter.com" y voy a ingresar con un usuario que acabo de crear para esta lección. En este caso se va a llamar "end2end42", y también le he definido un "password". Vamos a ingresar. Y quiero que notes que antes de ingresar yo voy a hacer una inspección de los elementos que están acá, y vamos a ver cómo estamos trabajando dentro de un formulario que tiene ciertas características. Estamos ingresando información dentro de casillas de texto, que también tienen propiedades, específicamente, por ejemplo, el "name", el nombre, donde tenemos acá el nombre de esta casilla de texto, y también tenemos el "password" con la información correspondiente. Yo ya he realizado todo el proceso de examinarlo y, más adelante, vamos a utilizar estas propiedades para seleccionar estos elementos. Vamos a ingresar y, una vez que ingreso, tengo acceso a Twitter. En el caso de esta aplicación, la funcionalidad sería que yo pueda incluir, por ejemplo, un tuit y desplegarlo dentro de la red social y, finalmente, entrar en este caso al perfil de usuario, buscar la opción para cerrar la sesión, hacer clic en ella y salir finalmente de la aplicación. Este va a ser el proceso que yo voy a realizar, y vamos a examinar en una prueba "end-to-end" que todos estos pasos se realicen. Para mantener mi ejemplo simple, únicamente voy a evaluar que el usuario pueda entrar, autenticarse, acceder a su sesión de usuario y cerrar su sesión. No vamos a revisar específicamente enviar mensajes o revisar que se encuentren elemento gráficos o "scripts", pero en una prueba "end-to-end" sería deseable que analicemos todos los elementos necesarios para generar el proceso que nosotros deseamos evaluar. Ahora vamos a ir al código para realizar esta prueba "end-to-end". Vamos a ir acá a "Visual Studio Code". Y yo estoy trabajando un archivo llamado "end-to-end.js". Ya tengo definida la dirección de Twitter, tengo creado un "test" y tengo todo el código necesario para poder ejecutar mis pruebas. Lo primero que voy a hacer es definir, en este caso, un "viewport". Lo voy a definir porque, para mantener esta prueba un poco más sencilla, lo que voy a hacer es que, en vez de realizar pruebas, voy a tomar capturas de pantalla. Así vamos a poder ver cuáles son los diferentes procesos. Voy a tomar tres capturas de pantalla: una al inicio, cuando el usuario aún no se ha autenticado; otra con el usuario autenticado y, finalmente, una captura de pantalla una vez que el usuario haya cerrado la sesión. Vamos a utilizar este "viewport" para tener un tamaño de pantalla. Voy a realizar el primer "test", y lo que voy a revisar es que se encuentre el formulario en el cual hemos ingresado el nombre de usuario y el "password". Yo ya he revisado el código de Twitter, así que ya conozco cuáles son los selectores correspondientes, y en este caso estoy utilizando el que corresponde al formulario. Ahora ya sé que el formulario se encuentra correctamente, que estamos inicializando la sesión, y voy a tomar la primera captura de pantalla. Luego voy a proceder a tomar ese formulario y le voy a incluir información. Así que voy a ir a un segundo paso, en este caso, utilizando el comando "casper.then" y, dentro de la función que está acá, le voy a incluir el comando "this.fill", y el primer parámetro es un selector. En este caso estoy seleccionando el formulario, estoy incluyendo acá los diferentes campos correspondientes al usuario y al "password". En este caso estoy seleccionando a través de la propiedad "name" y le estoy asignando el nombre de usuario y el "password" que tiene esta cuenta de prueba. Una vez que he ingresado el nombre de usuario y "password", voy a proceder a presionar el botón de envío para que "CasperJS" haga una autenticación de usuario con estos datos. Ahora ya tenemos el usuario autenticado y vamos a proceder a realizar otro paso. Este nuevo paso implica que vamos a buscar las propiedades de usuario, y vamos a encontrar el menú que nos va a permitir a nosotros cerrar la sesión. Ahora, en este caso, voy a utilizar otra propiedad que se llama "waitForSelector". Esto me va a permitir a mí esperar a que se cargue toda la información, a que tengamos todos los elementos necesarios para poder hacer la prueba y que no tengamos errores únicamente por ancho de banda. Entonces, voy a poner "casper.waitForSelector", y la ejecución de esta prueba se va a detener hasta que este elemento que estoy seleccionando acá se cargue. Este elemento es básicamente el botón que me permite a mí mostrar el menú de acceso a funciones de usuario. Cuando ese menú se encuentre disponible, yo voy a poder trabajar con él. Así que, el código se detiene acá hasta que ese elemento se cargue, efectivamente, dentro de mi navegador. Y, una vez que esté, vamos a hacer clic sobre él. Quiero que notes que estoy utilizando el mismo selector, así que voy a esperar a que se cargue, y cuando ya se encuentra presente hago clic en él. Finalmente, voy a hacer la segunda captura de pantalla y, en este caso, lo que me va a mostrar es el menú de funciones del usuario. Ahora vamos a hacer clic sobre el botón que me permite a mí hacer cierre de sesión. Quiero que notes que también estoy utilizando acá el selector correspondiente al código actual de Twitter. En todos los casos los selectores pueden cambiar, pero yo ya he explorado cuáles son las propiedades específicas de Twitter, y por eso estoy únicamente incluyéndolos acá. En caso de que quieras replicar esta prueba, deberás revisar el código de Twitter que puede cambiar en cualquier momento o utilizarlo directamente sobre tu aplicación, y replicarlo dentro de las condiciones específicas de tu HTML. Ahora, ya hemos autenticado el usuario y también hemos abierto la sección de propiedades. Hemos hecho clic sobre el enlace que nos permite cerrar sesión, y estamos listos para el último paso que es hacer una última captura. Y ahora vamos a agregar un último paso que me va a permitir a mí saber que ya he cerrado la sesión y vamos a incluirlo también con un comando especial llamado "casper.waitForUrl" y en este caso vamos a analizar que la dirección incluya este parámetro. Yo ya he revisado las características de Twitter y también he notado que, en el momento en que cierras sesión, aparece esta variable dentro del URL. Así que esta es la forma que yo voy a tener de verificar que efectivamente el usuario ha cerrado sesión y también voy a tomar la última captura de pantalla cuando esto suceda. Ya estoy listo para realizar mi prueba "end-to-end" desde que abro usuario hasta que salgo de la aplicación. Vamos a ejecutarla. Y estamos realizando una prueba, sabemos que el formulario se encuentra. Perfecto. Ya comienzan a aparecer las capturas de pantalla. Toma un tiempo, porque tiene que cargarse efectivamente la página y guardarse la información. Pero ya se ha ejecutado todo correctamente y parece que todo ha funcionado bien. Vamos a revisar las capturas de pantalla y vemos que primero tenemos sin sesión abierta; luego pasamos a una segunda pantalla, donde vemos que ya se autenticó el usuario y tenemos acceso a las opciones de usuario. Hemos hecho clic sobre esta sección de acá, hemos esperado a que se cargue esta imagen, y, una vez que se encuentra, el sistema ha hecho clic sobre ella y se está mostrando el menú de opciones de usuario para finalmente hacer clic sobre el botón de "Cerrar sesión". Y ahora nos está mostrando la pantalla cuando ya el usuario ha cerrado sesión. Esta es la forma en la que nosotros hacemos pruebas "end-to-end" desde el inicio hasta el final, aprovechando al máximo todas las capacidades que nos da CasperJS y PhantomJS.

Desarrollo web: Control de calidad automatizado

Aprende a emplear herramientas para controlar la calidad en tus desarrollos web de forma automática y anticiparte a las posibles incidencias del código que puedan surgir.

2:53 horas (21 Videos)
Actualmente no hay comentarios.
 
Fecha de publicación:16/05/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.