Desarrollo web: Control de calidad automatizado

Instalar CasperJS

¡Prueba gratis durante 10 días

nuestros 1267 cursos !

Prueba gratis Mostrar modalidades de suscripción
CasperJS es un complemento de PhantomJS. Mientras PhantomJS es un navegador, CasperJS es una librería de alto nivel para hacer pruebas en este navegador. En esta lección aprenderás a instalar y configurar CasperJS.
07:39

Transcripción

Si bien es cierto en PhantomJS nosotros podemos realizar pruebas básicas que son bastante útiles para poder trabajar nuestros sitios web, vamos a tener acceso a herramientas mucho más sofisticadas como, por ejemplo, CasperJS. CasperJS nos va a permitir a nosotros realizar pruebas sobre PhantomJS, pero pruebas que van a ser mucho más sofisticadas como, por ejemplo, pruebas "end-to-end". Este tipo de pruebas se refieren a que vamos a realizar una simulación de navegación desde el inicio hasta el final de nuestra aplicación. Piensa, por ejemplo, en una aplicación de correo electrónico: podemos simular la entrada del usuario, su autenticación, revisar un correo electrónico y luego salir de la aplicación. Todo esto lo podemos simular utilizando CasperJS. Te voy a mostrar cómo instalarlo y cómo realizar un "script" básico utilizando este sistema. Vamos a ir en este caso a Visual Studio y yo voy a abrir la terminal del sistema Para instalar CasperJS simplemente voy a escribir "npm install casperjs" y, muy importante, tengo que incluir el parámetro "G", porque necesito que CasperJS se encuentre de manera global instalado en mi sistema. Mientras esto se instala, es importante mencionarte que CasperJS trabaja sobre PhantomJS, así que siempre que utilices CasperJS tienes, obligatoriamente, que tener instalado PhantomJS en el sistema. Vamos a asumir que ya lo tienes instalado en tu ordenador y vamos a crear un archivo que va a realizar una prueba. Para eso yo voy a crear un nuevo archivo, en este caso se va a llamar "hola_mundo_casperjs", y va a tener la extensión ".js". CasperJS trabaja con archivos con la extensión ".js", porque es JavaScript. Ahora, vamos a crear acá dos variables. Primero vamos a crear una variable que se va a llamar "casper", donde vamos a importar toda la información necesaria con el módulo "casper". Para eso voy a incluir el comando "require('casper')" y vamos a incluir el método "create" para tenerlo disponible dentro de esta aplicación. Voy a crear otra variable llamada URL, donde voy a definir la dirección de la página que quiero evaluar. En este caso, yo voy a utilizar una página que se encuentra dentro de un servidor local y va a ser "localhost:8001". Vamos a guardar. Y ahora voy a hacer que Casper abra esta dirección utilizando PhantomJS, y que realice una prueba básica. Esto lo voy a hacer llamando la instancia de Casper que acabo de crear, con el método "start", que va a inicializar la instancia de Casper y le vamos a definir qué dirección queremos evaluar, en este caso la que se encuentra en la variable URL, que va a ser el sitio que yo tengo ejecutándose localmente. Y cuando tengamos acceso a esa dirección vamos a ejecutar una función donde vamos a realizar algunas pruebas de Casper. Ahora, yo necesito ejecutar el servidor local, y acá yo ya lo tengo configurado a través de "gulp". Así que yo voy a llamar "gulp" para que se ejecute dentro de mi navegador este servidor local. Y vamos a ver que acá tenemos ejecutándose... ...mi sitio web, donde vamos a realizar una prueba. Vamos a analizar la etiqueta "title" de este documento. Si vemos acá, dentro de la carpeta "app", donde yo tengo guardados los archivos de este documento voy a buscar la etiqueta "title" que se encuentra acá, en este caso, dentro de la línea nueve y tenemos acá title "Nico's Café. El mejor expreso del centro de la ciudad". Vamos a analizar que nuestro documento tenga esta etiqueta y vamos a ver cuál es la información que está en él. Dentro de la misma terminal de Visual Studio yo voy a presionar el icono de "+" y voy a llamar la prueba de Casper. En este caso, voy a llamar al comando "casperjs" y vamos a llamar el archivo que acabamos de crear que se llama hola_mundo_casperjs". "hola_mundo_casperjs". Presionamos "Enter", pero antes de hacerlo déjame revisar y vemos que todavía no se están realizando ninguna prueba necesitamos hacer algunos elementos. Primero, para hacer que todo esto se ejecute tengo que incluir el comando "casper.run" y esto va a ejecutar la prueba que vamos a realizar utilizando el URL y abriendo la instancia de PhantomJS con esta dirección para realizar las pruebas en Casper. Ahora, todavía no tengo la prueba directamente. Lo que vamos a hacer es que vamos a llamar "this.echo", que es un método que nos va a permitir a nosotros desplegar información dentro del sistema y la información que vamos a desplegar va a ser la del título. En el caso de PhantomJS nosotros necesitamos realizar una serie de comandos para mostrar el título de un documento. En el caso de CasperJS lo vamos a hacer muchísimo más rápido con una manera abreviada. Así que vamos a poner "this.getTitle", y esto va llamar automáticamente la etiqueta del archivo que vamos a evaluar, en este caso, "index.html". Vamos a guardar y vamos, ahora sí, a ejecutar CasperJS. Vamos a acceder el servidor y vemos que ahora me está mostrando la etiqueta de mi documento. Si la modificamos, por ejemplo, simplemente ponemos "xxx", vamos a guardar. Y, en el caso de la configuración de mi servidor, esto va a hacer que se actualice todo automáticamente. Vamos a volver a ejecutar la prueba. Y vemos que me está mostrando el valor de la etiqueta. Yo puedo mostrar cualquier URL, por ejemplo, "google.com". Guardamos y ejecutamos esta misma prueba, y vemos que, en este caso, el título de Google es "Google". Vamos a volver otra vez a mi página, y vamos a ver que, por ejemplo, nosotros podemos ejecutar diferentes comandos. En este caso, en vez de "getTitle" yo puedo hacer que se muestren, por ejemplo, los contenidos completos de esta página con "getPageContent". Vamos a guardar y vamos a ejecutar nuestra prueba, y vamos a ver que acá me está mostrando el código completo de mi documento. Si, por ejemplo, yo quisiera, por ejemplo... Si yo reemplazo toda la información que está dentro de "index.html" y vuelvo a ejecutar este comando, vamos a ver cómo CasperJS me va a mostrar la información que está mostrando el servidor, y en este caso son las etiquetas en HTML con la información que está dentro de este documento. De esta forma, nosotros vamos a poder trabajar los "scripts" que tenemos en 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.