Herramientas de pruebas de regresión visual: Percy, Applitools, BackstopJS y Diffy comparadas

Herramientas de pruebas de regresión visual: la respuesta corta

Las cuatro hacen básicamente lo mismo: capturan una página, la comparan con una referencia que alguien aprobó y muestran qué cambió. Se diferencian en dónde se hace la captura, qué dispara una comparación y a quién está pensada cada una.

Percy y Applitools están pensados para equipos de desarrollo. Una línea en tus pruebas end-to-end envía la página a su nube, donde se renderiza en varios navegadores y anchos, y alguien revisa y aprueba o rechaza los cambios antes de fusionar el pull request. BackstopJS hace el mismo ciclo en tu propia máquina o servidor de CI, gratis, configurado en un archivo JSON. Diffy parte de una lista de URLs en lugar de código, y está pensado para agencias, QA y gestores de proyecto además de para desarrolladores.

Tres de ellas también pueden vigilar producción. El Website Scanner de Percy y Applitools Autonomous escanean una web a partir de su sitemap según un calendario, y Diffy captura producción los días y a las horas que elijas. Así que «capturas programadas de la web en vivo» no es lo que diferencia a ninguna de ellas. Lo que cambia es el resto: cómo toleran el ruido las comparaciones, cuánto pagas por captura y qué más se ejecuta junto a ello.

Cómo funciona Percy

Percy, parte de BrowserStack, se maneja con un SDK en tus pruebas. En cada snapshot captura el DOM de la página y lo envía a Percy, que lo renderiza en paralelo en varios navegadores y anchos. Los proyectos nuevos usan Chrome, Firefox, Edge y Safari por defecto. Por defecto, Percy renderiza los snapshots con JavaScript desactivado, porque el DOM que recibió ya contiene el estado de la página.

Cada ejecución de tus pruebas crea un build. Percy compara cada captura con la referencia aprobada, y los revisores aprueban snapshots individuales, grupos o el build entero, o piden cambios antes de fusionar. Las capturas aprobadas se mantienen durante toda la vida de la rama. Percy enumera más de 50 integraciones con frameworks de pruebas y servicios de CI.

Su Website Scanner, sin código, es un producto aparte: lee tu sitemap XML y ejecuta escaneos de producción o staging cada hora, cada día o cada semana, con alertas, y no necesita código ni instalación.

Cómo funciona Applitools

Applitools Eyes también se ejecuta desde tus pruebas, con SDKs para más de 50 frameworks, entre ellos Playwright, Cypress, Selenium, Storybook y Appium. Su Ultrafast Grid toma el DOM, el CSS y los recursos de la página y renderiza checkpoints en los navegadores y dispositivos que elijas: navegadores de escritorio, dispositivos Android emulados y simuladores iOS con Safari.

Lo que lo distingue es cómo compara. En lugar de contar píxeles, Eyes usa lo que llama Visual AI, con match levels que eliges por página o por región. Strict marca lo que notaría una persona e ignora las diferencias de renderizado. Layout solo comprueba que los elementos mantengan su posición, lo que va bien con contenido dinámico o traducido. Dynamic acepta una fecha, un número o un email que cambien, siempre que mantengan su formato. Exact es píxel a píxel, y el propio Applitools no lo recomienda para un uso normal. Con un clic puedes aceptar el mismo cambio en todos los viewports.

Applitools Autonomous es su producto sin código: rastrea tu sitemap para montar una suite inicial, puede ejecutarse según un calendario para detectar cambios de contenido de terceros o generado por usuarios, y señala errores HTTP, timeouts y páginas que aparecieron o desaparecieron.

Cómo funciona BackstopJS

BackstopJS es un proyecto de código abierto bajo licencia MIT. Se instala con npm, describes tus páginas en backstop.json (cada escenario tiene una etiqueta y una URL, además de al menos un viewport) y se ejecuta en tu propia máquina o servidor de CI. Por defecto maneja Chrome headless a través de Puppeteer, o Chromium, Firefox o WebKit a través de Playwright.

