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

La semana pasada, un amigo que gestiona varios sitios de WordPress me llamó asustado. Una actualización rutinaria de un plugin había roto el menú de navegación de su cliente, pero no se dio cuenta hasta que los clientes empezaron a quejarse.

Este es un problema común que he visto innumerables veces, y es exactamente por qué las pruebas de regresión visual son tan importantes para los propietarios de sitios web WordPress.

Las pruebas visuales de regresión pueden parecer complicadas. Sin embargo, en realidad es una solución sencilla que puede ahorrarle horas de comprobación manual y evitar problemas / disposición / diseño / plantilla embarazosos.

Normalmente, funciona comparando automáticamente las capturas de pantalla del antes y el después de sus páginas. Esto ayuda a detectar incluso los cambios visuales más pequeños que podrían romper la apariencia de su sitio. 🔍

En esta guía, te mostraré cómo hacer pruebas de regresión visual en tu sitio WordPress. Después de probar numerosas herramientas y métodos, he encontrado la solución más fiable que no requiere ningún conocimiento de código o experiencia técnica.

Qué es la prueba de regresión visual y por qué es importante? 🤔

Cada vez que actualiza su sitio -ya sea una actualización del núcleo de WordPress, un nuevo plugin, un cambio de tema o simplemente un retoque menor del código- existe la posibilidad de que algo en el front-end se desplace de su sitio.

Por ejemplo, un botón podría desaparecer, su disposición podría romperse o la imagen de un producto podría dejar de cargarse correctamente.

¿Cuál es el problema? Estos fallos visuales suelen pasar desapercibidos hasta que un visitante los señala a través de un formulario de contacto o una encuesta de respuesta / comentario / opinión sobre el diseño.

Para entonces, el daño a la experiencia de usuario de su sitio podría estar ya hecho.

Ahí es donde entran en juego las pruebas de regresión visual.

El proceso es sencillo: tome instantáneas de sus páginas antes y después de una actualización y compárelas para detectar cualquier cambio.

Además, si realiza las pruebas en un sitio de pruebas (lo que recomendamos), podrá realizar actualizaciones y comparaciones de forma segura para detectar problemas visuales antes de que nada salga a la luz.

¿La buena noticia? No tienes que hacerlo manualmente.

Con herramientas de pruebas de regresión visual como VRTs, Percy o BackstopJS, puede automatizar las comparaciones de capturas de pantalla y comprobar el aspecto de su sitio en distintos tamaños de pantalla, lo que le ayudará a detectar problemas de estructura / disposición / diseño / plantilla en ordenadores de sobremesa, tabletas y dispositivos móviles.

¿Por qué es importante para los usuarios de WordPress?

Si gestionas un sitio web en WordPress, las pruebas de regresión visuales son una red de seguridad que te ahorrarán tiempo. En lugar de hacer clic en todas las páginas después de una actualización, esta herramienta le ofrece un informe visual de lo que ha cambiado y de si es algo que debe corregir.

Es especialmente útil en muchos escenarios, como agencias que realizan actualizaciones en varios sitios WordPress, autónomos que gestionan sitios web de clientes o propietarios de tiendas online que quieren asegurarse de que las páginas de productos y finalizar compra / pago permanecen intactas.

En resumen, las pruebas de regresión visual le ayudan a evitar sorpresas frustrantes, ahorrar tiempo y mantener su sitio de WordPress funcionando sin problemas.

Dicho esto, voy a compartir cómo hacer fácilmente pruebas de regresión visual en WordPress. Aquí está una visión general de todos los pasos que voy a cubrir en esta guía:

Paso 1: Instale y active el plugin de pruebas de regresión visual

En este tutorial, usaré el plugin VRTs porque es amigable para principiantes y súper fácil de usar para pruebas de regresión visual. Ya se trate de una disposición desplazada, un botón que falta, o un elemento roto después de una actualización, VRTs le ayuda a detectar a tiempo.

He aquí cómo funciona: El plugin realiza capturas de pantalla de las páginas seleccionadas. A continuación, puede activar las comparaciones manualmente o programarlas para que se ejecuten automáticamente después de realizar cambios en su sitio, como actualizar un plugin o retocar su tema.

A continuación, el plugin compara las capturas de pantalla de “antes” y “después” y resalta las diferencias visuales.

