Desarrollo web: Control de calidad automatizado

Captura de imágenes y análisis regresivo de CSS con CasperJS

¡Prueba gratis durante 10 días

nuestros 1242 cursos !

Prueba gratis Mostrar modalidades de suscripción
Aunque las pruebas para analizar el contenido y funcionalidad son robustas y ciertamente necesarias, en el mundo real te encontrarás muchas veces con cambios sutiles en el CSS o en el HTML, tan sutiles que pueden escapar a tus pruebas, por eso en esta lección vamos a usar algunas librerías adicionales que hacen análisis inteligente de imágenes y hacen comparaciones a nivel de pixeles, para asegurarnos que tu sitio se vea exactamente igual sin importar los cambios de funcionalidad que hagas.
09:18

Transcripción

En esta lección te voy a mostrar cómo realizar capturas de pantalla y también cómo realizar pruebas regresivas de CSS, que nos van a permitir a nosotros detectar cambios, incluso mínimos, que pueden pasar desapercibidos ante el ojo humano, pero gracias a PhantomCSS, que es una librería adicional que vamos a instalar, vamos a detectar incluso estos cambios mínimos. Vamos a entrar aquí a mi proyecto. Estoy trabajando dentro de un archivo llamado "captura_imagenes.js". Acá tengo definido el URL donde voy a realizar las pruebas, en este caso, la captura de imágenes. Y tengo definidos dos métodos para abrir este URL y para ejecutar el código con el que vamos a realizar nuestras pruebas. Para realizar una captura simple dentro de CasperJS, vamos a llamar el comando "casper.viewport" y le vamos a definir el tamaño en ancho y alto. Esto nos va a permitir tener un marco, una base inicial para tomar nuestras capturas de pantalla y saber si, por ejemplo, necesitamos que se vea en un tamaño de escritorio, o por ejemplo, cómo se va a desplegar en un dispositivo móvil. El "viewport" va a ser el tamaño que va a tener nuestro navegador. En este caso 1280 por 1024 va a ser un tamaño de escritorio. Definido el "viewport", o el tamaño que va a tener nuestra imagen, vamos a incluir directamente el comando "this.capture" y definimos el nombre de la imagen, en este caso le voy a poner "imagen", y siempre vamos a incluir la extensión ".png" porque este va a ser el formato en el que vamos a realizar las capturas en Casper. Vamos a ejecutar nuestro código y esto ha creado un archivo llamado "imagen.png", donde encontramos una captura simple de el documento en el que estamos trabajando. Ahora, vamos a utilizar un método un poco más sofisticado para realizar pruebas regresivas en CSS. Para eso vamos a necesitar instalar una librería adicional. Voy a abrir una nueva cejilla dentro de mi editor, en este caso estoy trabajando dentro de Visual Studio Code, y voy a instalarlo con el comando "npm install" y la librería que vamos a instalar se llama "phantomcss", en este caso voy a incluir el parámetro "save" para que se almacene dentro de la configuración de mi proyecto. Esto va a instalar una librería llamada "phantomcss". Vamos a revisarlo, y esto se va a incluir dentro de la carpeta "node_modules", que es la carpeta donde se instalan por defecto todos los módulos adicionales de Node, y vamos a encontrar una carpeta llamada "phantomcss". Acá vamos a tener un archivo llamado "phantomcss.js". Y te estoy mostrando esta ruta porque vamos a necesitar importarlo a través de nuestro documento, definiendo esta ruta. Para eso, yo voy a llamar una variable llamada "phantomcss", el comando "require", e incluyo la ruta al archivo ".js" que te acabo de mostrar. Una vez que hemos incluido esta línea, vamos a agregar otra línea adicional de configuración que va a ser "phantomcss", que es la instancia que acabamos de importar, y le incluimos el comando "init". En este caso a definir un valor que va a ser "libraryRoot" que es la raíz donde se encuentra "phantomcss", quiero que notes que es la misma ruta que hemos definido antes, pero no hemos incluido "slash" ("/") ni "phantomcss.js". Esto, para tener acceso a algunos archivos adicionales que necesita "phantomcss" Tenemos configurado completamente "phantomcss" para poder trabajar en nuestro proyecto. Y lo que vamos a hacer es que vamos a definir una captura de pantalla a través del comando "phantomcss.screenshot", y vamos a definir qué parte del documento queremos capturar. En este caso, estoy definiendo una clase llamada "jumbotron", para poder tomar una parte de mi documento, y va a ser todo lo que abarque esta clase. Si revisamos dentro de "index.html", vemos que tengo un "div" que se llama "jumbotron" que en este caso es el encabezado de mi documento, esto es lo que vamos a capturar. Ahora, una vez que hemos realizado esta captura, vamos a incluir dos líneas adicionales, en este caso va a ser "phantomcss.compareAll()" para realizar las comparaciones, y también un comando de salida para poder realizar todas las comparaciones y los procesos finales, que va a ser "phantom.exit", y ya vamos a "phantomcss.getExitStatus". Ya estamos listos para realizar la prueba de nuestro documento. Ahora, voy a cerrar, en este punto estoy trabajando en la terminal, en la que he instalado esta librería adicional, voy a cerrarla, o en este caso vuelvo otra vez a la terminal donde estoy ejecutando las pruebas de mi archivo "captura_imagenes". Vamos a ejecutarlo una vez más, y vemos acá un texto donde me dice que, si es la primera vez que estoy realizando una captura, y que en este punto se acaba de crear una carpeta llamada "screenshots". Vamos a revisarla. Esta carpeta se ha creado en el mismo lugar donde realicé la prueba, tenemos acá una carpeta llamada "screenshots", y se ha creado un archivo base que se llama "screenshot_0", donde vamos a tener el parámetro original para hacer las comparaciones de nuestro documento. Asumamos que esta es la versión perfecta del encabezado que yo quiero probar, y nada más quiero asegurarme si alguien hace algún cambio. Vamos a hacer intencionalmente un cambio, así que voy acá, a "main.css", y voy a modificar una parte del CSS de mi documento. Vamos a guardar, voy a volver a ejecutar el código, y vamos a revisar dentro de la carpeta donde se están tomando las capturas de pantalla, y vemos que tenemos "screenshots_0", que es la base inicial de mi documento, y vemos que ahora tenemos un archivo que se llama "screenshots_0.diff", donde me aparece una diferencia, vemos que el sistema encontró que había una diferencia y me lo está mostrando acá. Ahora, vamos a poder hacer algo más interesante. Voy a hacer otro cambio, y esta vez de "10" pixels le voy a poner "20", voy a volver a ejecutar la prueba y ahora el sistema me dice que hay un cambio y ha hecho un análisis de pixels y me dice que de los pixels que examinó un "1.47%" es diferente. Si revisamos dentro de nuestra carpeta vamos a encontrar que me aparece ahora una carpeta adicional que se llama "failures", acá me va a decir que hay un cambio importante dentro de mi documento y me lo va a mostrar. Vemos que acá aparece una cuadrícula y me aparecen los cambios en rosado. Me dice que esos cambios no están registrados y que entonces tengo que corregirlos porque de alguna forma, por ejemplo, algún desarrollador modificó algo y se está desplegando incorrectamente mi documento. Vamos a cambiar una vez más, y esta vez le voy a asignar el valor original, que era cero, a mi CSS. Ejecutamos una última vez la prueba. Vamos a ver que el sistema me dice que todo está funcionando correctamente, que no hay ningún cambio, y que podemos seguir trabajando. De esta forma, vamos a poder detectar a un nivel muy granular cualquier cambio que tengamos en nuestros documentos y asegurarnos al 100% que van a tener una apariencia consistente no importa los cambios que realicemos incluso en el CSS.

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.