Vigilar cambios visuales
Descubra la página de pago que quedó como texto sin estilos o la imagen principal rota, aunque el texto sea idéntico. Cada revisión muestra la página como un visitante, la compara con la última captura y avisa si se ve distinta. Paga por revisión, sin suscripción.
El texto de una página puede quedar intacto mientras el diseño se rompe por completo: una imagen principal caída, un layout colapsado, un banner que desapareció sin avisar.
Cuando el texto sigue igual pero la página se rompe
Una página puede conservar exactamente el mismo texto mientras se desmorona visualmente. Se rompe la imagen principal, se descoloca el diseño, desaparece un banner sin avisar o falla la carga de un archivo de estilos y toda la página de pago se convierte en texto sin formato sobre fondo blanco. Una comparación del código de la página dirá tan tranquila que no cambió nada. Los equipos de diseño, los ingenieros de calidad y quien gestione páginas de campaña o de aterrizaje que deben verse de una forma concreta necesitan una revisión que muestre la página como la ve un visitante real y compare esa imagen con el paso del tiempo.
Cómo funciona la comparación visual
En la primera ejecución la página se muestra y se captura, y se guarda una huella visual de ella. Cada ejecución posterior vuelve a capturar la página y la compara con esa huella. Si la imagen cambió, usted recibe una señal de que la apariencia se movió desde la última revisión; no es un mapa de los píxeles que difieren. Los equipos la usan para detectar una página de campaña rota tras una publicación antes que los clientes, para ver pronto el rediseño de la página de precios o de funciones de un competidor y para que un cambio visual inesperado justo después de un despliegue ayude a decidir si dar marcha atrás.
Por qué los píxeles no mienten como el texto
Comparar el HTML crudo puede indicar tranquilamente que nada cambió, cuando en realidad falló la carga de una hoja de estilos y toda su página de pago se muestra ahora como texto sin formato sobre fondo blanco. Equipos de diseño, QA y cualquiera responsable de páginas de marketing que deben verse de una forma específica necesitan una verificación que renderice la página como la vería un visitante real y compare esa representación a lo largo del tiempo.
Qué puede hacer con ella
Integridad de páginas de marketing
Reciba una alerta cuando la apariencia de una landing de campaña cambie tras un despliegue, detectando una imagen principal rota o un layout colapsado antes que los clientes.
Seguimiento del diseño de la competencia
Vigile la página de precios o funciones de un competidor para notar un rediseño visual antes de que el cambio aparezca en cualquier otro lado.
Control visual después de cada despliegue
Reciba una alerta de cambio visual justo después de que termine su pipeline de publicación, para que un cambio inesperado pueda condicionar un rollback.
Preguntas frecuentes
¿En qué se diferencia monitorear cambios visuales de comparar el HTML?
El HTML puede seguir siendo técnicamente válido mientras la página se ve rota: falta una hoja de estilos, una sección queda oculta o una imagen falla en silencio. Esta api para monitorear cambios visuales compara la salida realmente renderizada, así que detecta lo que una comparación de texto se pierde.
¿Hay una versión gratuita del monitor visual?
No hay capa gratuita: las capas gratis se abusan y ralentizan a todos. Sin suscripción, sin tokens ni créditos inventados, y una tarea fallida no se cobra.
¿Qué pasa si una verificación falla, por ejemplo por timeout?
La tarea se reintenta automáticamente hasta tres veces; si aun así falla, recibe un error claro y no se cobra ese intento fallido.
¿Puedo usarlo en volumen sobre muchas URLs?
Sí, cada URL es su propio monitor, así que puede registrar comprobaciones de monitor-visual sobre tantas páginas como necesite desde su propio programador.
¿El aviso indica qué parte exacta de la página cambió?
No. Le indica que la apariencia de la página cambió desde la última revisión, como una señal de cambio y no como un mapa de los píxeles que difieren. Abra la página para ver qué ocurrió.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. Esta capacidad está disponible actualmente mediante la API, no como herramienta interactiva en la Web.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/web/monitor-visual \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"url":"https://example.com"}'const res = await fetch("https://api.kit.forhosting.com/web/monitor-visual", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"url": "https://example.com"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/monitor-visual",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"url": "https://example.com"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/monitor-visual", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"url":"https://example.com"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"url":"https://example.com"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/monitor-visual", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"url": "https://example.com"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.monitor_visual",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
timeout_sec | 30 |
max_crawl_pages | 25 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
422 | task_failed | La tarea falló tras 3 reintentos. No se cobra. |
Notas técnicas
Esta API para monitorear cambios visuales renderiza la página, la compara contra la última captura y le avisa cuando la apariencia renderizada cambió.
Qué ocurre en cada verificación
En cada comprobación posterior, la nueva captura se compara contra esa huella. Llama a POST /web/monitor-visual con una URL y una frecuencia de chequeo; la tarea renderiza la página, la captura y guarda una huella visual de referencia. Si el render cambió, se dispara un webhook para avisarle de que la apariencia de la página se movió desde la última verificación — una señal de cambio, no un diagnóstico de qué píxeles difieren.
De capturas sueltas a una disciplina
El monitoreo de regresión visual nació en el control de calidad de frontend, cuando los equipos se cansaron de publicar un botón con el color equivocado o un desplazamiento de diseño que nadie detectó en una revisión manual.
Pensado para su propia automatización
El monitor es asíncrono: lo registra y corre en la frecuencia que elija, entregando un aviso de cambio por webhook firmado (lo recomendado para flujos automatizados) o por enlace firmado válido durante 24 horas. Eso significa que las verificaciones corren a su propia cadencia, enviando el resultado directo a un canal de incidentes o a un paso posterior a un despliegue, sin mantener una conexión abierta ni hacer polling.
Un precio acorde a lo que usa
Una tarea fallida se reintenta automáticamente hasta tres veces y nunca se cobra si finalmente no se completa. El endpoint cuesta $0.040 por solicitud más $0.001 por comprobación, publicado y predecible. No hay plan gratuito ni período de prueba: el acceso requiere saldo prepago, lo que mantiene la capacidad de verificación rápida y libre de abuso.
Casos de integración
Falla de un widget de terceros
Detecte el momento exacto en que un chat, un banner de cookies o un video incrustado deja de cargar y deja un espacio vacío visible.
Preguntas técnicas
¿Cómo me avisan de un cambio?
Cuando una verificación detecta que el render difiere del anterior, un webhook —o un enlace firmado válido durante 24 horas, según lo que configure— entrega el aviso de cambio con una marca de tiempo.
¿Qué se considera una comprobación?
Cada verificación visual individual realizada sobre la URL objetivo, incluida la captura base y cada comparación posterior, se factura a $0.001, además del costo base de $0.040 por solicitud.
¿Puedo monitorear páginas con inicio de sesión o tamaños de pantalla específicos?
Sí, la URL objetivo y los parámetros de renderizado se definen por solicitud, así que se pueden verificar páginas autenticadas o específicas de un dispositivo mientras la página sea alcanzable.
¿Guardan mis capturas para siempre?
No. Los datos capturados se eliminan después del período de retención y nunca se usan para entrenar modelos; solo existen para entregar su comparación y su webhook.