Cómo hacer pruebas de regresión visual fácilmente en WordPress

Mantener tu sitio de WordPress con el aspecto que debería puede ser estresante. Una pequeña actualización o un rápido ajuste de CSS pueden romper silenciosamente un diseño, y a menudo no te darás cuenta hasta que un visitante te lo señale.

Las pruebas de regresión visual de WordPress resuelven esto comparando automáticamente cómo se ven tus páginas antes y después de cada cambio, y luego te alertan en el momento en que algo cambia.

Y aunque las "pruebas de regresión visual" suenan técnicas, no necesitas herramientas de desarrollador para usarlas. Es una forma sencilla de ahorrar horas de revisiones manuales y evitar problemas de diseño vergonzosos.

Después de probar diferentes herramientas y métodos, he encontrado una opción confiable que no requiere codificación ni experiencia técnica. En esta guía, te mostraré cómo ejecutar pruebas de regresión visual en tu sitio de WordPress en cinco sencillos pasos. 🧑‍💻

¿Qué es la prueba de regresión visual?

La prueba de regresión visual es una forma de verificar si el diseño de tu sitio cambia inesperadamente después de una actualización. Funciona comparando instantáneas de tus páginas antes y después para detectar cualquier cosa que se vea diferente.

Cada vez que actualizas el núcleo de WordPress, instalas un plugin, cambias un tema o ajustas código, existe la posibilidad de que algo en el front-end se mueva de su lugar: un botón faltante, un diseño roto o una imagen que deja de cargarse repentinamente.

¿El problema? Estos errores visuales a menudo pasan desapercibidos hasta que un visitante los señala a través de un formulario de contacto o una encuesta de comentarios de diseño. Para entonces, el daño a la experiencia de usuario de su sitio podría estar hecho.

Es por eso que ejecutar pruebas de regresión visual es tan útil.

El proceso es simple: toma capturas de pantalla de tus páginas antes y después de una actualización, luego compáralas para detectar cualquier cosa que haya cambiado.

Y si estás probando en un sitio de staging (lo cual recomiendo), puedes hacer actualizaciones y ejecutar comparaciones de forma segura para detectar problemas visuales antes de que algo salga en vivo.

Tampoco tienes que ejecutar estas comparaciones manualmente.

Con herramientas de prueba de regresión visual como VRTs, Percy o BackstopJS, puede automatizar comparaciones de capturas de pantalla y verificar cómo se ve su sitio en diferentes tamaños de pantalla, lo que le ayuda a detectar problemas de diseño en computadoras de escritorio, tabletas y dispositivos móviles.

¿Por qué es importante la prueba de regresión visual para los usuarios de WordPress?

Si administras un sitio web de WordPress, las pruebas de regresión visual son una red de seguridad que ahorra tiempo.

Los sitios de WordPress son especialmente vulnerables a las interrupciones del diseño porque se ensamblan a partir de muchas partes independientes: tu tema, el constructor de páginas, los bloques y los complementos asumen diferentes cosas sobre cómo se renderizan tus páginas.

Cualquiera de estos puede cambiar silenciosamente la forma en que se ve una página:

• Una actualización de plugin modifica el estilo de un botón o formulario
• Una actualización del núcleo de WordPress cambia la forma en que se muestra un bloque de Gutenberg
• Una actualización de WooCommerce cambia el diseño del producto o los campos de pago
• Una actualización del tema ajusta el espaciado, las fuentes o los puntos de interrupción responsivos
• Una edición de CSS personalizada afecta a más páginas de las que esperabas

Las pruebas de regresión visual de WordPress detectan estos cambios no intencionados antes que tus visitantes. En lugar de revisar cada página después de cada actualización, la herramienta compara capturas de pantalla del antes y el después y marca cualquier cosa que se vea diferente.

Para los propietarios de sitios ocupados, esto significa tranquilidad. Para las agencias que administran sitios de clientes, significa detectar regresiones antes de que un cliente te envíe un correo electrónico al respecto.

Dicho esto, te mostraré cómo hacer fácilmente pruebas de regresión visual en WordPress. Aquí tienes un resumen rápido de los pasos que cubriremos:

Paso 1: Instalar y activar el plugin de pruebas de regresión visual

Para empezar, inicia sesión en el panel de control de tu sitio de staging (o tu sitio en vivo, si lo prefieres).

En este tutorial, usaré el plugin VRTs porque es fácil de usar para principiantes y sencillo para las pruebas de regresión visual. Ya sea un diseño desplazado, un botón faltante o un elemento roto después de una actualización, VRTs lo ayuda a detectarlo a tiempo.