Así, en lugar de comprobar manualmente cada página, obtendrá un rápido informe visual que le mostrará qué ha cambiado y si hay algo que no le parece correcto.

Para instalar el plugin, primero tienes que visitar el sitio web de VRT y suscribirte a un plan haciendo clic en el botón “Empezar gratis”.

A continuación, puede elegir uno de los planes. El plan gratuito le permitirá probar hasta 3 páginas al día en un dominio y programar pruebas diarias.

Por otro lado, los planes de pago le permitirán probar un mayor número de páginas, ejecutar pruebas manuales y ejecutar automáticamente pruebas de regresión visual tras las actualizaciones del núcleo, los plugins y los temas de WordPress.

Sólo tiene que hacer clic en “Comprar ahora” o “Instalar ahora” debajo del plan que desee utilizar.

A continuación, siga las instrucciones para acceder a una cuenta en el sitio web de VRT y añadir sus datos de pago.

Una vez que haya completado el pago, usted aterrizará en su VRTs Escritorio, donde se puede descargar el plugin como un archivo .zip.

Entonces, simplemente dirígete a 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 instalado. Para más detalles, puedes consultar nuestra guía sobre cómo instalar un plugin de WordPress.

Paso 2: Configurar los ajustes de los plugins de VRTs

Una vez activado el plugin, es hora de establecer cuándo deben ejecutarse las pruebas de regresión visual.

Dirígete a VRTs ” Ajustes en tu menú de administrador / administración de WordPress.

Una vez dentro, puedes desplazarte hasta la sección “Triggers” (activadores), donde le indicas al plugin cuándo debe tomar y comparar instantáneas automáticamente.

Estas son las opciones disponibles:

• Ejecutar Pruebas cada 24 horas (Gratis) – Este es el ajuste por defecto. VRTs marcará / comprobará automáticamente las entradas o páginas seleccionadas una vez al día en busca de cambios visuales.
• Run Tests after WordPress and plugin updates (Pro) – Ideal para detectar problemas de estructura / disposición / diseño / plantilla causados por actualizaciones, justo cuando ocurren.
• Ejecuta pruebas con tus aplicaciones favoritas (Pro) – Conecta VRTs con herramientas externas o flujos de trabajo utilizando webhooks.
• Ejecutar pruebas a petición (Pro) – Active pruebas manualmente siempre que lo necesite, directamente desde su escritorio de WordPress.

Una vez que haya seleccionado el activador que se adapte a su flujo de trabajo (o a su licencia), sólo tiene que hacer clic en el botón “Guardar cambios” situado en la parte inferior de la página.

Paso 3: Añadir nuevas páginas o entradas a la prueba

Una vez que haya establecido los ajustes del plugin, es el momento de elegir qué páginas o entradas desea incluir en sus pruebas de regresión visual.

Pasemos ahora a la pestaña “Pruebas”, que es donde gestionarás y ejecutarás tus pruebas visuales.

Desde aquí, puedes hacer clic en el botón “Añadir nuevo”. Esto le permitirá elegir entradas o páginas para probar.

En la ventana emergente que aparece, debe elegir las páginas o entradas en las que desea realizar la prueba de regresión visual.

A continuación, haga clic en “Añadir nueva prueba” para confirmar sus selecciones.

El plugin VRTs tomará una instantánea inicial de cada página seleccionada. Esto actúa como su línea de base – básicamente una versión “antes” de cómo sus entradas o páginas se ven ahora.

Después de establecer tu prueba, verás una instrucción para actualizar la página para cargar la instantánea inicial. Adelante, hazlo.

Una vez hecho esto, encontrarás un enlace a la instantánea de la página o entrada que has añadido para la prueba.

También verá que el ‘Estado de la prueba’ se establece automáticamente en ‘Programado’ 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.

Puede enlazar el enlace “Ver instantánea” para comprobar la captura de pantalla inicial.

Se abrirá en una nueva pestaña como ésta:

Ahora, puede hacer los cambios que necesite en su sitio. Vuelva mañana para valorar la comparación y detectar cualquier problema / conflicto / incidencia visual inesperada.

Paso 4: Marcar / comprobar las diferencias visuales

Una vez finalizada la prueba y detectados los fallos visuales, deberías ver un aviso de alerta en la pestaña ” Runs ” de VRTs.

Una vez dentro, puedes pasar el cursor por encima de la carrera con los cambios detectados.

