Snapshot
Cómo el agente lee una página como snapshot estructurado, y cómo funcionan las refs @N.
Snapshot es la forma en que un agente lee una página web. Toma la página actual, la convierte en un texto estructurado compacto y asigna números temporales (@1, @2, …) a los elementos accionables: botones, campos, enlaces. El agente decide el siguiente paso a partir de ese snapshot, en lugar de leer el HTML crudo o adivinar coordenadas de pantalla.
Qué resuelve
Para una persona, una página web es una interfaz visual. Para un agente, son decenas de miles de tokens de HTML, scripts, estilos y estado dinámico. Pasarlos tal cual a un LLM tiene dos costos típicos:
- Alto costo de tokens. Una página de admin habitual puede pesar 30k tokens, y hay que releerla antes de cada acción.
- Demasiado ruido. La mayor parte del DOM (estilos, scripts, nodos ocultos) no tiene relación con la decisión y solo entorpece.
El snapshot se construye a partir del accessibility tree del navegador — la vista semántica que el navegador mantiene para los lectores de pantalla — y comprime la página a unos pocos cientos de tokens:
- Título de la página y URL actual.
- Texto visible y estructura principal.
- Elementos que se pueden clicar, llenar o seleccionar, con sus roles y nombres.
- Un
@Ntemporal por cada elemento interactivo.
Es suficiente para que el agente decida qué botón presionar y qué campo llenar — sin HTML crudo y sin coordenadas de pantalla.
Cómo funcionan las refs @N
Cada elemento interactivo del snapshot recibe un número temporal:
@1 [input] "Buscar"
@2 [button] "Enviar"
@3 [link] "Siguiente página"
El agente actúa sobre esos números, por ejemplo await click('@2').
@N solo vale para el snapshot actual. Cuando la página cambia (navegación, refresh, diálogo, envío de formulario, cambio de pestaña, re-render dinámico), los números antiguos podrían no apuntar a nada útil. La práctica segura es tomar otro snapshot tras cada cambio en lugar de aferrarte a un @N.
Si necesitas una referencia estable a un elemento a lo largo de varios pasos, usa el selector loc=... que el snapshot devuelve, o escribe un selector CSS directamente. Ver ego-browser.
Cuándo vas a notar el snapshot
La mayoría del tiempo no lo tocas: el agente lo lee solo. Puede asomarse en dos momentos:
- El agente dice "nuevo snapshot" o "snapshot de la página": detectó un cambio y está releyendo el estado actual.
- El resultado de la tarea incluye un fragmento de snapshot como evidencia.
Describir la tarea al agente
El snapshot ayuda al agente a ver la página; los límites de la tarea los pones tú. Una buena descripción incluye:
- La página o sitio objetivo.
- Qué leer, llenar, clicar o descargar.
- Qué no debe hacer (eliminar, publicar, pagar, mandar correo, etc.).
- Si debe detenerse ante captcha, pago o autorización.
- La forma del resultado esperado (tabla, resumen, captura, ruta local).
Ejemplos:
Abre mis GitHub Notifications, filtra los PR que esperan mi review y entrégame nombre del repo, título y enlace.
No archives ni marques como leído.
Abre el panel de pedidos, filtra los de ayer y descarga el CSV.
Si encuentras login o confirmación de exportación, te detienes y me avisas, y me dices dónde quedó el archivo.
Revisar lo que hizo el agente
Cuando termina la tarea, conviene revisar con estos indicios:
- ¿Indicó qué páginas visitó y qué acciones clave hizo?
- ¿El resultado trae datos que puedas verificar (títulos, IDs, enlaces, montos, fechas)?
- En descargas, ¿te dio la ruta local del archivo?
- En tareas que modifican o envían, ¿se detuvo antes de la confirmación final?
- ¿La página sigue abierta en el Space para que la revises?
Si algo no cuadra, pide un snapshot nuevo de la página actual antes de seguir suponiendo desde la respuesta previa.
Preguntas frecuentes
¿Por qué dice el agente que una ref ya no vale?
La página cambió después del snapshot anterior. Pídele que tome uno nuevo.
¿El snapshot puede leer todo el contenido?
No siempre. Contenido fuera de pantalla, texto dentro de imágenes, canvas complejos o iframes cross-origin con restricciones pueden no aparecer completos. En esos casos el agente suele combinar snapshot con captura, extracción de texto o confirmación manual.
¿El snapshot modifica datos?
No. El snapshot solo lee la estructura de la página. Lo que realmente cambia el estado son los clics, llenados, envíos, uploads y eliminaciones posteriores.
¿Necesito recordar @1, @2?
No. Trátalos como "números temporales para la página actual". Quien los usa es el agente; tu parte es dejar claro el objetivo y los límites.