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

Simular clics

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Es virtualmente imposible de pensar simular el comportamiento de un sitio web sin incluir la interacción más básica y frecuente del ratón. En esta lección te voy a dar una introducción de este tipo de eventos y simularemos la interacción de un sitio web con un clic a través de CasperJS.
08:25

Transcripción

CasperJS y PhantomJS nos van a permitir a nosotros simular y evaluar prácticamente cualquier conducta que se realiza dentro de un navegador. En esta lección, vamos a aprender cómo simular el evento clic. Acá, yo estoy trabajando dentro de una página que está funcionando en un servidor local. Específicamente, dentro de esta página, tengo una conducta, que al hacer clic sobre este botón, me va a mostrar tres diferentes imágenes. Voy a realizar una prueba sobre esta conducta y para eso voy a evaluar que CasperJS simule el evento de clic y pueda evaluar que estas imágenes aparezcan correctamente. Para eso vamos a hacer primero una selección de los elementos del documento, vamos a examinar cuáles son las clases correspondientes a cada uno de estos elementos. Primero vamos a evaluar el botón. En el caso del botón, tenemos que es un enlace de tipo "a" y tenemos que tiene un "id" llamado "redes-btn". Al hacer clic sobre él, vamos a mostrar un "div" que se encuentra acá, que todavía no es visible, que se llama "redes-sociales". Vemos que en este caso tiene la propiedad "display: none" y que al hacer clic la propiedad cambia a un "display: block" y se oculta el botón utilizando la misma propiedad "display: none". Ahora, vamos a evaluar que se realicen todas estas acciones desde CasperJS. Yo acá estoy trabajando en un documento llamado "simular_clicks.js". He creado un "test"que se va a llamar "Examinar sección de redes sociales", donde vamos a examinar esta capacidad que te acabo de mostrar dentro de mi web. Voy a realizar seis diferentes pruebas y ya tengo definido los métodos que van a inicializar la página web y que van a ejecutar todo el código que vamos a incluir en esta prueba. He incluido también una variable donde tengo la dirección de la página que se encuentra en mi servidor local. Ahora vamos a comenzar realizando las pruebas. La primera prueba que quiero hacer es asegurarme de que se encuentra el botón con el que vamos a trabajar. Para eso, voy a incluir el código "test.assertExists" y voy a asignar un selector. El selector que voy a utilizar en este caso es "a", que es la etiqueta del botón y el "id", que acabamos de ver que era "redes-btn". Esto es el selector de mi botón y así yo me voy asegurar que este botón exista en el momento en que abrimos nuestro documento. Le voy a poner el nombre a esta prueba, en este caso, se va a llamar, "Botón de redes sociales presente". Así nos vamos a asegurar de que existe este botón. También nos vamos a asegurar de que existe la casilla donde se encuentran las redes sociales. Voy a repetir el mismo código solamente que voy a modificar el selector, en este caso voy a buscar la clase donde se encuentra la casilla de redes sociales. Así que tenemos seleccionados los dos elementos con los que vamos a interactuar y vamos a asegurarnos de que ellos se encuentren en el documento cada vez que nosotros trabajamos en él. Esta va a ser dos de las evaluaciones que vamos a realizar. Vamos a incluir otro paso. En este segundo paso, vamos a asignar ahora cuáles van a ser las propiedades visibles de estos dos elementos. Para eso vamos a incluir la propiedad "test.assertVisible". Esto va a evaluar que el elemento que yo seleccione va a tener la propiedad "display: block" y que es visible. Entonces, en este caso, vamos a asegurarnos de que el botón que se encuentra al inicio de mi aplicación esté visible. Vamos a incluir el selector "a#redes-btn" con el "id" indicado y vamos a asignar que esta prueba se va a llamar "Botón de redes sociales visible". Ahora vamos a hacer la misma prueba pero a la inversa. Vamos a asegurarnos de que la casilla donde se encuentran los iconos de las redes sociales no sea visible, así que se va a llamar "assertNotVisible", en este caso la diferencia es el "not". Vamos a asegurarnos de que este selector se encuentre oculto con la propiedad "display: none". Sabemos, entonces, que si se ejecuta correctamente, el nombre de esta prueba va a ser "Contenedor de redes sociales oculto". Ahora que ya sabemos que se encuentra visible el botón y que la sección de imágenes se encuentra oculta, vamos a simular un clic. Para simular un clic, solamente ponemos "this.click" y definimos cuál va a ser el elemento al que le vamos a hacer clic, en este caso sabemos que tenemos un botón. Así que vamos a incluir el botón que ya hemos evaluado que se encuentre presente, que se encuentre visible y vamos a hacer clic sobre él. Una vez que hagamos clic sobre este botón vamos a definir el último paso de nuestra prueba, "Casper.then", vamos a incluir una función y la última parte de nuestra prueba va a ser revisar que los elementos que acabamos de asegurarnos de que eran visibles u ocultos se encuentren ahora visibles u ocultos de acuerdo a la acción, o sea que el botón se encuentre oculto. Así que vamos a hacer la misma prueba a la inversa, vamos a definir la prueba "assertNotVisible" al botón y nos aseguramos de que el botón se encuentra oculto después de hacer clic. Y la última prueba que vamos a definir va a ser "assertVisible" para que la casilla de imágenes, donde están las redes sociales, se encuentre visible. Ahora tenemos definidas pruebas antes y después del evento clic. Vamos a guardar esta prueba y vamos a ejecutarla con "casperjs test", definimos el archivo "simular_clicks.js". Presionamos "Enter" y vemos cómo se han ejecutado las seis pruebas que hemos definido. Tenemos el botón de redes sociales, el contenedor presente, sabemos que están visibles u ocultos respectivamente y sabemos que se ocultan y se muestran después del clic. Posiblemente me debes estar diciendo que la prueba siempre daría lo mismo y que tal vez el clic no funcionó porque no lo vemos. Pero simplemente, comentando esta línea y al no generar el clic, vamos a ver que nuestra prueba nos va a dar un error y nos va a decir que si no hacemos clic, el botón de redes sociales oculto después del clic nos da un error. Vamos a ver la conducta que tenía nuestro navegador. Y vemos que efectivamente si no hacemos clic, no va a mostrarse la sección de redes sociales, pero al hacer clic, se muestra. Y así es como nosotros podemos simular eventos del "mouse" dentro de 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.