A continuación, enlaza el enlace “Mostrar detalles” cuando aparezca.

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

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

• Cambios de estructura / disposición / diseño / plantilla: Si tu diseño cambia tras la actualización de un plugin o un cambio de tema, como botones que se desplazan de su sitio o texto que salta de un lado a otro, las VRT lo marcarán.
• Elementos que faltan o están rotos: Ya sea una imagen que falta, un botón CTA o un formulario incrustado, las VRT facilitan la detección de cualquier cosa que desaparezca inesperadamente, lo que resulta especialmente útil para el comercio electrónico o las páginas de destino.
• Cambios inesperados en el contenido: El plugin también le avisará de cambios en texto, enlaces o imágenes, para que pueda detectar ediciones no autorizadas o errores de publicación antes de que lo hagan los usuarios.

Puede utilizar el asa de arrastre situada en el centro de la pantalla para deslizarse entre la versión antigua y la nueva y confirmar visualmente los cambios exactos.

Paso 5: Valoración y actuación

Después de ejecutar una prueba de regresión visual, puede tomar medidas en función de los resultados. Esto es lo siguiente que puede hacer:

• Edita manualmente la página: Si los cambios son pequeños, puede corregir las incidencias directamente editando la página, como ajustar la estructura / disposición / mover elementos o volver a añadir características que faltan.
• Volver a una copia de seguridad: Si los cambios son mayores o más difíciles de corregir, puedes restaurar la página a una versión anterior utilizando la copia de seguridad de tu sitio web o el historial de versiones. Esto ayuda a evitar dejar problemas en tu sitio.

FAQ para ejecutar pruebas de regresión visual en WordPress

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

¿Qué diferencia hay entre las pruebas instantáneas y las pruebas de regresión visual?

Las pruebas instantáneas comprueban si el código o el contenido de su sitio web siguen siendo los mismos, algo así como guardar una copia de seguridad de cómo deberían ser las cosas.

En cambio, las pruebas de regresión visual se centran en el aspecto del sitio. Compara capturas de pantalla antes y después de las actualizaciones para detectar cambios en la estructura / disposición / diseño / plantilla, elementos que faltan o fallos visuales de los que no se haya dado cuenta inmediatamente.

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

La opción más sencilla es el plugin VRTs – Visual Regression Tests. Es fácil de usar para principiantes, no requiere ningún código, y se ejecuta directamente desde su panel de control. Además, tiene una versión gratuita que es muy fácil de usar.

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

Las pruebas de regresión manuales consisten en recorrer el sitio y comprobar las páginas clave después de realizar cambios, como la instalación de un nuevo plugin o la actualización del tema.

Usted querrá visitar su página de inicio, página de contacto, proceso de finalizar compra / pago (si tiene uno), y cualquier disposición personalizada para asegurarse de que todo todavía se ve y funciona como debería. Funciona, pero puede llevarte mucho tiempo si gestionas un sitio grande o con mucho tráfico.

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

La mejor manera de ahorrar tiempo es automatizarlo. El uso de un plugin como VRTs – Visual Regression Tests le permite crear instantáneas de sus páginas importantes y compararlas rápidamente después de una actualización.

No es necesario marcar / comprobar manualmente todas las páginas: el plugin lo hace por usted.

También puede probar primero las actualizaciones en un sitio de prueba, para no tener que corregir problemas en un sitio activo.

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

He aquí algunos consejos para poner a prueba el diseño de su WordPress:

• Utilice una herramienta de regresión visual, como las pruebas de regresión visual (VRT), para detectar cambios en el diseño.
• Vista previa de las actualizaciones de temas y plugins en un sitio de prueba.
• Pruebas en varios tamaños de pantalla (ordenador, tableta y móvil).
• Utilice las herramientas de desarrollo del navegador para comprobar el aspecto de su sitio en distintas áreas visibles.
• Solicite la respuesta /comentario / opinión de usuarios o clientes: a menudo se dan cuenta de cosas que a usted se le pasan por alto.

Espero que este artículo te haya ayudado a aprender cómo hacer pruebas de regresión visual en WordPress. A continuación, puede que desee marcar / comprobar nuestro artículo sobre la creación de salas de chat en WordPress para sus usuarios y las mejores preguntas de respuesta / comentario / opinión a los visitantes del sitio.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.