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

Sintaxis básica de una prueba en CasperJS

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a crear un archivo JavaScript usando la sintaxis de la librería CasperJS. Analizaremos paso a paso los elementos que conforman un script de prueba y cada una de los comandos de uso común.
09:16

Transcripción

CasperJS está enfocado específicamente a hacer pruebas. Es más, podemos utilizar el concepto de "suites" o baterías de pruebas para evaluar una serie de diferentes partes de una funcionalidad. En esta lección, vamos a aprender cómo crear una prueba básica para comprender la sintaxis y el uso de las pruebas que realizamos en CasperJS. Yo acá estoy trabajando un proyecto dentro de Visual Studio Code, y estoy utilizando un servidor local, el cual se encuentra en la dirección "localhost:8001". Voy a copiar esta dirección. Y vamos a evaluar dentro de este documento que el título se encuentre correctamente y que tengamos este formulario. Asumamos que estos son dos elementos que son absolutamente críticos para la aplicación, y yo quiero evaluar que siempre se encuentren y que tengan valores específicos. Así que vamos a ir a realizar esta prueba dentro de Casper. Yo he creado una carpeta llamada "casper", y dentro de ella tengo un archivo llamado "prueba_sintaxis.js". Acá es donde vamos a realizar la prueba de Casper. Yo voy a comenzar definiendo una variable que va a tener la dirección del documento que voy a examinar. En este caso va a ser "http://localhost:8001", que es donde está el documento que yo quiero evaluar. Para definir el "test" que vamos a crear en Casper, yo voy a utilizar el comando "casper.test.begin()". Esto va a generar una prueba dentro de Casper. Pensemos que una prueba en Casper lo que va a hacer es que va a ejecutar una serie de subtareas que van a evaluar un elemento o una capacidad dentro de nuestro documento. Por ejemplo, en este caso, yo quiero examinar que existan los elementos que, asumimos, son requeridos. Es importante, también, asignar, dentro de nuestra prueba, un nombre. Este es el primer parámetro que vamos a incluir dentro de "begin". Este nombre tiene que ser semántico y fácil de entender, por ejemplo, "Examinar elementos requeridos". Ahora sabemos claramente qué es lo que está evaluando Casper. Vamos a decirle cuántas pruebas necesitamos que se realice para saber que los elementos requeridos se encuentran dentro de nuestro documento. En este caso, yo voy a asignar que se van a realizar dos pruebas. Voy a decir que cada vez que se inicie esta prueba se ejecute una función. Y esta va a ser una función especial que vamos a llamar "suite". Este es el nombre que debe tener dentro de Casper. Y esto básicamente va a ser una batería de pruebas. Le vamos a asignar también como parámetro el valor "test". Y ahora, todo lo que se encuentre dentro de estas llaves va a ser específicamente la prueba que vamos a realizar. Ahora pensemos qué es lo que queremos evaluar. En este caso, yo necesito saber que la página web en la que estoy trabajando tiene este titular, y que tiene este formulario. Así que necesitamos realizar, básicamente, tres pasos. El primero es abrir este navegador; segundo, examinar el titular; y, luego, examinar que se encuentre el formulario. Así que vamos a ir a nuestra prueba, y vamos a comenzar definiendo cada uno de estos pasos. El primero es abrir el navegador. Así que llevamos a "casper.start", y esto va a abrir una página web dentro de PhantomJS. La dirección que vamos a utilizar va a ser la que se encuentre en la variable "_URL", y vamos a hacer que cuando esta página se cargue, efectivamente, se ejecute una función donde vamos a realizar las pruebas, que va a ser: evaluar que se encuentre el título y evaluar que se encuentre el formulario. Para examinar el título, vamos a llamar en este caso a "test." y vamos a utilizar un comando llamado "assertTitle". En Casper, un "assert", básicamente, es el documento en el que estamos trabajando o el objeto que estamos evaluando. En este caso, vamos a llamar el título de la página web en la que estamos trabajando. Vamos a definir en esta prueba, primero, cuál es el valor que esperamos encontrar. Yo voy a definir el valor "XXX", que sé que no es el valor correcto, pero quiero que me dé un error. Pongo una coma, y voy a definir también cuál es el valor que me tiene que mostrar Casper en caso de que se realice la prueba. Por ejemplo, si yo estoy evaluando que el título sea "XXX", voy a decir que este es el título del documento. Cuando me muestre el resultado, me va a decir que estaba evaluando el título del documento y va a evaluar que sea este nombre. También vamos a evaluar que se encuentre un formulario. En este caso, el formulario tiene un ID... Yo ya lo he definido previamente. Vamos a ver el documento en el que estoy trabajando... Y tenemos un formulario que tiene el ID llamado "formulario". Así que vamos a buscar, utilizando el comando "assertExists". Vamos a llamar a "test.assertExists", y aquí vamos a utilizar un selector. La forma en que vamos a seleccionar un elemento va a ser exactamente la misma sintaxis que trabajamos con CSS. Por ejemplo, si yo necesito buscar un elemento de acuerdo a su ID, incluyo esta sintaxis, y voy a buscar un elemento que tenga el ID "#formulario". También le voy a definir cuál es la prueba que voy a realizar. Así que le voy a decir que busque el formulario con este ID y que me muestre el mensaje "Formulario principal presente". Me va a decir que el formulario se encuentra allí. Listo. Ahora, una vez que ya hemos inicializado esta prueba... Tenemos acá el comando "star" que va a abrir el navegador, y yo voy a incluir un comando llamado ".run". Quiero que notes que incluye un punto, porque estoy encadenando estos comandos. Y dentro de "run" vamos a incluir una función que va a ser "test.done". Lo que va a pasar acá es que "run" va a ejecutar la apertura de esta dirección y cuando termine de realizar las pruebas, vamos a finalizar lo que va a ser nuestro "test" o nuestra prueba, y vamos a tener finalizada la prueba de CasperJS. Vamos a guardar. Y, en este caso, yo voy a ejecutar el código de esta prueba. Yo voy a llamar al comando "casperjs", y voy a utilizar el parámetro "test" para hacer esta prueba, y vamos a llamar el nombre del archivo en el que vamos a trabajar: "prueba_sintaxis.js". Presionamos "Enter", y vamos a tener acá la información de nuestra prueba. Nos va a decir que, por ejemplo... Vemos acá una serie de información. ...y nos dice que nuestra prueba se encontraba directamente. Nos dice que tenemos un error acá en "casper.star". Vemos que, por ejemplo, yo escribí mal la palabra "start", así que vamos a poner "start". Tenemos un error de sintaxis. Guardamos... Vamos a volver a ejecutar la prueba que también nos va a dar un error, pero esta vez va a ser un error dentro del documento. Ahora sí, tenemos que se está ejecutando la prueba "Examinar elementos requeridos". Tenemos que se han ejecutado correctamente dos "tests". Vemos que definimos dos "tests", que se están asignando acá. Nos da un error y nos dice que el título del documento está mal y que nosotros estábamos esperando que fuera "XXX", pero obtuvimos el valor que aparece acá. Yo voy a cambiar este valor. Voy a decir que ya no espere que sea "XXX", sino que sea el título correcto de este documento. Vamos a ejecutar una vez más nuestra prueba. Tenemos acá la prueba, y hemos realizado específicamente la evaluación de que "Examinar los elementos requeridos" y que sean las dos pruebas que definimos. Tenemos que se realizaron las dos pruebas que pedimos. Funcionó correctamente el título del documento, ese que nosotros esperábamos. Y el formulario se encontraba presente tal como lo definimos con este ID. Ahora nos muestra un mensaje de que todo funcionó correctamente, y así es como funciona una prueba, básicamente, en CasperJS. Nosostros podemos encadenar pruebas, podemos realizar pruebas más complejas, pero esta es la sintaxis básica que vamos a utilizar para realizar nuestras 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.