El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

Desarrollo web: Control de calidad automatizado

Pruebas en pasos con .then()

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En CasperJS, el conjunto de procesos que se realizan en un archivo se denomina stack. Cada paso que se realiza en el navegador, cada simulación, cada prueba, puede separarse en unidades que se van ejecutando progresivamente. En esta lección aprenderemos cómo agregar pasos al stack con el comando .then().
09:43

Transcripción

En CasperJS nosotros podemos realizar nuestras pruebas utilizando diferentes pasos. Estos pasos o bloques nos van a permitir a nosotros asignar diferentes tareas separadas. En las tareas podemos, por ejemplo, evaluar diferentes procesos, modificar elementos de nuestro código o, sencillamente, esperar a que un elemento esté disponible. En esta lección te voy a mostrar cómo realizar estos pasos. Acá yo ya tengo un archivo llamado "pruebas_en_pasos.js" y tengo una variable definiendo cuál va a ser el URL en el que vamos a trabajar. En este caso va a ser "google.cl". También he creado una prueba donde vamos a examinar los cambios que se realicen en este documento. Tengo dos métodos previamente creados en los cuales voy a abrir este documento y también en el cual voy a ejecutar todos los comandos que realice durante este código. Ahora vamos a revisar cuál va a ser la conducta que vamos a evaluar. Yo acá tengo una navegador donde estoy examinando la dirección en la que voy a trabajar. Quiero que notes que estoy trabajando en una versión de incógnito porque es importante que no tenga ninguna variable de sesión abierta o que no tenga ningún elemento especial, sino que empiece específicamente desde cero. Ahora, vamos a ver cuál es el cambio que yo quiero revisar. Tengo acá una entrada de texto, y voy a escribir una búsqueda dentro de Google. Y sin presionar ningún elemento en particular, vamos a tener acá vamos a tener los cambios dentro de Google. Vamos a ver que, por ejemplo, en el caso de que yo modifique el texto, voy a encontrar que el título de este documento se modificó, que la dirección también cambió... Ahora tenemos acá algunos parámetros dentro del URL. ...y que también aparecen diferentes resultados. Volvamos al punto inicial. ¿Cómo podemos evaluar esta conducta? Vamos a analizar dentro del código que podamos incluir información acá. Para poder hacer esto, vamos a necesitar seleccionar específicamente esta casilla de texto. En CasperJS nosotros podemos acceder a cualquier elemento de un documento utilizando la misma sintaxis que hacemos en CSS3. Así que vamos a inspeccionar este documento. Voy a hacer clic derecho en "Inspect" y vamos a examinar el HTML que forma este documento de Google. Vamos a ver que tenemos acá un formulario y también dentro de ese formulario tenemos una entrada de texto, como se está marcando dentro del navegador. Y, en este caso, esta entrada de texto tiene la propiedad "name" y se llama "q", ese es el nombre que Google le asignó a esta entrada de texto. En el caso del formulario, podemos ver que tiene específicamente una clase, pero es importante que a la hora de desarrollar nuestras pruebas no dependamos específicamente de las clases. También podemos utilizar otras propiedades como, por ejemplo, en este caso, podemos utilizar la propiedad "action" con el valor "search" para seleccionar este elemento. Y eso justamente vamos a hacer dentro de nuestra prueba. Así que la primera parte de nuestra prueba va a ser que se encuentre específicamente este formulario con estas propiedades. Así que, específicamente para esta prueba, yo voy a incluir el código "test.assertExists", y voy a evaluar un elemento dentro de mi documento. En este caso utilizo el selector "form", porque esta es la etiqueta que quiero seleccionar. Utilizo paréntesis cuadrados y busco la propiedad "action" con el valor "search". Esto va a seleccionar el formulario que hemos visto en este documento. Si esta prueba es exitosa, vamos a tener este nombre para la prueba, que va a ser "Formulario de búsqueda presente". Ahora te voy a dar un consejo. Es posible que esta prueba, aunque está correctamente definida, no te funcione. Y puede ser, no porque tengas un error de sintaxis, sino porque la conexión a Internet en el navegador, es muy lenta y aún no se ha mostrado el elemento que estás evaluando. Así que, para este tipo de casos, te recomiendo que utilices esta propiedad, "this.waitForSelector", y incluimos acá el mismo selector que estamos evaluando. Esto va a hacer que nuestro código se detenga específicamente en este punto, espere a que cargue correctamente dentro del navegador y ejecuta la evaluación. Así nos vamos a asegurar de que en caso de que dé error es porque el formulario tiene algún problema y no porque únicamente no se ha cargado. Ahora, vamos a realizar otro paso dentro de nuestra evaluación. Voy a incluir este paso a través del método "Casper.then". Los pasos me van a permitir a mí aislar diferentes conductas o realizar diferentes pasos o diferentes cambios dentro de mi código. En este caso, dentro de este "then", yo voy a incluir una función, y voy a utilizar el comando "this.fill", que me va a permitir a mí rellenar información dentro de un formulario y como primer parámetro le voy a definir un selector para que pueda encontrar el formulario que quiero modificar. En este caso ya sabemos que es el formulario que hemos visto en el documento. También vamos a asignarle, a través de la propiedad definida en "name", los valores que queremos que tenga una entrada de texto dentro de este formulario. Recordemos que la entrada de texto que revisamos hace un momento tenía el nombre "q". Así que acá, yo voy a incluir el valor "unicornio". En este paso lo que estoy haciendo es que estoy rellenando información dentro de este formulario. Ahora, voy a hacer un paso diferente. El siguiente paso que yo quiero hacer no solamente va a ser un paso aparte sino que quiero realizar una acción. Lo que voy a hacer es que me voy a asegurar de que el URL se haya modificado exitosamente antes de seguir evaluando. Para eso voy a utilizar el método "casper.waitForUrl". Eso significa que también se va a detener la ejecución de mi código hasta que el URL calce con el parámetro que le estoy definiendo. En este caso, quiero que notes que no estoy incluyendo ninguna coma, estoy utilizando una expresión regular que básicamente va a decir que en cualquier parte del URL aparezca este texto, que es "q=unicornio". Si revisamos dentro del código, vamos a ver que en el momento en que nosotros ponemos una búsqueda, nos va a aparecer este texto que dice "q=unicornio". Así nos vamos a asegurar de que el URL tuvo un cambio. Volvemos otra vez a nuestro código. Tenemos entonces tres pasos. El primero es cuando cargamos nuestro URL. El segundo es cuando incluimos la información dentro del formulario; y el tercero es que vamos a esperar a que se modifique el URL. Y acá vamos a realizar una prueba. Esta prueba va a ser que vamos a revisar que el título de nuestro documento tenga un texto. Para eso utilizamos el método "assertTitleMatch" y vamos a revisar que nuestro título contenga la palabra "unicornio". Así nos aseguramos de que este "test" nos verifique que la búsqueda aparece también dentro del título. Vamos a realizar una última prueba. La última prueba va a ser que dentro del código que estamos cargando, dentro de los resultados, aparezca una opción que diga, "Wikipedia, la enciclopedia libre". Esto lo estoy haciendo con el método "assertTextExists". Este método va a revisar, dentro del documento que hemos cargado, que este texto exista y puede estar en cualquier parte. Estamos listos para realizar nuestra prueba. Así que vamos a llamar "casperjs test" para realizar las pruebas, y llamamos a "pruebas_en_pasos.js". Presionamos "Enter" y comenzamos a ver las diferentes pruebas que hemos realizado. Revisamos que el formulario de búsqueda se encuentre, que el fragmento requerido en el título también esté presente y también que la entrada a Wikipedia se encuentre en el documento tal cual lo tenemos acá. Vemos que se modifica el título, el URL y nos aparece esta entrada de texto. Así es como nosotros podemos realizar evaluaciones en pasos que nos van a permitir a nosotros diferenciar los diferentes bloques de pruebas.

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.