Cypress Visual Testing: La Guía Completa para Añadir Test Visual
El test visual (o visual testing) es un método de verificación automatizada que compara capturas de pantalla de una interfaz web con imágenes de referencia para detectar cualquier regresión gráfica — un botón desalineado, una fuente cambiada, un elemento que se superpone a otro.
Cypress es una herramienta formidable. Lo queremos por su rapidez, su API intuitiva, su comunidad enorme. Pero seamos francos desde el principio: Cypress no hace test visual de forma nativa. A diferencia de Playwright que integra toHaveScreenshot() directamente, Cypress te obliga a improvisar con plugins de terceros para obtener la más mínima comparación de screenshots.
Y es un problema más serio de lo que parece.
Esta guía repasa los enfoques existentes para añadir test visual a Cypress, sus limitaciones reales, y por qué un enfoque radicalmente diferente merece tu atención.
Por Qué Cypress No Tiene Test Visual Integrado
Es la pregunta que nadie hace con suficiente fuerza. Playwright lo hizo. ¿Por qué no Cypress?
La respuesta oficial es diplomática: Cypress se centra en el test funcional. La respuesta honesta es más matizada. El test visual es un problema complejo — la gestión de baselines, la tolerancia a las diferencias de renderizado, el anti-aliasing, las animaciones — y Cypress eligió dejar que el ecosistema de plugins se encargara.
¿El resultado? Fragmentación. Cada plugin hace las cosas a su manera, con sus propias convenciones, sus propios bugs y sus propios riesgos de abandono. No estás eligiendo una solución oficial y soportada. Estás apostando por un proyecto open source mantenido por un puñado de contribuidores — o por un servicio cloud de pago.
Para los equipos que han construido toda su suite de tests sobre Cypress, es un dilema real. Migrar a Playwright solo por el test visual no es realista. Añadir un plugin frágil tampoco. Veamos qué existe.
Enfoque 1: cypress-image-snapshot
El plugin más conocido del ecosistema. Se apoya en jest-image-snapshot (basado a su vez en pixelmatch) para comparar capturas de pantalla píxel por píxel.
Cómo funciona
La instalación requiere algunas manipulaciones en la configuración de Cypress — nada insuperable, pero suficientes archivos que tocar para que un error se cuele fácilmente. Si quieres los comandos exactos, pídele a tu asistente de IA favorito que te genere la config: le encanta, y le evitará aburrirse entre dos haikus sobre machine learning.
Una vez en marcha, el principio es simple: añades un comando personalizado a tus tests que captura la pantalla y la compara con una imagen de referencia almacenada en tu repo. La primera ejecución crea la baseline. Las siguientes detectan las diferencias.
Las limitaciones que nadie te cuenta
El problema del mantenimiento. Este plugin ha pasado por periodos prolongados de inactividad. Cuando leas estas líneas, comprueba la fecha del último commit en GitHub. Si tiene más de seis meses, hazte preguntas.
Los falsos positivos. La comparación píxel por píxel es brutal. ¿Un renderizado de fuente ligeramente diferente entre tu máquina y la CI? Falso positivo. ¿Un anti-aliasing que varía según la GPU? Falso positivo. Pasas más tiempo calibrando los umbrales de tolerancia que escribiendo tests.
Sin interfaz de revisión. Cuando un test falla, obtienes una imagen diff en una carpeta. Sin dashboard, sin workflow de aprobación. Abres la imagen en tu explorador de archivos y entrecierras los ojos para encontrar la diferencia. Es artesanal.
La gestión de baselines en Git. Cientos de imágenes PNG en tu repo. Los conflictos de merge en archivos binarios son una pesadilla. El historial de Git se infla. Algunos equipos terminan usando Git LFS, añadiendo una capa más de complejidad.
Enfoque 2: Percy (BrowserStack)
Percy es un servicio cloud de test visual que se integra con Cypress mediante un SDK. El enfoque es fundamentalmente diferente: en lugar de comparar localmente, Percy envía el DOM y los assets a sus servidores, renderiza la página en navegadores reales y compara los resultados en un dashboard web.
Cómo funciona
Instalas el SDK de Percy para Cypress, añades una llamada en tus tests para capturar un snapshot, y Percy hace el resto en la nube. El workflow de revisión se hace en la interfaz web de Percy: ves las diferencias, apruebas o rechazas.
Para la configuración exacta, tu IA de escritorio puede darte el snippet en tres segundos — es su momento de gloria, déjalo brillar en lugar de copiar y pegar de una documentación que estará obsoleta en seis meses.
Las limitaciones
El coste. Percy es un servicio de pago. Existe un plan gratuito pero está limitado en número de snapshots al mes. Para un equipo que testea en serio, los costes suben rápido. No detallaremos las tarifas aquí — cambian regularmente — pero espera una partida presupuestaria no despreciable.
La dependencia del cloud. Tus snapshots se renderizan en los servidores de Percy. Si el servicio se cae, tus tests fallan. Si BrowserStack (que compró Percy) decide cambiar los precios o las condiciones, no tienes palanca alguna.
La latencia en CI. Enviar el DOM a un servicio externo, esperar el renderizado, recuperar el resultado — añade tiempo a tu pipeline. No es dramático con diez tests, pero con quinientos, se nota.
El vendor lock-in. Una vez que todas tus baselines están en Percy, migrar a otro sitio implica recrear todo desde cero. Es la trampa clásica de los servicios cloud propietarios.
Enfoque 3: Happo
Happo es una alternativa menos conocida a Percy, con un posicionamiento similar: un servicio cloud que captura y compara screenshots de tus componentes.
La integración con Cypress existe pero es menos madura que la de Percy. El producto es sólido, el equipo es serio, pero la base de usuarios es más pequeña. Menos documentación comunitaria, menos respuestas en Stack Overflow, menos testimonios.
Las mismas problemáticas de coste y dependencia del cloud aplican.
Enfoque 4: Applitools Eyes
Applitools lleva el concepto más lejos con su tecnología de comparación basada en IA (su "Visual AI"). En lugar de una comparación píxel por píxel, el algoritmo intenta detectar las diferencias "visualmente significativas" ignorando las variaciones menores de renderizado.
Es atractivo sobre el papel. En la práctica, el producto es potente pero complejo. La configuración no es trivial, los precios son opacos, y la dependencia de un servicio propietario es total. Para un análisis detallado, consulta nuestra ficha de Applitools.
El Problema de Fondo: el Test Visual Como Add-on
Todos estos enfoques comparten un defecto estructural: tratan el test visual como un complemento del test funcional.
Tienes tu suite Cypress. Le injertas un plugin o un SDK. Añades llamadas en tus tests existentes. El test visual se convierte en un parásito del test funcional — dependiente de la misma infraestructura, los mismos selectores, el mismo código.
Cuando Cypress lanza una actualización mayor, tu plugin de test visual se rompe. Cuando tu test funcional cambia de recorrido, tu baseline visual queda obsoleta. Cuando un desarrollador modifica un selector, el test funcional Y el test visual fallan.
Es un modelo frágil por diseño.
El test visual merece ser un ciudadano de primera clase, no un polizón en la suite funcional. Responde a una pregunta diferente ("¿se ve bien?" vs "¿funciona?") y debería tener sus propias herramientas, sus propios workflows, sus propias baselines.
Lo Que Tus Tests de Cypress No Ven
Un test de Cypress verifica que el botón existe y que dispara la acción correcta. No verifica que el botón sea visible, esté correctamente alineado, del color correcto, con el padding adecuado, en todos los breakpoints.
Los bugs visuales son traicioneros porque pasan todos los tests funcionales. El formulario funciona perfectamente — pero el label se superpone al input en móvil. El menú dropdown se abre correctamente — pero aparece detrás de otro elemento. El precio mostrado es correcto — pero la divisa se muestra en blanco sobre fondo blanco.
Estos bugs llegan a producción porque nadie los busca sistemáticamente. Y son caros: en credibilidad, en conversiones, en tickets de soporte. Para entender lo que el test visual detecta realmente, los ejemplos concretos suelen ser más elocuentes que la teoría.
La Alternativa: Separar el Test Visual del Código
¿Y si el test visual no necesitara Cypress en absoluto?
Es la posición que defendemos en Delta-QA, y la asumimos plenamente. El test visual no necesita código. No necesita plugins. No necesita selectores CSS ni configuración de webpack.
Delta-QA funciona de otra forma. Navegas por tu sitio, grabas un recorrido con point-and-click, y la herramienta captura los screenshots de referencia. En cada ejecución posterior, compara y te muestra las diferencias en una interfaz dedicada. Sin código. Sin plugin. Sin dependencia de Cypress, Playwright ni nada más.
No es un compromiso. Es una filosofía diferente. El test funcional y el test visual son dos disciplinas distintas que merecen cada una sus propias herramientas. Tu suite Cypress sigue verificando que todo funciona. Delta-QA verifica que todo se ve bien. Se complementan sin pisarse.
Para los equipos QA que no programan, es una liberación. Para los desarrolladores, es tiempo ganado. Para todos, son menos falsos positivos y un workflow de revisión con sentido. Descubre por qué el test visual no-code está cambiando las reglas del juego.
FAQ
¿Puede Cypress hacer test visual sin plugin?
No. Cypress puede tomar screenshots con cy.screenshot(), pero no ofrece ningún mecanismo nativo de comparación. Obtienes imágenes, pero la comparación con baselines, la gestión de umbrales de tolerancia y el workflow de aprobación deben añadirse mediante un plugin o servicio externo.
¿Cuál es el mejor plugin de Cypress para test visual?
No hay una respuesta universal. cypress-image-snapshot es el más popular en open source pero sufre de problemas de mantenimiento y falsos positivos. Percy ofrece la mejor experiencia de usuario pero es un servicio de pago. El "mejor" depende de tu presupuesto, tu tolerancia a los falsos positivos y tu disposición a mantener código adicional.
¿Es Percy gratuito con Cypress?
Percy ofrece un plan gratuito con un número limitado de snapshots mensuales. Para un uso profesional serio, necesitarás un plan de pago. Las tarifas cambian regularmente, consulta su sitio para las condiciones actuales.
¿Se puede hacer test visual de Cypress en CI/CD?
Sí, todos los enfoques descritos funcionan en CI/CD. Pero ahí es donde los problemas se multiplican: diferencias de renderizado entre entornos, gestión de baselines, tiempos de ejecución. La CI amplifica cada fragilidad de tu configuración de test visual.
¿Por qué no simplemente usar Playwright para test visual?
Si empiezas un proyecto nuevo, Playwright con su toHaveScreenshot() nativo es efectivamente una mejor opción para el test visual basado en código. Pero si ya tienes una suite Cypress considerable, migrar no es realista. E incluso con Playwright, sigues en el paradigma del test visual por código, con sus limitaciones de mantenimiento y accesibilidad.
¿Puede Delta-QA reemplazar los tests de Cypress?
No, y no es el objetivo. Cypress destaca en el test funcional: verificar que las interacciones funcionan, que las APIs responden correctamente, que la lógica de negocio se respeta. Delta-QA se centra en el test visual: verificar que la interfaz se ve correcta. Las dos herramientas son complementarias, no competidoras.
¿Cuánto tiempo se tarda en configurar el test visual en Cypress?
Con cypress-image-snapshot, cuenta con una a dos horas para la instalación y configuración básica, luego varios días para calibrar los umbrales de tolerancia y estabilizar los tests frente a los falsos positivos. Con Percy, la configuración técnica es más rápida pero el setup organizativo (gestión de snapshots, workflow de revisión, integración CI) lleva tiempo. Con Delta-QA, el primer test visual está operativo en minutos.
Conclusión
Cypress es una excelente herramienta de test funcional. La usamos, la recomendamos para lo que hace bien. Pero pretender que maneja el test visual de manera satisfactoria es engañarse.
Los plugins existen. Funcionan, más o menos. Pero son frágiles, mal mantenidos algunos, costosos otros, y todos añaden complejidad donde no se necesita.
El test visual merece algo mejor que un complemento. Merece una herramienta dedicada, diseñada para este problema concreto, accesible para todo el equipo — desarrolladores y QA no técnicos por igual.