Así es como funciona: El plugin toma capturas de pantalla de las páginas que selecciona. Luego puede activar comparaciones manualmente o programarlas para que se ejecuten automáticamente después de realizar cambios en su sitio, como actualizar un plugin o ajustar su tema.

Luego, el plugin compara las capturas de pantalla del 'antes' y el 'después' una al lado de la otra y resalta cualquier diferencia visual.

Así que, en lugar de revisar manualmente cada página, obtienes un informe visual rápido que muestra qué cambió y si algo se ve mal.

Para instalar el plugin, primero debe visitar el sitio web de VRTs y registrarse para obtener un plan haciendo clic en el botón 'Comenzar gratis'.

Luego puedes elegir uno de los planes.

En el momento de escribir esto, el plan gratuito te permite probar hasta 3 páginas por día en un dominio y programar pruebas diarias. Los planes de pago te permiten probar más páginas, ejecutar pruebas manuales y ejecutar automáticamente pruebas de regresión visual después de las actualizaciones del núcleo de WordPress, los plugins y los temas.

Simplemente haz clic en 'Comprar ahora' o 'Instalar ahora' debajo del plan que deseas usar.

Luego, sigue las instrucciones para registrarte para obtener una cuenta en el sitio web de VRTs y agregar tus datos de pago.

Una vez que hayas completado el registro, accederás a tu panel de VRTs, donde podrás descargar el plugin como un archivo .zip.

Luego, simplemente dirígete a la página Plugins » Añadir Plugin y haz clic en el botón 'Subir Plugin'. Desde aquí, puedes elegir el archivo .zip del plugin VRTs que acabas de descargar.

Asegúrese de activar el plugin una vez que se haya instalado. Para obtener todos los detalles, puede consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Paso 2: Configurar los ajustes del plugin VRT

Una vez que hayas activado el plugin, es hora de decidir cuándo se ejecutarán tus pruebas de regresión visual.

Vaya a VRTs » Configuración en su menú de administración de WordPress.

Dentro de la página de configuración, desplázate hacia abajo hasta la sección ‘Triggers’ (Disparadores). Aquí es donde le indicas al plugin cuándo tomar y comparar automáticamente las instantáneas.

Aquí están las opciones disponibles:

• Ejecutar pruebas cada 24 horas (Gratis) – Esta es la configuración predeterminada. VRTs revisará automáticamente tus publicaciones o páginas seleccionadas una vez al día en busca de cambios visuales.
• Ejecutar pruebas después de actualizaciones de WordPress y plugins (Pro) – Ideal para detectar problemas de diseño causados por actualizaciones, justo cuando ocurren.
• Ejecutar pruebas con tus aplicaciones favoritas (Pro) – Conecta VRTs con herramientas o flujos de trabajo externos utilizando webhooks.
• Ejecutar pruebas bajo demanda (Pro): active manualmente las pruebas siempre que las necesite, directamente desde su panel de WordPress.

Una vez que hayas seleccionado el disparador que se ajuste a tu flujo de trabajo (o a tu licencia), simplemente haz clic en el botón ‘Guardar Cambios’ en la parte inferior de la página.

Paso 3: Agregar nuevas páginas o publicaciones para probar

Una vez que hayas configurado los ajustes del plugin, es hora de elegir qué páginas o entradas quieres incluir en tus pruebas de regresión visual.

Cambiemos a la pestaña ‘Tests’ (Pruebas), donde administrarás y ejecutarás tus pruebas visuales. Desde aquí, puedes hacer clic en el botón ‘Add New’ (Añadir Nuevo). Esto te permitirá elegir publicaciones o páginas para probar.

En la ventana emergente que aparece, elija las publicaciones o páginas que desea incluir en sus pruebas de regresión visual.

Luego, haz clic en 'Añadir nueva prueba' para confirmar tus selecciones.

El plugin VRTs tomará una instantánea inicial de cada página seleccionada. Esto actúa como tu línea base, básicamente una versión de "antes" de cómo se ven tus entradas o páginas ahora mismo.

Después de configurar tu prueba, verás una instrucción para actualizar la página y cargar la instantánea inicial. Procede a actualizar.

Después de actualizar, verás un enlace a la instantánea de la página o publicación que agregaste para la prueba.

También verás que el ‘Estado de la prueba’ se establece automáticamente en ‘Programada’ para el día siguiente. Esto se debe a que la versión gratuita de VRTs ejecuta las pruebas en un horario de 24 horas.

