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

Desarrollo web: Control de calidad automatizado

Analizar el contenido de un sitio web

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección utilizaremos la API de PhantomJS para explorar un documento HTML a través del DOM (document object model), para buscar elementos específicos de un sitio web, para confirmar su presencia y para probar su funcionalidad.
08:41

Transcripción

Vamos a aprender cómo evaluar elementos de un documento externo. En este caso, vamos a utilizar PhantomJS y, también, vamos a trabajar con una página que se encuentra funcionando dentro de un servidor local. Tengo un documento, en el cual tengo una etiqueta llamada "Título" o "Title", que me está mostrando en este caso, el título de mi página, que es "Nico's Café". Vamos a evaluar que exista esta etiqueta y que tenga ciertas características. Dentro de mi ordenador tengo un archivo llamado "index.html, donde estoy generando el código que se despliega dentro del navegador. Acá tenemos la etiqueta "title", que es la que vamos a evaluar. Ahora, voy a generar estas pruebas y voy a comenzar definiendo al PhantomJS que abra el documento donde se encuentra la información que queremos evaluar. Para eso, vamos a crear una variable, que se va a llamar "sitioWeb" y vamos a llamar a "require", que me va a importar un módulo que se va a llamar "webpage" y me va a permitir que el "sitioWeb", se comporte como una página web dentro de PhantomJS. Puedo utilizar el método "create", para tenerlo disponible, dentro de la aplicación. Vamos a crear otra variable, que se va a llamar "URL", donde se va a encontrar la dirección en la cual vamos a trabajar. Puedes definir cualquier dirección, en mi caso, voy a trabajar con la que se encuentra en mi servidor local para poder hacer algunos cambios y algunas pruebas. Una vez que tenemos definidos estos valores, vamos a abrir este documento utilizando: "sitioWeb.open", y vamos a definir qué dirección queremos abrir dentro de PhantomJS. Así que, le vamos a definir que sea "URL", y una vez que se abra esta URL, le vamos a pedir a PhantomJS que ejecute el código que se encuentra en esta función. Una vez que lo abramos, vamos a recibir también un valor, en este caso, lo vamos a capturar como un parámetro, al cual voy a llamar "status". Status me va a dar el valor de la respuesta. Una vez que abramos esta dirección, me va a decir que, en el caso de que se abra correctamente que tengamos acceso a este URL, me va a dar la respuesta "success". Así que, voy a utilizar este valor, para realizar una condicional, voy a decir que, si "status" es igual a "success" podamos ejecutar las pruebas que vamos a realizar dentro de este archivo PhantomJS y también le voy a decir que, una vez que acabe, ejecutemos el comando phantom.exit para que se cierre el documento que acabamos de abrir. Voy a evaluar que se encuentre el título dentro del documento "index.html". Para eso voy a crear una variable, que se va a llamar "título" y vamos a generar una evaluación. Vamos a decirle a "sitioWeb", que es el documento que estamos trabajando que evalúe, a través del comando "evaluate", un elemento, y vamos a decirle que, cuando se active, cuando esté disponible este documento, dentro de nuestra aplicación, ejecute una función y esta función me va a devolver un valor dentro del documento que estamos abriendo, que va a ser "document.title". Me va a devolver el título del documento en el que estamos trabajando. Vamos a ver el resultado de esto a través de "console.log(titulo)". Vamos a poder ver el resultado. Para eso, vamos a la terminal y vamos a PhantomJS y al documento en el que estamos trabajando, y vamos a tener el título del documento, en este caso, Nico's Café. Ahora si lo borro, vamos a tener un valor de nada porque no tenemos el título. Voy a dejarlo sin título, por ahora, sin la etiqueta "Title", simplemente para que realicemos algunas pruebas. Vamos a realizar una pruebas basados en la reglas que tiene Google para la indexación de sitios web. Google nos va a pedir que un documento tenga un título y que ese título sea mayor de 20 caracteres, pero menor de 60 caracteres. Así que, vamos a evaluar estos tres puntos: que exista, que sea mayor de 20 y que sea menor que 60. Vamos a realizar tres pruebas, dentro de PhantomJS. Primero, vamos a venir acá y vamos a definir una variable, que nos va a dar el tamaño del título. Para eso vamos a definir una variable, que se va a llamar "longitudTítulo" y le vamos a asignar que el valor del título, recordemos que es el valor de "title" y vamos a utilizar la propiedad "length" que me va dar el número de caracteres que tiene esta cadena de texto. Ahora, sabiendo que tenemos una cantidad definida dentro de longitud título, vamos a crear tres condicionales. Primero, vamos a evaluar que exista título y que, además, título sea... mayor que cero. En este caso ,vamos a decir que, si título no existe, o si título es igual a cero, entonces, vamos a mostrar un mensaje que nos va a decir que no se encuentra el título del documento. También vamos a utilizar otra condicional donde vamos a evaluar que la longitud del título sea menor de 60 caracteres. Y, finalmente, vamos a analizar que la longitud del título sea mayor que 20. En la primera condicional, vamos a definir que el título demasiado largo y vamos a dar la cantidad de caracteres que tiene y también, en la segunda evaluación que vamos a hacer, donde revisamos que sea mayor que 20, vamos a mostrar un mensaje en el caso de que no sea así, diciendo que el título es demasiado corto. Vamos a guardar y a comenzar a ejecutar nuestras pruebas. Primero, vamos a analizar que se encuentre el título. Nos dice que no se encuentra el título del documento. Vamos a poner acá, que existe el título del documento. Guardamos nuestro documento. Volvemos a ejecutar la prueba y ahora nos dice que el título es demasiado corto y que solo tiene 12 caracteres. Yo ya tengo un título definido que tiene ya suficiente cantidad de caracteres. Así que, vamos a guardar, otra vez, y ahora sí un título extendido. Lo vamos a evaluar una vez más y no nos muestra ningún mensaje, porque, aparentemente, todo está funcionando correctamente. Podemos poner, en todo caso, un "else" final que nos dice que el sitio está "OK" y podemos ver acá la respuesta. Listo. Ahora tenemos un sitio en el cual estamos haciendo las evaluaciones correctas para aplicar las diferentes normas de Google. Sabemos que existe un título, sabemos que tiene el rango correcto y también tenemos un mensaje que nos dice, --en el caso de que todo funcione correctamente-- qué sitio está trabajando correcto. Todo esto lo estamos haciendo utilizando las pruebas de PhantomJS.

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.
 
Formadores:
Fecha de publicación:16/05/2017
Duración:2:53 horas (21 Videos)

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.