"backstop test" toma capturas nuevas y las compara con tus imágenes de referencia; "backstop approve" convierte los últimos resultados en las nuevas referencias. misMatchThreshold fija el porcentaje de píxeles que se permite que difieran, 0,1 por defecto. Para evitar diferencias entre sistemas operativos, puede renderizar dentro de su propio contenedor Docker, y puede generar informes JUnit para CI.

No hay panel alojado, cuenta ni programador. Para vigilar producción, apuntas los escenarios a URLs en vivo y los ejecutas desde tu propio cron o calendario de CI. La última versión en npm es la 6.3.25, de septiembre de 2024, y al repositorio seguían llegando commits en septiembre de 2026.

Cómo funciona Diffy

Diffy funciona a partir de URLs, sin nada que instalar en la web. Carga tus páginas en un navegador real en sus propios servidores, en breakpoints de 240 a 2000 píxeles de ancho, y puede fijar cookies y cabeceras o iniciar sesión, con ajustes predefinidos para Drupal, WordPress y Netlify.

Su comparación principal es entorno contra entorno: producción contra staging o dev, cambiando el dominio en cada URL por ti. También puede comparar una página con su escaneo anterior, o con un frame de Figma. Un calendario captura producción los días y a las horas que elijas, con avisos por email, Slack y webhook. Pro añade automatización de CI, con configuraciones documentadas para GitHub Actions y CircleCI.

Para WordPress, Diffy tiene un plugin gratuito en WordPress.org que añade un enlace "update now with Diffy visual testing" junto a cada actualización disponible: captura la web, ejecuta la actualización, vuelve a capturar y compara. Necesita una cuenta de Diffy, que el plugin puede crear.

Qué detectan las herramientas de regresión visual, y qué se les escapa

Detectan lo que cambia en pantalla: una cabecera que se superpone al contenido, una rejilla que colapsó, un botón que se salió de la página, una fuente que no cargó, una sección que desapareció. Ejecutados en CI, Percy, Applitools y BackstopJS lo detectan antes de fusionar el código, que es el momento más barato para arreglarlo.

Se les escapa lo que se ve igual. Un checkout que se renderiza perfectamente pero ya no acepta pagos, un formulario que no envía nada, una página que salió del índice de búsqueda o una web que se cayó a las 3 de la madrugada: todo eso pasa una comparación de capturas, o nunca se llega a mirar. Una revisión en el pull request, además, solo ve lo que hay en el pull request. Una actualización automática de un plugin, un cambio del lado del hosting, un nuevo banner de cookies o un script de terceros que cambió por su cuenta llegan a producción sin pasar por tu CI.

El ruido es el otro límite. Los carruseles, los anuncios, las fechas y las imágenes de carga diferida cambian entre capturas. Cada producto lo trata a su manera: Applitools con match levels, BackstopJS y Percy con umbrales y regiones ignoradas, Diffy y Relvato con máscaras. Cuentes con el que cuentes, dedicarás algo de tiempo a ajustarlo.

Precios a noviembre de 2026

Los productos cuentan cosas distintas, así que compara con cuidado. Percy cuenta una captura como una página en un navegador a un ancho: dos páginas en dos navegadores a tres anchos son doce. Applitools cuenta checkpoints, de una página o de un componente. Diffy cuenta capturas sin decir cómo las multiplican los breakpoints. Relvato cuenta ejecuciones, y una ejecución cubre todas las páginas, viewports y navegadores que configures para ese monitor.

Percy: gratis para 5000 capturas al mes, con usuarios y proyectos ilimitados y un mes de historial de builds. El plan Desktop cuesta 199 $ al mes con pago anual o 249 $ con pago mensual por 10 000 capturas, y 0,036 $ por cada captura extra. Los dispositivos móviles reales empiezan en 599 $ al mes con pago anual. El precio del Website Scanner no está publicado en estas páginas.

Applitools: sin plan gratis, solo una prueba gratuita, que sus términos limitan a 100 checkpoints al mes por usuario. Starter cuesta 667 $ al mes, pagado anualmente, por "100,000 component checkpoints or 1,000 page checkpoints" con usuarios ilimitados; la página de precios no dice sobre qué periodo. Professional y Enterprise se cotizan a petición.

BackstopJS: gratis. Solo pagas la máquina o los minutos de CI en los que se ejecuta.

