Test de regresión visual: proceso automatizado de comparación de capturas de pantalla de una interfaz antes y después de una modificación, que permite detectar cualquier cambio visual no intencionado — según el glosario del ISTQB (International Software Testing Qualifications Board), se trata de una forma específica de test de regresión aplicada a la capa de presentación.
Un agente inmobiliario en Marsella publica un anuncio para un piso de tres habitaciones con vista al mar. Pega el título desde un documento Word. El título contiene 247 caracteres, dos saltos de línea ocultos y un carácter Unicode invisible. El template de la tarjeta de anuncio, diseñado para títulos de 80 caracteres como máximo, explota: el texto desborda sobre el precio, el precio empuja la imagen hacia abajo, el botón "Contactar" desaparece debajo del fold.
Este anuncio se ve 3.000 veces en 24 horas. 3.000 compradores potenciales que ven una página rota, que no encuentran el botón de contacto, que se van a la competencia. El agente no entiende por qué su anuncio no genera leads. La plataforma ni siquiera sabe que el problema existe — porque nadie verifica el renderizado de 300.000 anuncios activos.
Este es el día a día del sector inmobiliario online. Y es exactamente el problema que el test visual resuelve.
El sector inmobiliario online: un volumen de contenido que nadie controla
Las plataformas inmobiliarias francesas operan a una escala que pocos imaginan. SeLoger reivindica más de 2 millones de anuncios. Leboncoin Immobilier es el primer portal inmobiliario de Francia en audiencia. Logic-Immo, Bien'ici, PAP, MeilleursAgents — cada uno muestra cientos de miles de anuncios activos en un momento dado, según datos de Médiamétrie.
Este contenido no lo produce la plataforma. Lo producen decenas de miles de agentes inmobiliarios, particulares, promotores y mandatarios, cada uno con sus hábitos de entrada de datos, sus herramientas y su nivel de dominio digital. Es contenido generado por el usuario (UGC) en el sentido más estricto — y el UGC es el enemigo natural de los templates.
Un template es un contrato: "dame un título de X caracteres, una imagen de Y píxeles, un precio en formato Z, y te mostraré una tarjeta limpia". Pero el usuario no lee el contrato. Pega un título demasiado largo. Sube una foto de 400x300 en vez de 1200x800. Pone "Precio a consultar" en vez de un número. Añade 47 fotos en vez de 10. Y el template tiene que aguantar.
Por qué las plataformas inmobiliarias son particularmente vulnerables a los bugs visuales
La vulnerabilidad proviene de la combinación de tres factores que pocos sectores reúnen.
Un volumen masivo de contenidos heterogéneos
Cada anuncio es único. Las combinaciones posibles entre longitud del título, número de fotos, presencia o ausencia de determinados campos (certificado energético, precio, superficie, número de habitaciones, planta, gastos de comunidad), formatos de dirección y opciones de promoción son prácticamente infinitas. Testear manualmente una muestra representativa es un ejercicio estadísticamente inútil — nunca cubrirás suficientes combinaciones.
Actualizaciones frecuentes del template
Las plataformas inmobiliarias hacen evolucionar sus templates regularmente: nuevos formatos de tarjeta, nuevos badges (favorito, exclusivo, bajada de precio), integración de nuevos datos (certificado energético con nueva normativa, estimación de precio, tipo de interés indicativo). Cada modificación debe funcionar con todo el stock de anuncios existente, no solo con los anuncios de prueba del equipo de desarrollo.
Multiplicidad de páginas y contextos de visualización
Un mismo anuncio se muestra en al menos cinco contextos diferentes: la página de resultados de búsqueda (tarjeta compacta), la página de detalle (formato extenso), la página de alerta por email (formato digest), la versión móvil (tarjeta deslizable) y potencialmente los widgets de socios (integración en sitios de terceros). Un bug puede aparecer en un contexto y no en los demás.
El certificado energético: un ejemplo concreto de desafío visual
Desde el 1 de julio de 2021, la visualización del Diagnóstico de Rendimiento Energético (DPE) es obligatoria en los anuncios inmobiliarios en Francia, según el decreto n° 2020-1609. El nuevo formato DPE, con su doble etiqueta energía/clima, tiene un renderizado visual complejo: una escala de colores de la A a la G, valores numéricos y un indicador de posición.
Integrar este componente DPE en el template del anuncio es un campo de minas para las regresiones visuales. Los casos problemáticos se multiplican: un anuncio con DPE "G" (la banda más ancha) que empuja el bloque de precio fuera de su contenedor. Un anuncio antiguo sin DPE que deja un espacio vacío antiestético. Un DPE "en blanco" (inmueble en diagnóstico) que no se muestra como se esperaba. Un DPE en nuevo formato al lado de un DPE en formato antiguo en una página de comparación.
Testear manualmente cada combinación DPE × tipo de inmueble × formato de tarjeta × resolución de pantalla es imposible. El test visual automatiza esta verificación: defines una baseline para cada variante de tarjeta, y cualquier desviación se detecta automáticamente.
La tarjeta de anuncio: el componente más testeado y menos fiable
La tarjeta de anuncio — ese rectángulo que muestra la foto, el título, el precio, la superficie y algunas características clave — es paradójicamente el componente más importante y más frágil de una plataforma inmobiliaria.
Importante, porque es el componente que el usuario ve con más frecuencia. En una página de resultados de búsqueda, un comprador ve entre 20 y 50 tarjetas. Su decisión de hacer clic o no se toma en 1 a 2 segundos, basándose en lo que la tarjeta muestra. Una tarjeta rota — imagen distorsionada, precio ilegible, badge que tapa la dirección — es un clic perdido.
Frágil, porque la tarjeta debe absorber una diversidad de contenido considerable. Estas son las variaciones habituales que ponen a prueba el template:
Títulos de 20 a 250 caracteres. "3 hab. Marsella" frente a "Magnífico piso de 3 habitaciones pasante con vista panorámica al mar, terraza de 25m², parking subterráneo, trastero, portero, cerca de playa y comercios — OPORTUNIDAD".
Precios de 50.000 € a 15.000.000 €. El formateo, el espacio disponible y la alineación cambian considerablemente entre "89.000 €" y "12.500.000 €".
Fotos de calidad y ratio variables. Desde fotos de smartphone en baja resolución hasta sesiones profesionales en ultra HD. De vertical a horizontal. De 1:1 a 16:9.
Campos opcionales presentes o ausentes. Algunos anuncios tienen certificado energético, otros no. Algunos muestran los gastos, otros no. Algunos indican el precio por m², otros no. Cada combinación de campos crea un layout ligeramente diferente.
Badges y etiquetas acumulados. "Exclusivo" + "Bajada de precio" + "Favorito" + "Nuevo" — cuando cuatro badges se superponen, el diseño cede.
Búsqueda y filtros: una superficie de test subestimada
La página de resultados no es solo una lista de tarjetas. Es un sistema complejo de filtros, ordenaciones, paginación, mapa geográfico y formatos de visualización (lista, cuadrícula, mapa).
Cada combinación de filtros produce un resultado diferente. Una búsqueda de "casa 4 habitaciones, de 300.000 a 500.000 €, radio de 30 km alrededor de Lyon" no produce el mismo layout que una búsqueda de "estudio, París 11, amueblado". El número de resultados, la densidad de tarjetas, la presencia o ausencia de anuncios publicitarios intercalados — todo ello afecta al renderizado.
El mapa geográfico — componente ya estándar en los portales inmobiliarios — añade una capa de complejidad. Los marcadores de precio en el mapa deben seguir siendo legibles incluso cuando 50 anuncios están en el mismo barrio. El zoom debe re-renderizar los marcadores sin superposición. El panel lateral que muestra el detalle del anuncio seleccionado debe mostrarse correctamente independientemente del tamaño de pantalla.
Son decenas de combinaciones de componentes interactivos, cada una pudiendo revelar un bug visual específico. El test manual cubre una fracción ínfima de estas combinaciones.
Móvil: donde los bugs visuales cuestan más caro
Según los datos del mercado, el móvil representa entre el 60 y el 70% del tráfico de los portales inmobiliarios franceses. Un comprador que busca piso lo hace en el metro, en la pausa del almuerzo, por la noche en el sofá. La experiencia móvil no es secundaria — es la experiencia principal.
Y el móvil es implacable con los bugs visuales. El espacio es limitado. Un título demasiado largo que se muestra en 3 líneas en vez de 2 empuja el precio debajo del fold. Una imagen que no se redimensiona correctamente crea un scroll horizontal no deseado. Un botón "Llamar" demasiado pequeño para pulsarlo con el pulgar hace el anuncio inútil.
Las plataformas inmobiliarias suelen ofrecer funcionalidades específicas para móvil: el swipe entre fotos del anuncio, el tap-to-call, la geolocalización para "anuncios cerca de mí". Cada una de estas interacciones tiene un componente visual que puede regresar.
El embudo de contacto: la conversión en juego
El objetivo de una plataforma inmobiliaria es poner en contacto a compradores y vendedores (o inquilinos y propietarios). El embudo de contacto — el formulario que permite solicitar una visita, llamar al agente, enviar un mensaje — es el punto de conversión crítico.
Un bug visual en el embudo de contacto tiene un impacto financiero directo y medible. Un botón "Enviar" ocultado por otro elemento. Un formulario con campos superpuestos en una pantalla estrecha. Un mensaje de confirmación que no se muestra. Un botón "Llamar" que muestra el número en un texto demasiado pequeño para leer.
Son bugs que no rompen la funcionalidad en sentido estricto — el formulario técnicamente puede enviarse — pero impiden que el usuario lo haga porque la interfaz ya no lo guía correctamente. El test funcional pasa. El test visual falla. La conversión también.
Cómo el test visual protege una plataforma inmobiliaria
El test visual aporta tres garantías esenciales a las plataformas inmobiliarias.
La primera: la verificación de templates frente a la diversidad del contenido. Creas una baseline con un conjunto representativo de anuncios — título corto, título largo, muchas fotos, sin fotos, DPE A, DPE G, sin DPE, precio bajo, precio alto. Cada modificación del template se testea contra este conjunto. Si una variante se rompe, lo sabes antes de la puesta en producción.
La segunda: la detección de regresiones tras las actualizaciones. Nuevo badge, nuevo campo, nueva normativa que integrar. Cada adición se compara visualmente con el estado anterior. La herramienta identifica con precisión los cambios: "el margin-bottom del bloque DPE pasó de 16px a 0px, lo que pega el DPE al bloque de precio". No un diff de código — un diff visual, comprensible por un product manager.
La tercera: la cobertura cross-device sistemática. Desktop, tablet, móvil. Chrome, Safari, Firefox. iPhone, Samsung, Xiaomi. La matriz de combinaciones se cubre de forma exhaustiva, algo que el test manual no puede garantizar.
Delta-QA y las plataformas inmobiliarias
Delta-QA es particularmente adecuado para el contexto inmobiliario por varias razones.
El enfoque no-code permite a los equipos de producto — no solo a los desarrolladores — verificar el renderizado de los templates. Un product manager que quiere asegurarse de que el nuevo badge "Bajada de precio" no rompe la tarjeta en móvil puede hacerlo él mismo, sin esperar disponibilidad del equipo técnico.
El algoritmo estructural de 5 pasadas analiza el CSS real, no solo los píxeles. Distingue un cambio de contenido (el título del anuncio cambió, es normal) de un cambio estructural (el contenedor del título cambió de tamaño, es potencialmente una regresión). Esta distinción es crucial en una plataforma donde el contenido cambia constantemente pero la estructura debe permanecer estable.
El funcionamiento local garantiza que los datos de los anuncios — direcciones, precios, fotos — nunca salen de tu máquina. Para una plataforma que gestiona datos personales (números de teléfono de agentes, direcciones de inmuebles), esta garantía simplifica el cumplimiento del RGPD.
Y la versión Desktop es gratuita, sin límites. Para una startup proptech que lanza su plataforma o un gran portal establecido, la barrera de entrada es inexistente.
Trampas específicas del test visual inmobiliario
No testees con datos perfectos. La tentación es crear anuncios de prueba con un título de 60 caracteres, 5 fotos en 16:9 y un precio redondo. Pero son los datos imperfectos los que rompen el layout. Testea con los peores casos: el título de 250 caracteres, la foto en 1:1, el precio de 8 dígitos, el anuncio sin foto.
Testea los estados vacíos y de error. "No hay resultados para tu búsqueda." "Este anuncio ya no está disponible." "Cargando." Estos estados a menudo se descuidan en el diseño y en los tests, pero los ven miles de usuarios cada día.
No olvides los emails transaccionales. El email de alerta "Nuevos anuncios que coinciden con tus criterios" contiene tarjetas de anuncios con su propio renderizado. Un bug visual en este email — que a menudo es el primer punto de recontacto con el usuario — puede costarte una visita al sitio.
FAQ
¿Puede el test visual detectar un problema de visualización causado por un título de anuncio demasiado largo?
Sí. El test visual compara el renderizado real de la página, incluyendo los desbordamientos de texto, las superposiciones y los desplazamientos causados por un contenido que excede los límites previstos por el template. Es uno de los casos de uso más frecuentes en las plataformas inmobiliarias.
¿Cómo testear 300.000 anuncios activos? Es irreal, ¿no?
No se testea cada anuncio individualmente. Se testea el template con una muestra representativa de casos extremos: título más largo, título más corto, máximo de fotos, sin fotos, todos los badges activados, ningún badge. Si el template resiste los casos extremos, resistirá los casos normales.
¿Funciona el test visual con mapas geográficos interactivos?
El test visual captura el estado estático de la página, incluyendo el mapa a un nivel de zoom determinado. Detecta los cambios de posición, tamaño o estilo de los marcadores y del panel lateral. Para las interacciones dinámicas (zoom, clic en marcador), se testean los estados resultantes en lugar de la interacción en sí.
¿Cómo distinguir un cambio de contenido normal de un bug visual en una plataforma donde el contenido cambia constantemente?
Es precisamente la ventaja del enfoque estructural de Delta-QA. El algoritmo analiza las propiedades CSS, no el contenido textual. Si el texto de un título cambia pero su tamaño, fuente y espaciado permanecen idénticos, no se dispara ninguna alerta. Si por el contrario el contenedor del título cambia de altura o de margin, se levanta la alerta.
¿El test visual sustituye a los tests funcionales en el embudo de contacto?
No. El test visual y el test funcional son complementarios. El test funcional verifica que el formulario envía correctamente los datos. El test visual verifica que el formulario es visible, legible y utilizable. Un formulario puede ser funcionalmente correcto pero visualmente inutilizable — eso es exactamente lo que el test visual detecta.
¿Cómo integrar el test visual en el workflow de un equipo de producto inmobiliario?
El test visual se integra naturalmente en los ciclos de sprint. Antes de cada puesta en producción, el equipo compara el renderizado de las páginas clave (página de resultados, página de detalle, embudo de contacto) con la baseline validada. Al ser Delta-QA no-code, un product manager o un QA puede realizar esta verificación sin depender de un desarrollador.
Conclusión
Las plataformas inmobiliarias son máquinas de mostrar contenido heterogéneo en templates estandarizados. Es una proeza técnica diaria — y una fuente permanente de regresiones visuales que nadie tiene tiempo de verificar manualmente.
El test visual es el único enfoque que escala. Verifica que tus templates resisten la diversidad del contenido de usuario, que cada modificación de diseño funciona con todo el stock de anuncios, y que la experiencia móvil — donde se encuentra la mayoría de tus usuarios — es impecable.
Delta-QA hace esta verificación accesible a todo el equipo, no solo a los desarrolladores. No-code, local, determinista. Tus anuncios, tus capturas, tus resultados — todo se queda en tu máquina.