TL;DR: El módulo de Drupal "Backstop generator" permite generar la configuración de backstopjs para usar hacer pruebas visuales de regresión de manera sencilla.
Instalación
Instalación de backstopjs
Lo ideal, si se tienen varios proyectos en la misma máquina (ej: ordenador local de desarrollo) es instalarlo directamente en la máquina real, no dentro de un contenedor / DDEV. Esto es porque aparte de backstop es necesario descargar chromium para que renderice las páginas, y sería bastante ineficiente, lento y pesado hacelro pro proyecto.
# Instalar backstopjs de manera global
npm install -g backstopjs
# Instalar navegador
npx puppeteer browsers install chromeNota: En caso de tener una versión de nodejs antigua en la máquina real debido a que los reposiotrios de la distro no aportan versiones más nuevas, puede solventarse usando nvm y diciéndole que use la rsión 22, por ejemplo.
Instalación de backstop generator
# Añadir dependencia del módulo
composer require --dev 'drupal/backstop_generator:^2.0'
# Instalar módulo
drush pm:enable backstop_generatorSe recomienda su uso solamente en entorno de desarrollo, por lo que puede usarse el módulo Config split para evitar que se instale en producción.
Modo de uso
- Navegar a la página de configuración de Backstop generator:
/admin/config/development/backstop-generator - En la primera página, configurar los campos:
- Test domain: La URL del sitio de desarrollo (normalmente https://[SITIO].ddev.site)
- Reference domain: La URL del sitio de producción (https://example.com)
- Para pruebas iniciales, no es necesario cambiar nada dentro de "Profile parameters" ni "Scenario defaults"
- Navegar a la pestaña "Viewports"
- Por defecto, el módulo crea tamaños a partir del archivo .breakpoints.yml del tema. Desde esta pantalla pueden editarse / eliminarse o añadir nuevos
- Navegar a la pestaña "Perfile"
- Pulsar en el botón "Add backstop profile"
- Para el primer perfil que se cree, usar el nombre "backstop" como nombre máquina. Este será el general, que creará un archivo "backstop.json"
- Test domain y Reference domain se autorrellenan con los valores puestos en la página de configuración
- Seleccionar los viewports que se quieren comprobar
- Dentro del details "Scenario generator", elegir los idiomas y las páginas a comprobar (el módulo permite añadir de manera automática páginas a partide de enlaces de menú existentes, contenido aleatorio de los tipos de contenido que se quieran, nodos específicos con autocompletado o rutas específicas). La home ya viene activada por defecto
- Una vez se guarde el perfil, se generará un escenario por cada ruta selecconada. Elegir los escenarios que se quieran comprobar y volver a guardar
- Navegar a la pestaña "Scenarios"
- Aquí se pueden editar / eliminar los escenarios. Por ejemplo, par aun escenario específico se pueden sobreescribir las opciones generales
- Navegar a la pestaña "Comandos"
- Aquí se muestran los comandos a ejecutar para ejecutar las pruebas:
- cd tests/backstop (cuidado con el comando que aparece en la web, hay que quitar la primera /): Cambiar a la carpeta donde está la configuración de backstopjs generada por el módulo
- backstop reference (En caso de que no se tengan los binarios instalados globalmente de node en $PATH, se puede usar npx backstop reference): Genera las imágenes resultantes de cargar las páginas seleccionadas del sitio de producción para cada viewport seleccionado
- backstop test (En caso de que no se tengan los binarios instalados globalmente de node en $PATH, se puede usar npx backstop test): Ejecuta los tests (genera las imágenes resultantes de cargar las páginas seleccionadas del sitio de desarrollo para cada viewport seleccionado y las compara con las generadas en el comando anterior). Una vez termine, abrirá una pestaña del navegador donde se pueden ver las comparativas
- Aquí se muestran los comandos a ejecutar para ejecutar las pruebas:
Comparativa
En la página de comparativa que se abre tras ejecutar los tests pueden verse las diferencias entre el sitio actual y de producción para cada página y viewport.
Ejemplo sin cambios:
Ejemplo con cambios (cambiado el orden del texto y la imagen):