Puedes hacer clic en el enlace ‘Ver instantánea’ para revisar la captura de pantalla inicial.

Se abrirá en una nueva pestaña así:

Si estás usando la versión gratuita, tu prueba ahora está programada para el día siguiente. Puedes continuar trabajando en tu sitio y volver en 24 horas para ver el informe de comparación.

Pero si tienes la versión Pro, puedes ejecutar una prueba inmediatamente para detectar problemas al instante.

Paso 4: Buscar diferencias visuales

Una vez que la prueba se complete y se detecten cambios visuales, verás una notificación en la pestaña VRTs » Ejecuciones.

En la pantalla de Ejecuciones, puedes pasar el cursor sobre la ejecución con cambios detectados.

Luego, haz clic en el enlace ‘Mostrar detalles’ cuando aparezca.

En la siguiente pantalla, verás una comparación lado a lado de tu página, mostrando las versiones antes y después.

El plugin resalta automáticamente las diferencias visuales, para que puedas detectar rápidamente problemas como:

• Desplazamientos de diseño y elementos desalineados: si su diseño cambia después de una actualización de plugin o un cambio de tema, como botones que se mueven de lugar o texto que salta, VRTs lo señalará.
• Elementos faltantes o rotos: ya sea una imagen faltante, un botón de CTA o un formulario incrustado, VRTs facilita la detección de cualquier cosa que desaparezca inesperadamente.
• Contenido dinámico (falsos positivos): A veces, la herramienta podría marcar un cambio que no es un error. Esto sucede a menudo con sliders de imágenes, anuncios o testimonios rotativos que cambian cada vez que la página se carga.
• Cambios inesperados de contenido: El plugin también te alertará sobre cambios en texto, enlaces o imágenes, para que puedas detectar ediciones no autorizadas o errores de publicación antes que los usuarios.

Puedes usar el control deslizante en el centro de la pantalla para moverte entre las versiones antigua y nueva y confirmar visualmente los cambios exactos.

Si el cambio fue intencional (como un rediseño planificado de la página de inicio), simplemente puedes aprobar la nueva instantánea para que el plugin sepa que la use como tu nueva línea de base en el futuro.

Paso 5: Revisar y tomar medidas

Después de ejecutar una prueba de regresión visual, toma medidas según los resultados.

Una cosa a tener en cuenta antes de empezar a revisar las alertas: no todas las diferencias marcadas son realmente un error. A veces, una página cambia legítimamente en cada visita, y la prueba también marcará esos cambios.

Estos se llaman falsos positivos, y son la razón más común por la que los nuevos usuarios se frustran con las pruebas de regresión visual. Debido a que la herramienta esencialmente verifica si la Diferencia de Píxeles > 0%, cualquier elemento dinámico que mueva los píxeles activará una alerta.

Aquí están los desencadenantes de falsos positivos más comunes en los sitios de WordPress:

• Diapositivas y animaciones(carruseles de imágenes, animaciones principales, efectos de desplazamiento)
• Datos en vivo(feeds de publicaciones más recientes, recuentos de comentarios, contadores de stock de WooCommerce)
• Colocaciones de anuncios y rastreadoresque cargan contenido diferente en cada visita
• Banners de consentimiento de cookies o GDPRque aparecen de forma impredecible
• Imágenes cargadas perezosamenteque pueden o no haberse cargado cuando se capturó la captura de pantalla
• Fuentesque se renderizan de manera ligeramente diferente antes de que terminen de cargarse

Cuando vea una de estas marcadas, abra la vista de comparación en VRT y use la opción "ocultar elementos" para excluir esa región de pruebas futuras. Después de eso, solo verá cambios de diseño reales que valgan la pena revisar, que es exactamente lo que desea.

Esto es lo que puede hacer a continuación:

• Edita la página manualmente: Si los cambios son pequeños, puedes solucionar los problemas directamente editando la página, como ajustar el diseño, mover elementos o volver a agregar funciones faltantes.
• Revertir a una copia de seguridad: Si los cambios en el diseño son menores, a menudo puede deshacerlos restaurando la página a una versión anterior. Si una actualización importante rompió todo su sitio, es posible que deba restaurar una copia de seguridad reciente del sitio web. Pero recuerde que hacerlo revertirá todos los datos de su sitio, lo que podría borrar ventas o comentarios recientes.

