Desarrollo web: Control de calidad automatizado

Simular la navegación web

¡Prueba gratis durante 10 días

nuestros 1244 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección comenzaremos a trabajar funcionalidades más avanzadas que te permitirán realizar pruebas cercanas al comportamiento de una web en el mundo real. Aquí te voy a mostrar las diferentes formas que tiene CasperJS para simular y evaluar la navegación tanto dentro de un sitio web como hacia fuentes externas.
08:37

Transcripción

CasperJS, en conjunto con PhantomJS, nos permite replicar todas las conductas de un navegador, incluso movernos entre diferentes direcciones. En esta lección vamos a aprender cómo simular la navegación dentro de CasperJS. Acá yo estoy trabajando dentro de un archivo llamado "navegacion.js". He definido una variable con un URL dentro de Wikipedia. También he creado un "test", y tengo un método que va a abrir esta página que he definido previamente y, también, uno que va a ejecutar todo el código de mi prueba. Vamos a revisar cuál va a ser la conducta que vamos a evaluar. Acá te estoy mostrando la dirección de la Wikipedia con la que vamos a arrancar nuestra prueba. Luego de eso vamos a buscar el enlace de portada. Vamos a simular un clic, y vamos a ir a la portada de Wikipedia. Después de eso vamos a ir a otro sitio, específicamente Wikiquote, y luego vamos a regresar por nuestro camino, hasta volver a la página original. Te voy a mostrar cómo hacer todo esto dentro del código en CasperJS. Comenzamos abriendo la dirección original de Wikipedia. Ahora, vamos a realizar una prueba. Específicamente, vamos a asegurarnos de que exista el enlace donde vamos a hacer clic. Yo ya he inspeccionado el código del documento, y ya sé que tenemos un enlace que apunta a "Wikipedia:Portada". Entonces me voy a asegurar que este enlace exista, y una vez que sé que está presente dentro del documento, voy a invocar el método "this.click" y voy a seleccionar este objeto. Así, voy a hacer clic sobre este enlace que me va a llevar a la portada de Wikipedia. Seguimos con las pruebas. Y, ahora, una vez que ya me haya desplazado a la Wikipedia, voy a realizar un segundo paso. En este caso, voy a llamar "casper.then", y vamos a realizar una segunda prueba. La prueba que vamos a realizar va a ser básicamente asegurarnos de que nos encontramos en una portada de la Wikipedia. Para eso, voy a llamar el método "test.assertUrlMatch", y esto me va a permitir a mí inspeccionar el URL en el que nos encontramos. Voy a utilizar en este caso, una expresión regular, y voy a buscar que dentro del URL en el que estoy, se encuentren las palabras "Wikipedia:Portada". Vamos a revisar, y vemos que al hacer clic sobre la portada, tenemos un enlace que contiene estas palabras. Esta es una navegación en la cual nosotros estamos simulando eventos, por ejemplo, he buscado un enlace, he hecho clic sobre él, y ahora estoy sobre la portada de un sitio. Pero también nosotros podemos simular la navegación directamente desde el código. En este caso, voy a incluir un nuevo paso, pero en vez de incluir solamente "then", voy a asignar que este nuevo paso, cuando se ejecute, abra otra dirección. Lo voy a definir escribiendo "casper.thenOpen". Esto va a abrir una dirección, la cual voy a definir, y acá va a ser "wikiquote.org". Una vez definido esto, voy a incluir también una función utilizando la misma sintaxis que utilizo para "then", y dentro de esta función, nosotros vamos a realizar todos los procesos que queramos. En este caso, yo voy a utilizar un método llamado "this.echo", que me va a mostrar un mensaje. Podemos escribir directamente "this.echo", y esto básicamente me va a mostrar un mensaje de dentro de la consola. No es una prueba directamente, simplemente es un mensaje que me puede servir para depurar o para mostrar qué es lo que está ocurriendo. En este caso, lo que voy a hacer es que voy a utilizar una propiedad llamada "this.getCurrentUrl", que me va a mostrar el URL en el que me encuentro. Va a mostrar un mensaje que dice "Navegando en otro sitio", y me va a mostrar la dirección actual. En este caso la dirección va a ser la de Wikiquote. Ahora, estamos simulando una navegación, estamos forzando que CasperJS, sin hacer ningún tipo de interacción dentro del navegador, se mueva a otra dirección. Dentro de esta misma conducta, nosotros podemos llamar a "casper.back", y, simplemente con llamarlo, vamos a devolvernos a la página anterior. Y vamos a entrar al navegador para ver esto. Sería el equivalente de que hagamos clic sobre Wikiquote, y una vez que estemos acá, presionemos el botón de "back". Vamos a evaluar que esta conducta se esté realizando correctamente, y vamos a incluir otro paso. En este caso, también vamos a mostrar un mensaje, y voy a incluir "casper.then" para agregar otro paso más, y en este caso voy a incluir exactamente el mismo mensaje, "this.echo", navegando de vuelta en portada, y voy a mostrar el mismo método que utilicé hace un momento, que es "this.getCurrentUrl" donde va a mostrar la dirección. Así que vamos a tener las pruebas, y luego vamos a tener dos mensajes donde me va a decir que entro a Wikiquote, y, una vez que se ejecute el "back" o regresemos en el historial, vamos a mostrar la dirección en la que nos encontramos que debería ser la portada de Wikipedia. Finalmente, vamos a generar otra prueba, y esto es para que podamos regresar a la página original. Entonces voy a agregar otro "back" para regresar a la página original, y voy a ejecutar un paso extra con "casper.then". Y voy a realizar acá la última prueba de este archivo, que va a ser "test.assertUrlMatch", un método que ya utilizamos antes. Y, en este caso, lo que voy a evaluar es que dentro del URL se encuentren las palabras "Nicola Tesla", que es parte de la dirección que ya habíamos utilizado al inicio, y así nos aseguramos que estamos de regreso en el sitio original. Tenemos lista nuestra prueba de navegación, tanto de eventos simulados como de eventos forzados dentro del código, y vamos a ejecutar. Vamos a llamar a "casperjs... ...test navegacion.js", presionamos "enter" y vamos a navegar... a la Wikipedia. Hemos abierto, en este caso, la primera dirección; luego hemos abierto acá el enlace a la portada. Lo encontramos, lo abrimos, simulamos el clic, nos vamos a la portada, luego nos dirigimos a Wikiquote, finalmente nos regresamos a la portada y hacemos la última prueba, y estamos de regreso en el sitio original. Así, nosotros podemos simular los diferentes eventos de navegación utilizando CasperJS.

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.