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

Validación de recursos e imágenes

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Cuando trabajamos un sitio web no solo interactuamos con el código HTML, puesto que una página web es una sinfonía donde muchos instrumentos suenan en conjunto. En esta lección te muestro cómo asegurarse que cada uno de los elementos requeridos para el funcionamiento de tu web se encuentren disponibles y asignados correctamente.
07:06

Transcripción

En algunos casos vamos a necesitar realizar pruebas sobre el uso y ubicación de los recursos externos. Por recursos externos, me refiero a cualquier documento o archivo que nosotros utilicemos dentro de nuestra aplicación. Acá, por ejemplo, yo estoy cargando una imagen y voy a evaluar que esta imagen se encuentre disponible y que se esté utilizando correctamente dentro de mi documento. Vamos a ir al código. Y yo acá estoy trabajando un documento en el cual estoy definiendo una variable que muestra la dirección del documento que estoy probando en mi servidor local. También he creado una prueba que se va a llamar "Verificar imágenes", y voy a realizar tres diferentes evaluaciones. Tengo también los métodos para inicializar y ejecutar el código que voy a crear en éste archivo. Voy a comenzar examinando que dentro de la imagen, en la que nosotros vamos a trabajar, se esté utilizando correctamente el archivo que yo deseo que aparezca ahí. Por ejemplo, yo voy a evaluar que dentro de... Vamos a utilizar el "Inspect", y vamos a ver esta imagen. Y vamos a evaluar que, efectivamente, esta etiqueta esté utilizando la imagen que aparece acá. Para eso, vamos a ir al documento y vamos a utilizar una condicional. En este caso, vamos a evaluar... que la propiedad "this.getElementAttribute"... Y vamos a definir que la propiedad sea... ...en este caso, "img"... ...y el valor "src". Y, entonces, lo que va a hacer esta propiedad es que va a buscar el elemento que calce con este selector, en este caso la etiqueta "img", y va a tomar el atributo "src". Y esto me va a devolver el valor que se encuentra dentro de dicho atributo. Si revisamos el código, vamos a ver que, en este caso, "src" tiene un valor que es igual a "img/imagen.png". Así que vamos a evaluar esto. Y vamos a definir que en el caso de que el elemento "img" tenga este atributo... Vamos a mejorar acá esta sintaxis, y vamos a evaluar que tenga el valor: "img/imagen.png". De esta forma, me aseguro que específicamente esa etiqueta tenga específicamente esa imagen. Ahora, vamos a utilizar acá una sintaxis que me va a permitir a mi que en caso de que este elemento me devuelva un valor "true", o sea que sea efectivamente cierto, voy a utilizar el comando: "casper.test.pass", lo que significa que esta prueba fue ejecutada correctamente, y, si no, me va a mostrar un mensaje de error diciendo que esta prueba no funcionó. Ahora, en este caso, yo estoy utilizando una variable llamada "prueba" para que ambos elementos muestren el mismo texto y vamos a definir esa variable acá que se va a llamar "prueba". Y defino que la variable "prueba" va a tener el texto: "imagen con enlace correcto". Vamos a evaluar que sea este el caso y, dependiendo del resultado, vamos a mostar que funciona o no funciona correctamente. Ahora, vamos a realizar otra prueba. Vamos a asegurarnos de que la imagen que nosotros estamos cargando, en este caso: "imagen.png", se encuentre disponible dentro del documento. No solo que se esté utilizando correctamente, sino que se haya cargado, por ejemplo, que la imagen tenga correctamente la ruta, o que no tengamos ningún problema en el servidor. Para eso vamos a utilizar el comando: "casper.waitForResource" y vamos a definir cuál va a ser el recurso que vamos a esperar. En este caso, "waitForResource" va a detener la ejecución del código hasta que este recurso esté disponible. Vamos a terminar esta función como aparece acá. Vamos a cerrar las llaves y los paréntesis. Y, ahora, lo que se ejecute dentro de estas llaves va a suceder únicamente en caso de que nosotros tengamos acceso a el archivo "imagen.png". En cuyo caso, nosotros vamos a realizar dos pruebas. La primera prueba va a ser asegurarnos de que está disponible... Vamos a arreglar acá, tengo un error de sintaxis. Tenemos que incluir una función. Listo. Ahora sí. Tenemos una función que se está ejecutando cada vez que llega efectivamente la "imagen.png". Y, ahora, vamos a realizar una prueba que dice: "assert.ResourceExists". Esto significa que vamos a realizar una prueba que exista efectivamente esta imagen. Esta prueba es algo redundante en este caso específico, porque estamos esperando a que la imagen aparezca y estamos realizando la prueba sobre la imagen que ya sabemos que va a aparecer, pero simplemente quiero que veas que se puede realizar este tipo de pruebas. De hecho, para hacer una prueba similar, utilizando el mismo método, pero sobre otro recurso. Por ejemplo, nosotros podemos evaluar que se encuentre el recurso de JavaScript. En este caso yo estoy utilizando un archivo llamado "main.js", que esta en la carpeta "js", y voy a verificar que también se encuentre disponible el archivo de "javascript". Ya está lista mi aplicación. Vamos a guardar y vamos a ejecutar este código con "casperjs test" y vamos a llamar a "revisar_recursos.js". Vamos a ejecutarlo. Y, ahora sí, estamos verificando que el enlace dentro de la etiqueta "img" sea correcto, que la imagen esté disponible, y también estamos verificando que el archivo "javascript" esté disponible. De esta forma nosotros podemos verificar recursos que estén disponibles en el documento y también asegurarnos de que, por ejemplo, las imágenes se encuentren ubicadas correctamente.

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.