Tomar capturas de pantalla de páginas web desde la línea de comandos o desde la interfaz gráfica con Firefox

Como norma general las pruebas de una aplicación deben estar automatizadas con una herramienta de testing. Para el código Java una herramienta de pruebas es JUnit y para una aplicación web es Geb. Sin embargo, algunas pruebas que no son de funcionalidad de la aplicación sino en una aplicación web por ejemplo de estilos y de visualización en la pantalla, que la página se muestre correctamente. Para estos casos no queda más que revisar, visualizar y comprobar la corrección visual de la misma, una posibilidad es entrar en la página manualmente mediante su dirección y realizar la comprobación.

Sin embargo, las acciones manuales hay que evitarlas en la medida de lo posible y que sean las menos posibles realizando su automatización ya que consumen mucho tiempo dedicable a tareas de valor. En este caso realizando la automatización se evita abrir el navegador, introducir la URL de la página o navegar hasta ella por cada URL a probar.

Aunque la revisión visual no esté automatizada y dependa de intervención humana al menos evitando las acciones manuales de introducir la URL o navegar hasta ella supone un ahorro de tiempo importante. La correcta visualización de una página puede consistir en revisar una captura de pantalla de la página y la automatización consiste en obtener esa captura de pantalla.

Esta automatización es interesante también ya que guardando los archivos de captura permiten tener un registro del estado de la visualización de una página a lo largo del tiempo y ver los cambios que se han ido realizando.

Captura de pantalla desde la linea de comandos con Firefox

Para obtener la captura de pantalla el navegador Firefox permite desde la línea de comandos cargar una página a partir de su URL y obtener su captura de pantalla guardándola en un archivo jpg o png. Las capturas de pantalla también se pueden tomar en un servidor GNU/Linux sin interfaz gráfica con un comando habiendo instalado Firefox previamente para este propósito.

1
2

$ firefox -P headless -headless --screenshot duckduckgo.png https://duckduckgo.com/

El parámetro -P indica el perfil a usar y hay que crear uno para tomar capturas de pantalla al mismo tiempo que está abierto el perfil personal en una ventana gráfica del navegador. Hay varias formas de crear un nuevo perfil en Firefox. Desde la página de configuración about:profiles, con el gestor de perfiles o desde la línea de comandos.

1
2

$ firefox -p

1
2

$ firefox -CreateProfile headless

Si hay necesidad de tomar varias capturas de pantalla de diferentes URLs de la aplicación o diferentes páginas web, con un script del intérprete de comandos Bash y dada una lista de URLs una por línea en un archivo se realiza el bucle. El parámetro screenshot contiene el nombre de la imagen en el que guardar la captura y a continuación la URL de la que tomar la captura, el parámetro --window-size especifica el ancho del navegador al tomar la captura, cambiar el ancho permite observar como se visualiza la página en diferentes resoluciones de ancho (1366, 1600, 1920, 2560, …).

1
2
3
4
5

google,https://www.google.es
duckduckgo,https://duckduckgo.com
ubuntu,https://www.ubuntu.com
redhat,https://www.redhat.com
archlinux,https://www.archlinux.org

1
2
3
4
5
6
7

#!/usr/bin/env bash
cat links.txt | while read -r LINE
do
  NAME=`echo $LINE | cut -d \, -f 1`
  URL=`echo $LINE | cut -d \, -f 2`
  firefox -P headless -headless --screenshot "$NAME.png" $URL --window-size=1920
done

El resultado son las siguientes capturas de pantalla.

Con un gran número de páginas validar visualmente cada una de las páginas mediante una imagen aun con la automatización de tomar la captura consume una buena cantidad de tiempo, para reducir el número de capturas a validar el archivo puede limitarse a unas representativas de la aplicación o unas aleatorias de todo el conjunto, con los comandos sort -R y head -3 se toman las 3 primeras líneas aleatorias del archivo, el comando sort las ordena de forma aleatoria y el comando head toma el número de líneas indicado.

1
2
3
4
5
6
7

#!/usr/bin/env bash
cat links.txt | sort -R | head -3 | while read -r LINE
do
  NAME=`echo $LINE | cut -d \, -f 1`
  URL=`echo $LINE | cut -d \, -f 2`
  firefox -P headless -headless --screenshot "$NAME.png" $URL --window-size=1920
done

Captura de pantalla desde Firefox

Firefox también permite tomar capturas de pantalla desde la interfaz gráfica, con el botón derecho y la opción del menú emergente Hacer una captura de pantalla de la pantalla completa o de la parte visible en ese momento o también desde el Inspector que se muestra con el botón derecho y la opción Inspeccionar elemento y habilitando la opción Hacer una captura de pantalla de la página completa y si se desea Captura de pantalla al portapapeles con las opciones de los ajustes.

La consola web de Firefox también permite tomar capturas de pantalla escribiendo el comando :screenshot.