Vamos a actualizar nuestra Política de privacidad próximamente. Te recomendamos consultar el avance.

Desarrollo web: Control de calidad automatizado

Simular entrada de datos en formularios

¡Prueba gratis durante 10 días

nuestros 1290 cursos !

Prueba gratis Mostrar modalidades de suscripción
Los formularios son las entradas de datos por excelencia para un sitio web. En esta lección no solo aprenderemos a seleccionar e insertar datos en un formulario, sino que también vamos a hacerlo usando diferentes entradas de datos para que puedas realizar pruebas en cualquier formato de formulario.
08:52

Transcripción

En esta lección vamos a aprender cómo simular el comportamiento de la entrada de texto de un formulario. Acá, yo estoy trabajando dentro de un servidor local, donde tengo un formulario de contacto. Te voy a mostrar la conducta que vamos a evaluar. En este caso, yo voy a poner un nombre; vamos a poner un correo; vamos a seleccionar una opción, en este caso estoy utilizando diferentes componentes, no solo texto, sino también un "radio button"; vamos a incluir un mensaje; y, finalmente, vamos a seleccionar este "checkbox", y voy a presionar "enviar". En este caso, cuando se recibe la información, desplegamos un mensaje y, en este caso, va a decir: "Gracias por contactarnos", y va a aparecer el nombre del usuario. Vamos a evaluar que todo esto suceda correctamente, utilizando CasperJS. Vamos a ir al código, y en este caso estoy utilizando Visual Studio Code. Y yo acá estoy trabajando un archivo llamado "formulario.js". En este caso, estoy definiendo dentro de una variable la dirección donde se encuentra el formulario de contacto, y he creado una prueba con todo el código necesario para poder ejecutarla. Ahora, vamos a comenzar a definir cuáles van a ser las pruebas. En este caso, vamos a definir dos pruebas, pero antes tenemos que realizar algunos pasos. Primero, vamos a buscar la sección en la que inicializamos este archivo, en este caso, el archivo "contacto.html", donde se encuentra el formulario. En este caso, yo voy a relizar la primera prueba examinando que se encuentre el formulario en el que vamos a trabajar. En este caso, el formulario tiene un ID llamado "Contacto", así que vamos a asignarlo, y vamos a evaluar que se encuentre este elemento con el método "assertExists". Esto va a examinar que un formulario con el ID "contacto" se encuentre, y nos va a enviar un mensaje. Ahora, una vez que nos aseguramos que se encuentra este formulario, vamos a insertarle algunos datos. Revisemos el código de este formulario. En este caso, el formulario... Y quiero que notes que esta es una parte importante. Cada una de las entradas de texto tiene la propiedad "Name", y cada una de ellas tiene definido un valor para este nombre. Ahora, entonces tenemos que el "input" definido con el "name", nombre, va a recibir el nombre del usuario. El "input" con el nombre "email" va a recibir la dirección de correo electrónico, y así sucesivamente durante todo el formulario. Cada uno de los elementos va a tener un identificador por nombre. Ahora, utilizando esto, vamos a volver acá al formulario; y nosotros vamos a utilizar una propiedad de Casper llamada "this.field". Esto, básicamente, lo que va a hacer es que va rellenar un formulario. Ahora, debemos definirle cuál va a ser el formulario en el que vamos a trabajar. Puede ser que el documento tenga varios. Así que vamos a definir un selector. En el caso de CasperJS, los selectores tienen la misma sintaxis que CSS, así que vamos a utilizar exactamente el mismo selector que utilizamos para "assertExists", y nos aseguramos que el formulario con el ID "contacto" va a tener datos. Ahora, vamos a incluir acá dos argumentos más, separados por comas, donde vamos definir los valores que va a tener y un valor "true" para poder asignarlo dentro de "field". En este caso, yo estoy definiendo los valores que va a tener mi formulario utilizando formato JSON. Estoy poniendo toda la información dentro de llaves y, cada una de las propiedades, le agrego dos puntos y el valor que quiero que tengan. Quiero que notes que los valores que estoy poniendo acá, dentro de las diferentes propiedades que va a tener este JSON, son los nombres que tienen los diferentes campos. Así es como voy a asignarle los valores. Por ejemplo, si yo quiero que "nombre" tenga un valor nada más busco la propiedad "name". Me doy cuenta de que este es el valor, lo asigno acá; y este es el valor que se va a insertar durante la prueba. Ahora ya tenemos definido el formulario y el contenido que va a tener el formulario. Nos falta revisar el siguiente proceso que es hacer clic sobre el botón "enviar". En este caso, vamos a utilizar... ...el argumento "this.click". Esto va a simular el evento "clic" dentro de un selector. Definimos cuál va a ser el selector. En este caso, vamos a buscar el formulario de "contacto"; vamos a buscar una entrada de tipo "input" con el tipo "submit". Revisamos. Acá tengo un botón de "submit", acá tenemos un "imput", y vemos que es de tipo "submit". Utilizando la sintaxis de CSS3, estamos seleccionando este elemento, y ya hemos simulado el evento "click". Esto va a enviar el formulario y ahora vamos a hacer la prueba de que aparezca el nombre del usuario. En el caso específico de este formulario, yo estoy ocultando información, en caso de que exista la variable de "nombre". Así que voy a utilizar un paso... Vamos a colocar correctamente este "this". Debería ir acá dentro de la llamada "start". Y ahora vamos a incluir "casper.then", e incluimos una función, y dentro de esta función vamos a utilizar un argumento llamado "this.waitUntilVisible", y asignamos un selector. En este caso va a ser un elemento que va a tener el ID "respuesta". Una vez que este elemento ha sido seleccionado, vamos a incluir una función. Vamos a cerrar esta función. Listo. Ahora, lo que va a pasar es que cuando lleguemos a la línea 21 de mi código, la ejecución se va a detener, y vamos a revisar que la sección "respuesta" este visible. Vamos a revisar dentro del código, y vemos que acá hay un ".dib" con "id'respuesta'", que es el que se va a seleccionar. Y yo, dentro del código de CSS, tengo oculto este mensaje. Este mensaje solamente va a aparecer una vez que el usuario haya enviado la información y podamos mostrar, en este caso, el nombre. Así que yo voy a detener la ejecución de mi código hasta que esté disponible. Esto solamente para asegurarme, en caso de que exista algún tipo de retraso, de que la programación sea muy lenta, de que exista algún paso adicional, la programación va a detenerse hasta que ese elemento sea visible. Una vez que, por ejemplo, si tiene una animación, una vez que haya terminado, va a mostrarse. Ahora sí, estamos listos para terminar. Y lo que voy a hacer es la última parte de la prueba, que es asegurarme de que existe este elemento "respuesta" y que se está mostrando la información correctamente, en este caso, "Gracias por contactarnos". Y aparece el nombre que hemos asignado dentro del formulario. Vamos a guardar y vamos a ejecutar. En este caso, "casperjs test" y el nombre del archivo en el que vamos a trabajar, que es "formulario.js". Ejecutamos nuestro código, y vemos que sí, todo está funcionando correctamente y estamos realizando las pruebas dentro de un formulario.

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.