Cómo Magnitude automatiza el navegador a través de visión en lugar de selectores frágiles

Cualquiera que haya escrito tests end-to-end o parsers con Playwright y Selenium conoce este dolor. Los desarrolladores frontend actualizaron el build, Tailwind regeneró las clases, el layout se desplazó diez píxeles hacia un lado, y la mitad de los escenarios fallan con un error ElementNotFound. Incluso si capas un modelo de lenguaje estándar encima, rápidamente tropieza con el árbol DOM inflado de las aplicaciones SPA modernas o un canvas que no tiene nodos de markup en absoluto.

Los creadores del proyecto open-source Magnitude decidieron abordarlo desde un ángulo diferente. En lugar de alimentar a los LLMs con megabytes de HTML crudo o dibujar marcadores con números encima de los botones, construyeron la herramienta alrededor de la visión artificial directa.

Por qué los selectores y los marcadores superpuestos ya no funcionan

La mayoría de los agentes AI modernos para navegadores funcionan usando el enfoque Set-of-Marks. El script encuentra todos los elementos interactivos en la página, dibuja cajas de colores brillantes con números alrededor de ellos, toma una captura de pantalla y le pide al modelo que elija el número del botón deseado.

En páginas de aterrizaje simples, este truco funciona. Pero intenta abrir un panel de administración complejo, un mapa interactivo o un editor como Figma. Primero, el script de markup comienza a quedarse atrás. Segundo, los elementos a menudo se superponen entre sí, los números se meten en el texto y los menús desplegables se cierran en el momento en que se inyecta el DOM auxiliar.

Magnitude usa LLMs con visión grounded. La red neuronal mira una captura de pantalla limpia de la página de la misma manera que lo hace una persona, e inmediatamente genera coordenadas de píxeles precisas para hacer clic. Esto elimina la necesidad de tratar con la estructura de la página y logra una tasa de éxito del 94% en el benchmark WebVoyager.

Cómo funciona el código del agente

En código, Magnitude parece una biblioteca TypeScript asíncrona estándar. Puedes emitir comandos de alto nivel en lenguaje natural, o especificar explícitamente acciones de bajo nivel.

Aquí hay un ejemplo básico de trabajo con tareas de tableros:

import { agent } from 'magnitude';
import { z } from 'zod';

// Агент сам найдет нужные поля и заполнит форму
await agent.act('Create a task', {
    data: {
        title: 'Use Magnitude',
        description: 'Run "npx create-magnitude-app" and follow the instructions',
    },
});

// Низкоуровневое действие с пониманием контекста интерфейса
await agent.act('Drag "Use Magnitude" to the top of the in progress column');

El mérito aparte va para la funcionalidad de parsing de datos. A menudo no solo necesitas hacer clic en un botón, sino extraer información estructurada de la página. Magnitude incluye un método extract que acepta un schema de validación Zod.

// Извлечение данных прямо по схеме с дополнительным анализом
const tasks = await agent.extract(
    'List in progress tasks',
    z.array(z.object({
        title: z.string(),
        description: z.string(),
        difficulty: z.number().describe('Rate the difficulty between 1-5')
    })),
);

Nota el campo difficulty. El agente no solo extrae texto crudo del markup, sino que también puede evaluar la complejidad de la tarea sobre la marcha usando una escala, si lo solicitas a través de la descripción del campo.

Test Runner integrado

Además de la automatización flexible, los autores crearon un runner listo para usar para testing de aplicaciones web. Puedes instalarlo en un repositorio existente:

npm i --save-dev magnitude-test
npx magnitude init

El comando crea una carpeta tests/magnitude con una configuración y un ejemplo de test. A diferencia de los tests estándar, aquí las aserciones se basan en verificaciones visuales. Escribes un escenario en lenguaje natural, el agente pasa por los pasos y verifica que la interfaz responde correctamente.

Si necesitas un proyecto limpio para automatización desde cero, puedes levantar el entorno aún más rápido:

npx create-magnitude-app

Requisitos de modelos y matices ocultos

La principal desventaja de este enfoque son los recursos computacionales y los costos de API. Los modelos pequeños open no alcanzarán de manera confiable las coordenadas correctas.

Los desarrolladores recomiendan usar Claude Sonnet 4, que actualmente maneja la orientación espacial en imágenes mejor que cualquier otra cosa. Si necesitas una opción open-weight para despliegue local o un entorno privado, Qwen-2.5VL con 72 mil millones de parámetros es compatible. Pero ejecutar dicho modelo localmente requerirá hardware serio con múltiples tarjetas gráficas de gama alta.

La segunda cosa a tener en cuenta: la velocidad. Cada paso del agente requiere enviar una captura de pantalla al modelo y esperar una respuesta. Esto toma un par de segundos por acción, por lo que la herramienta no funcionará para load testing. Actualmente, los autores están trabajando en un sistema nativo de action caching para que los escenarios repetitivos se ejecuten de forma determinista sin solicitudes constantes al LLM.

Para qué tareas el proyecto ya es útil

1. Automatización de servicios sin API abierta. Si necesitas exportar reportes desde un panel bancario cerrado o un sistema CRM de terceros donde la API es de pago o no existe.
2. Testing end-to-end de UIs complejas. Cuando un proyecto tiene mucho drag-and-drop, iframes anidados o componentes de canvas cuyo soporte de selectores se convierte en una pesadilla.
3. Recolección inteligente de datos. Parsing de catálogos con layouts complejos, scroll infinito y carga dinámica de contenido.

Magnitude gana puntos por no intentar ser un "botón mágico" universal, sino por dar a los desarrolladores una API TypeScript limpia con validación de tipos y control sobre cada paso. Definitivamente vale la pena probarlo si estás cansado de arreglar tests que fallan después de cada rediseño.