Diffy: gratis para 500 capturas al mes, dos entornos y un mes de datos. Pro cuesta 67 $ al mes con pago anual o 80 $ con pago mensual por 2000 capturas, hasta 250 $ o 300 $ por 30 000, con seis meses de datos.

Relvato: el monitor de regresión visual está en todos los planes. Free cubre una web y 100 ejecuciones al mes; Pro cuesta 29 $ al mes (24 $ con pago anual) por una web; Business 79 $ por cinco webs; Agency 199 $ por 25. Cada plan incluye además todos los demás monitores, así que el precio no es solo por la regresión visual.

Cuándo elegir cada uno

Elige Percy si tu equipo despliega mediante pull requests, quiere renderizado cross-browser sin tener que ejecutar navegadores él mismo, y un nivel gratis generoso para empezar. Elige Applitools si los falsos positivos de contenido dinámico te están costando tiempo, pruebas componentes y muchos dispositivos, y el presupuesto lo permite; sus match levels son aquí la forma más flexible de tolerar el ruido. Elige BackstopJS si quieres algo gratis, de código abierto y autoalojado, sin que ninguna captura salga de tus servidores, y no te importa mantener tú mismo la configuración y las referencias. Elige Diffy si gestionas webs sin suite de pruebas, quieres comparar producción con staging, o quieres comparar capturas antes y después de las actualizaciones de WordPress desde dentro de wp-admin.

No elijas Relvato para pruebas antes de fusionar. No toma snapshots dentro de tu suite de pruebas, no prueba componentes de Storybook ni comprueba el build de previsualización de un pull request: comprueba la web en vivo. Si lo que necesitas es una barrera en CI, elige una de las cuatro.

Cómo trabajan juntas

Una herramienta de CI y un monitor de producción responden preguntas distintas. Percy, Applitools o BackstopJS te dicen que este cambio es seguro de fusionar. Un monitor te dice que la web en vivo sigue viéndose y funcionando bien, sea lo que sea lo que la cambió: un despliegue, una actualización de plugin, un cambio de hosting o un script de terceros.

Una configuración habitual es una herramienta visual en CI para los pull requests, y monitores en producción para todo lo que nunca pasa por CI. Si ya usas los escaneos programados de producción de Diffy o de Percy, Relvato añade lo que no cubren: monitores de uptime, checkout, inicio de sesión, formularios, SEO y seguridad en la misma web, que se vuelven a ejecutar tras cada actualización o despliegue.

Cómo lo hace Relvato

El monitor de regresión visual de Relvato captura las páginas que elijas en un navegador real, en escritorio (1280 píxeles de ancho) y móvil (390 píxeles), en Chromium, Firefox o WebKit, el motor de Safari. Antes de cada captura de página completa detiene las animaciones, espera a las fuentes y a las imágenes de carga diferida, oculta los widgets de cookies y chat, y pinta encima de las regiones que hayas enmascarado. Luego compara la captura píxel a píxel con la referencia que aprobaste, con la sensibilidad que fijes. Un monitor cubre hasta 40 combinaciones de página, viewport y navegador.

Para reducir el ruido, una captura que falla se vuelve a tomar después de dar tiempo a que la página se asiente, y se queda la más parecida de las dos. Un cambio que sigue fallando pasa a una revisión por IA de la zona afectada: un veredicto seguro de "no visible change" o "content only" se muestra para revisión en lugar de generar una alerta, mientras que los cambios grandes y los errores en la página siempre fallan. Cuando un cambio es intencionado, apruebas la nueva referencia con un clic (gestión de referencias). Junto a él, el monitor de deriva de estructura compara cómo está construida la página, lo que detecta una sección que falta y que una captura puede ocultar; nuestra guía explica la diferencia.

No necesita plugin ni fragmento de código: funciona desde fuera, en cualquier web. En el plan Free pulsas «Run», o se ejecuta según su calendario semanal una vez que has probado que la web es tuya. Pro añade ejecuciones diarias, y vuelve a ejecutarse tras cada actualización de WordPress (mediante el plugin gratuito de Relvato) y tras cada despliegue, por ejemplo desde GitHub. Business se ejecuta cada hora. La misma ejecución está junto a tus monitores de uptime, checkout y SEO, así que una página rota y un pago roto aparecen en el mismo sitio.