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

Desarrollo web: Control de calidad automatizado

Capturas de pantalla con PhantomJS

¡Prueba gratis durante 10 días

nuestros 1288 cursos !

Prueba gratis Mostrar modalidades de suscripción
En esta lección vamos a explorar la capacidad de capturar imágenes de PhantomJS y te voy a mostrar una técnica para hacer capturas múltiples para hacer pruebas de diseños responsivos en todas las posibles combinaciones de pantallas.
10:22

Transcripción

Una de las características más interesantes que tiene PhantomJS es la capacidad de realizar captura de pantalla. Si bien es cierto, PhantomJS es un navegador que no tiene interfaz, sí puede tomar capturas de pantalla. Por ejemplo, vamos a tomar captura de pantalla de este documento. Yo acá estoy trabajando un documento, que se encuentra dentro de mi servidor local y vamos a capturar la información para poder ver cómo se despliegan los elementos visuales dentro de este documento Para eso, voy a utilizar este archivo llamado "capturas_de_pantalla.js". Antes de comenzar voy a definirle dos variables. La primera va a ser sitioWeb en la cual voy a importar el módulo "webpage" que me va a permitir a mí trabajar esta variable dentro de PhantomJS y trabajarlo como si fuera una página web. También voy a definir una variable llamada URL en la cuál se encuentra la dirección de la página la cual quiero evaluar, en mi caso, es la que se encuentra dentro de mi servidor local. Ahora, una vez que tengo definidos estos elementos, voy a decirle a PhantomJS que abra un documento Esto lo vamos a hacer llamando al objeto "sitioWeb" con el método "open". Le definimos la dirección, en este caso, la que tengo en mi URL y una vez que tengamos la información de este documento vamos a ejecutar esta función. Esta función va a capturar un argumento que se va a llamar "status", en este caso. Y me va a permitir a mí saber el estatus del documento que estamos cargando en este caso, la dirección de mi servidor local. Para asegurarme de que yo estoy trabajando siempre dentro de un documento, que funciona correctamente, vamos a crear acá una condicional que me dice que se ejecute este código únicamente si el valor de estatus es igual a "success". Ahora, yo quiero realizar una captura de pantalla. Para poder realizar una captura de pantalla yo tengo que definir cuál va a ser el tamaño de mi navegador. Como en el caso de PhantomJS nosotros no tenemos control visual sobre el navegador vamos a definirlo a través de una propiedad llamada Viewport. El Viewport es específicamente el tamaño que tiene mi navegador, quiero que note los valores que aparecen dentro de la esquina superior derecha de este navegador el momento que yo lo escalo, por ejemplo 882x400, etc. etc. Acá me están apareciendo las dimensiones del Viewport de este navegador; en vez de hacerlo manualmente yo lo voy a definir a través de unas propiedades para que PhantomJS pueda ejecutar este mismo proceso que acabo de hacer yo de manera manual. Esto lo vamos a hacer definiendo al sitioWeb en el que estamos trabajando la propiedad "viewportSize" y le vamos a asignar dos valores. Estos valores van a estar en formato JSON. El primer valor va a ser el "width", va a ser el ancho, y se lo vamos a definir de 1201, ya te voy a decir por qué. Vamos a definir también un alto que es un "height" y este valor puede ser cualquiera que nosotros asignemos, en este caso le voy a poner 100. Ahora, es importante que siempre asignemos estos dos valores. El primer valor va a ser el ancho, que nos va a permitir a nosotros definir cómo se va a mostrar nuestra aplicación. El segundo, va a ser el alto. El alto va a ser un valor que se va a actualizar automáticamente; en mi caso puse 100 pero si yo estuviera sacando un "screenshot" o una captura de pantalla de este documento, por ejemplo, 100 sería aproximadamente hasta donde está el título pero la captura se va a hacer del tamaño que tenga el documento en el que estamos trabajando. En este caso va a llegar hasta el final de ese documento. Sin embargo, aunque esto se hace automáticamente, siempre debemos definir el valor de "height" o alto. Ahora, ya tenemos definido lo que va a ser el valor del Viewport. Una vez que tenemos definido este valor, vamos a realizar la captura de pantalla a través del comando sitioWeb.render esto va a realizar un renderizado del documento el cuál estamos trabajando, en mi caso, el archivo que está dentro del servidor local y lo vamos a capturar en un formato de imagen. Así que, vamos a definir el nombre que va a tener esta imagen que va a ser "screenshot.jpg". Este va a ser el nombre de nuestro documento y también le vamos a definir algunas propiedades. Estas propiedades les vamos a poner entre llaves, porque están en formato JSON y vamos a definir primero cuál va a ser el formato en este caso JPEG, pero puede ser un archivo PNG o GIF y también le vamos a definir la calidad. En el caso de que estés trabajando muchísimas imágenes o que estés trabajando dentro de un servidor un poco lento, te recomiendo bajar la calidad. En el caso de que no haya ningún problema puedes trabajar con una calidad de 80 a 100 te va a dar una muy buena calidad de imágenes. Vamos a trabajar con calidad 80, en este caso. Listo, estamos definiendo el tamaño del navegador y vamos a hacer una captura de esta imagen. Vamos a guardar y voy a ejecutar el código de mi aplicación dentro de PhantomJS y el nombre de mi archivo JavaScript. Estamos realizando una captura de pantalla y todavía está abierto este proceso porque no he incluido la opción de "phantom.exit" que debe ir una vez que realicemos las pruebas para que tengamos disponible la consola. Vamos a forzar el cierre a través de el teclado Ctrl C y vamos a ver la imagen que acabamos de capturar. Acá está la captura del documento en el que estamos trabajando. Podemos ver en que se ve exactamente igual a la página que se encuentra dentro de mi servidor local. Ahora, te voy a mostrar una técnica que es bastante interesante, me gusta mucho trabajar que es que vamos a tomar una serie diferente de capturas de pantalla, pero con diferentes resoluciones. En el caso de este documento yo estoy trabajándolo con Bootstrap. Bootstrap tiene una serie de calidades responsivas que nos permiten mostrar diferentes versiones de nuestro documento, de acuerdo a la resolución en que se encuentra. Así que yo voy a utilizar los diferentes tamaños de Bootstrap para poder generar diferentes capturas de pantalla de acuerdo a las resoluciones soportadas y ver todas las versiones que va a tener mi sitio web y saber si existe algún error dentro de estas. Para hacer eso vamos a modificar un poco el código. Yo voy a cortar el código que tengo acá Ctrl + X y voy a crear ahora, una nueva variable que se va a llamar "captura". Quiero que notes que esta variable se encuentra fuera de la función que nosotros estamos trabajando acá "open". Así que, vamos a llamar captura y la vamos a llamar como una función y adentro de ella vamos a pegar los valores que acabamos de utilizar para tomar la captura de pantalla. Ahora, vamos a incluirle algunos valores dinámicos dentro de esta función y voy a incluir un ancho, alto y un nombre. Voy a tomar el valor de ancho, y en vez de definir un valor estático, vamos a poner un valor dinámico. Voy a repetir el proceso con el alto y en el nombre vamos a concatenar el valor y vamos a dejar la extensión JPG, vamos a incluir el nombre que se está definiendo acá y le vamos a poner Imagen. Ahora estamos concatenando imagen, valor dinámico de nombre y la extensión JPG. Todo lo demás, lo dejamos exactamente igual. Ahora vamos a utilizar este valor de captura como un método dentro de nuestra aplicación. ¿Cómo lo vamos a hacer? Sencillo. Vamos a poner, "captura" definimos los valores que queremos que tenga el Viewport o el tamaño de la pantalla y también el valor que queremos que tenga. Por ejemplo, yo quiero sacar la pantalla "extra_small". Ahora, una vez que definí esto, puedo repetirlo todas las veces que quiera y voy a repetir por todos los diferentes valores que tiene Bootstrap. Así voy a tomar con las diferentes resoluciones que me da este "framework". Vamos a ejecutar nuestro "script" y vamos a ver que van a aparecer una serie de imágenes y vamos a tener las diferentes resoluciones en que se va a mostrar nuestro documento. Por ejemplo, acá es para "tablet" y en imagen tenemos por ejemplo, para celular cómo se va a mostrar para un celular en la menor resolución posible. Así podemos ver, cómo se va a desplegar nuestro documento en diferentes resoluciones de pantalla.

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.