Desarrollo web: Control de calidad automatizado

Principios básicos de funcionamiento

¡Prueba gratis durante 10 días

nuestros 1240 cursos !

Prueba gratis Mostrar modalidades de suscripción
PhantomJS posee una API de bajo nivel que nos da acceso total a las funcionalidades del navegador. En esta lección vamos a aprender los principios de funcionamiento y comandos básicos para ejecutar código en PhantomJS.
09:31

Transcripción

En esta lección vamos a explorar la funcionalidad básica para ejecutar un "script" utilizando PhantomJS. Acá yo estoy utilizando Visual Studio Code, y voy a crear un nuevo archivo de JavaScript. En el caso de PhantomJS, nosotros siempre vamos a utilizar esta extensión, porque lo que vamos a hacer es que vamos a trabajar un archivo JavaScript con funcionalidades añadidas. Vamos a crear este nuevo archivo, dentro de mi editor, y le vamos a poner "hola_mundo.js". Ahora, este archivo JavaScript me va a servir para enviar comandos a PhantomJS, que se van a ejecutar dentro de este programa. Recordemos que PhantomJS es un navegador que no tiene una interfaz gráfica. Así que lo que vamos a hacer es que vamos a abrir PhantomJS, vamos a ejecutar algún comando, y seguidamente vamos a obtener un resultado. ¿Cómo vamos a hacer eso? Bueno, sencillamente podemos enviar cualquier comando de JavaScript, por ejemplo, "console.log". Y vamos a enviar un mensaje básico de consola, en donde decimos "Hola mundo". Ahora, ¿cómo vamos a ejecutar este código dentro de PhantomJS? En este caso podemos utilizar cualquier terminal del sistema para poder ejecutar el código. Yo voy a utilizar específicamente la terminal que se encuentra dentro de Visual Studio Code, y voy a entrar directamente acá, a la sección "View", y voy a buscar la opción "Integrated Terminal", y voy a tener acá la terminal del sistema para poder trabajar. Ahora, una vez que esté acá, voy a incluir el comando "ls", simplemente para ver qué información tengo dentro de la consola. Como podemos ver, me aparece un archivo que dice "hola_mundo.js". Esto significa que la consola se está abriendo, y está abriéndose específicamente dentro de la carpeta en la que yo estoy trabajando. Así que podemos tener acceso directamente al arcihvo, en este caso, "hola_mundo.js" y a cualquier otro archivo que nosotros ejecutemos dentro de la carpeta en la que estemos trabajando. Sabiendo eso, yo voy a invocar PhantomJS. Para eso voy a llamar el comando "phantomjs" y voy a llamar el archivo que necesito ejecutar dentro de PhantomJS, en este caso "hola_mundo". Voy a dejarlo sin extensión, y quiero que veas lo que sucede acá. Vamos a ver que nos aparece un mensaje que dice "Can't open 'hola mundo'". Si nosotros tenemos un error dentro del archivo que queremos abrir, la consola siempre me va a dar un mensaje de respuesta diciendo que no podemos ejecutar o que no podemos abrir el archivo en el que estamos trabajando. En este caso, yo voy a definirlo como "hola_mundo.js", que es como debía haberlo hecho originalmente. Y ahora sí va a abrirme el archivo que yo deseo, y vamos a tener un mensaje. Quiero que notes otro detalle. Como vemos acá, me aparece "Hola mundo" que es el mensaje que yo estaba enviando, pero queda el programa abierto, no puedo enviar más información, no puedo abrir ningún comando, porque en este caso, y recordemos una vez más, que PhantomJS es un navegador. Así que lo que yo hice acá, es que abrí PhantomJS, ejecuté este archivo JavaScript, pero no he cerrado el navegador, igual que si lo tuviera en cualquier otro programa ejecutándose, necesito cerrarlo. Así que para cerrarlo, y en este caso voy a forzar este cierre, voy a presionar las teclas "Ctrl + C", una o dos veces, dependiendo de tu sistema operativo. Y esto va a detener la consola. Ahora, para no tener que realizar este proceso manualmente, nosotros podemos incluirle un comando dentro del archivo "hola_mundo.sj", y le decimos a PhantomJS que se cierre a través del comando "exit". Ahora sí, vamos a ejecutar este comando "Hola mundo" y vamos a cerrar nuestro navegador. Recordemos siempre guardar antes de ejecutar el código, y ahora tenemos "phantomjs hola_mundo.js". Y tenemos ahora que se ejecutó correctamente nuestro "hola mundo", y vemos que ya se cerró la consola y podemos seguir trabajando con nuestra aplicación. Nosotros podemos poner acá cualquier valor en JavaScript. Por ejemplo, vamos a crear una variable y a esta variable le vamos a poner fecha, y vamos a crear acá una fecha en JavaScript. Esto es completamente JavaScript nativo. Vamos a crear una fecha, y le vamos a poner que se muestre la fecha en un formato de texto, voy a tomar este valor, y vamos a poner acá una fecha. Guardamos, volvemos a ejecutar y nos va a dar acá un mensaje con una fecha. Después de un momento se cierra el navegador. ¿Ahora qué más podemos hacer? Por ejemplo, nosotros podemos enviarle argumentos a nuestra aplicación. Por ejemplo, yo le puedo decir que cualquier prueba o cualquier proceso que yo quiera realizar, se realice a través de un valor que puede ser dinámico en el momento en que yo invoco mi aplicación desde la consola. Para hacer eso tenemos que modificar ligeramente nuestro código. Y vamos a poner acá una nueva variable que se va a llamar "system"; y acá vamos a invocar un módulo que se va a llamar "require" y el módulo va a ser "system". Esto lo va a invocar directamente PhantomJS. Y, una vez que ya lo tengamos invocado, vamos a poder llamar algunos elementos. Por ejemplo, yo puedo hacer que... Voy a ejecutar acá una condicional, y vamos a decir que si "system", que es el valor de sistema. Y vamos a utilizar una propiedad que se llama "args", de "argumentos"; y vamos a decir que si los argumentos que recibimos tienen un tamaño, un "length", un número o una cantidad que sea igual a 0, entonces vamos a devolver un mensaje de consola que dice "no argumentos". Y, en caso contrario, o sea que si recibimos cualquier argumento, entonces vamos a hacer un bucle mostrando cada uno de los argumentos que tenemos. Así que yo voy a llamar a "system.args", que va a ser un arreglo donde va a tener todos los diferentes argumentos que yo voy a recibir. Y vamos a definirles que por cada uno de ellos, utilizando el comando "forEach", se ejecute una función, y esta función va a recibir un argumento, y también vamos a definirle el "index" de cada uno de estos diferentes argumentos. Esto me va a dar el número de cada uno de ellos. Así que vamos a poner "console.log" para que lo podamos ver dentro del sistema. Y vamos a definir... Acá yo ya tengo un mensaje que ya tengo preparado previamente, donde vamos a mostrar cuál es el "index" o el índice de cada uno de estos argumentos; y también vamos a mostrar el valor de nuestro arguemento. Luego tenemos acá nuestro comando "phantom.exit();", para que se detenga el "script". Vamos a guardar. Y ahora voy a ejecutar otra vez "hola_mundo.js", pero ahora le voy a enviar argumentos. Así que, por ejemplo, si yo quiero que mi aplicación realice algún proceso especial, supongamos que quiero revisar una página de internet, así que yo le puedo decir que "hola_mundo.js" revise a "google.com" y luego revise a "microsoft.com". Presionamos "enter" y ahora vamos a tener que se está ejecutando nuestro "hola_mundo". Nos muestra una fecha; luego nos dice que estamos recibiendo. Y el primer argumento va a ser el nombre del archivo en el que estamos trabajando; luego nos va a decir que enviamos un argumento que va a ser "google.com", y el segundo argumento que va a ser "microsoft.com". Una vez que nosotros tenemos esa información, podemos seguirlo procesando dentro de nuestro código, y poder hacer que, por ejemplo, por cada uno de los elementos que recibamos dentro del código a la hora de invocarlo, que en vez de mostrar solamente la información, realicemos una serie de pruebas que están optimizadas directamente para trabajar dentro de PhantomJS. Estos son los comandos básicos que nosotros vamos a utilizar para poder trabajar con PhantomJS y comenzar a hacer pruebas automatizadas dentro de nuestras páginas web.

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.