# ¿Qué son las pruebas de regresión visual?

URL: https://agentvera.dev/es/glossary/visual-regression-testing/

Las pruebas de regresión visual comparan capturas de pantalla de una interfaz con imágenes de referencia aprobadas previamente para detectar cambios visuales no deseados. Encuentran errores que las pruebas de código pasan por alto, como un botón desplazado, un texto desbordado o un diseño móvil roto.

**Cómo funciona.** El método tiene cuatro pasos, que se repiten con cada cambio.

- Referencia (baseline): haz capturas de las páginas en su estado aprobado.
- Comparar: tras un cambio, captura las mismas páginas con los mismos tamaños y compáralas píxel a píxel.
- Umbral: fija un límite para la proporción de píxeles cambiados para que las diferencias mínimas no cuenten como fallos.
- Aprobar: si el cambio es intencionado, la nueva imagen pasa a ser la referencia; si no, corrige el error.

**Por qué las necesitas.** Las pruebas unitarias te dicen que una función devuelve el valor correcto, no que la página se ve bien. Un cambio de CSS puede romper el diseño de una página que nadie tocó. Estos efectos secundarios son más frecuentes cuando los agentes de código cambian la interfaz, porque el agente suele trabajar sin ver la pantalla.

**Reducir los falsos positivos.** Una prueba ruidosa acaba ignorándose, así que importa tener una configuración estable.

- Desactiva las animaciones y las transiciones.
- Congela los datos cambiantes, como fechas, horas y contenido aleatorio.
- Espera a que carguen las fuentes y captura siempre en el mismo navegador y sistema operativo.
- Prueba en varios tamaños, como móvil, tableta y escritorio.

**Herramientas.** Entre las opciones habituales están la aserción toHaveScreenshot de Playwright, herramientas de código abierto como BackstopJS y servicios alojados como Percy o Chromatic. Todas se basan en la misma idea: una imagen de referencia, una imagen nueva y una imagen de diferencias que resalta lo que cambió.

**Comparación visual en AgentVera.** La pestaña “Preview” de AgentVera ejecuta comparaciones visuales contra el servidor de desarrollo del proyecto y de cada worktree.

- **¿Las pruebas de regresión visual son lo mismo que las pruebas de snapshot?** Idea parecida, objetivo distinto. Las pruebas de snapshot suelen comparar el HTML o el texto de salida de un componente; las de regresión visual comparan capturas de pantalla reales.
- **¿Por qué las comparaciones de píxeles dan falsos fallos?** El renderizado de fuentes, el antialiasing, las animaciones y el contenido cambiante pueden desplazar unos pocos píxeles. Un umbral y un entorno estable reducen ese ruido.
- **¿Qué páginas debo probar?** Empieza por las más usadas y más frágiles: la página de inicio, el inicio de sesión, el pago o los formularios. Captura cada una en varios tamaños de pantalla.

---

**Sobre AgentVera.** AgentVera es una app de escritorio para macOS, Windows y Linux, desarrollada por Solviera Teknoloji. Ejecuta 18 agentes de programación con IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) en paralelo, por proyecto, en terminales reales con las instalaciones y sesiones de CLI del propio usuario. El plan gratuito tiene agentes ilimitados. Descargar: https://agentvera.dev/es/download/ · Precios: https://agentvera.dev/es/pricing/