Dicho esto, tenga en cuenta que si soluciona un problema pero la prueba aún muestra el error, asegúrese de limpiar la caché de WordPress, así como cualquier caché de CDN o de alojamiento. De esta manera, la herramienta verá la última versión de su sitio.

Preguntas frecuentes: Cómo ejecutar pruebas de regresión visual en WordPress

Si recién estás comenzando con las pruebas de regresión visual, no estás solo. Aquí tienes algunas respuestas rápidas a preguntas comunes de usuarios y desarrolladores de WordPress.

¿Cuál es la diferencia entre las pruebas de instantáneas (snapshot testing) y las pruebas de regresión visual?

Las pruebas de instantáneas son un término de desarrollador que generalmente se refiere a la verificación del código oculto detrás de su sitio para ver si coincide con una versión anterior, en lugar de cómo se ve en la pantalla.

Las pruebas de regresión visual verifican cómo se ve realmente su sitio al ojo humano comparando capturas de pantalla para detectar cambios en el diseño o la apariencia.

¿Cuál es la mejor herramienta para pruebas de regresión visual en WordPress?

La opción más sencilla es el plugin VRTs – Visual Regression Tests. Es fácil de usar para principiantes, se ejecuta dentro de tu panel de control y no requiere ningún código. La versión gratuita funciona bien para la mayoría de los usuarios.

¿Cómo puedo hacer pruebas de regresión manualmente?

Las pruebas manuales significan hacer clic en tus páginas importantes después de una actualización para asegurarte de que todo siga viéndose bien. Querrás revisar páginas como tu página de inicio, página de contacto, publicaciones de blog y cualquier diseño personalizado o pasos de pago. Funciona, pero puede llevar mucho tiempo.

¿Cómo acelerar las pruebas de regresión?

Automatízalo. Un plugin como VRTs – Visual Regression Tests puede capturar capturas de pantalla de tus páginas clave y compararlas por ti, para que no tengas que revisar todo manualmente.
Usar un sitio de staging también te ayuda a detectar problemas antes de actualizar tu sitio en vivo.

¿Cuáles son las mejores maneras de probar el diseño de un sitio web de WordPress?

Una herramienta de regresión visual es una de las formas más fáciles de detectar cambios de diseño después de una actualización. También ayuda a previsualizar las actualizaciones en un sitio de staging antes de publicarlas.

Asegúrate de verificar cómo se ven tus páginas en escritorio, tableta y móvil. Las herramientas de desarrollo del navegador facilitan la prueba de diferentes tamaños de pantalla rápidamente. Y finalmente, obtener comentarios de usuarios o clientes reales puede ayudarte a detectar detalles que podrías pasar por alto.

¿Cuándo debo ejecutar pruebas de regresión visual en mi sitio de WordPress?

Los mejores momentos para ejecutar una prueba de regresión visual son justo antes y justo después de cualquier cambio que pueda afectar el diseño de su sitio. Esto incluye actualizaciones del núcleo de WordPress, actualizaciones de plugins y temas, ediciones de CSS personalizadas y la adición de nuevos bloques o elementos del constructor de páginas.

Si no realiza cambios frecuentes, las pruebas diarias programadas son suficientes para detectar problemas lentos, como la actualización de un plugin que rompió silenciosamente un diseño que no pensó en revisar.

¿Qué causa falsos positivos en las pruebas de regresión visual?

Los falsos positivos ocurren cuando la prueba marca una diferencia que en realidad no es un error. Las causas más comunes en los sitios de WordPress son sliders, animaciones, ubicaciones de anuncios, banners de cookies, imágenes cargadas perezosamente y datos en vivo como las últimas publicaciones o los contadores de stock de WooCommerce.

En VRT, puede ocultar estos elementos para que se excluyan de la comparación, lo que significa que las pruebas futuras solo marcarán cambios de diseño reales.

Próximos pasos: Mejora el diseño de tu sitio de WordPress

Espero que este artículo te haya ayudado a aprender cómo hacer pruebas de regresión visual en WordPress. Si quieres seguir mejorando tu sitio, también te podría interesar:

• Guía para principiantes sobre cómo rediseñar un sitio web de WordPress
• Elementos clave de diseño para un sitio web de WordPress efectivo
• Cómo obtener comentarios sobre el diseño de tu sitio web en WordPress
• Cómo mejorar la experiencia del usuario en WordPress
• Preguntas de retroalimentación sobre la experiencia del usuario para hacer a los visitantes del sitio web

Si te gustó este artículo, suscríbete a nuestro Canal de YouTube para ver tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.