Come Magnitude Automatizza il Browser Tramite Visione Artificiale Invece che Selettori Fragili

Chiunque abbia scritto test end-to-end o parser con Playwright e Selenium conosce questo dolore. Gli sviluppatori frontend hanno aggiornato la build, Tailwind ha rigenerato le classi, il layout si è spostato di dieci pixel di lato, e metà degli scenari crashano con un errore ElementNotFound. Anche se aggiungi un modello linguistico standard sopra, fatica rapidamente con l'enorme albero DOM delle moderne applicazioni SPA o con una canvas che non ha nodi di markup.

I creatori del progetto open-source Magnitude hanno deciso di affrontarlo da un'angolazione diversa. Invece di fornire agli LLM megabyte di HTML grezzo o disegnare marcatori con numeri sopra i pulsanti, hanno costruito lo strumento attorno alla visione artificiale diretta.

Perché i Selettori e i Marcatori Sovrapposti Non Funzionano Più

La maggior parte degli agenti AI moderni per browser funzionano usando l'approccio Set-of-Marks. Lo script trova tutti gli elementi interattivi nella pagina, disegna riquadri colorati brillanti con numeri attorno, scatta uno screenshot e chiede al modello di scegliere il numero del pulsante desiderato.

Sulle landing page semplici, questo trucco funziona. Ma prova ad aprire un pannello admin complesso, una mappa interattiva o un editor come Figma. Prima lo script di markup inizia a rallentare. Secondo, gli elementi spesso si sovrappongono, i numeri si sovrappongono al testo e i menu a tendina si chiudono nel momento in cui viene iniettato il DOM ausiliario.

Magnitude usa LLM ancorati alla visione. La rete neurale guarda uno screenshot pulito della pagina come farebbe una persona, e restituisce immediatamente coordinate pixel precise per il clic. Questo elimina la necessità di gestire la struttura della pagina e raggiunge un tasso di successo del 94% sul benchmark WebVoyager.

Come Funziona il Codice dell'Agente

Nel codice, Magnitude assomiglia a una libreria TypeScript asincrona standard. Puoi emettere comandi di alto livello in linguaggio naturale, oppure specificare esplicitamente azioni di basso livello.

Ecco un esempio base di lavoro con le attività della board:

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');

Un plauso separato va alla funzionalità di parsing dei dati. Spesso non serve solo cliccare un pulsante, ma estrarre informazioni strutturate dalla pagina. Magnitude include un metodo extract che accetta uno schema di validazione 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 il campo difficulty. L'agente non si limita a estrarre il testo grezzo dal markup, ma può anche valutare la complessità del compito al volo usando una scala, se lo richiedi attraverso la descrizione del campo.

Test Runner Integrato

Oltre all'automazione flessibile, gli autori hanno creato un runner pronto all'uso per il test delle applicazioni web. Puoi installarlo in un repository esistente:

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

Il comando crea una cartella tests/magnitude con una configurazione e un esempio di test. A differenza dei test standard, qui le asserzioni si basano su controlli visivi. Scrivi uno scenario in linguaggio naturale, l'agente attraversa i passaggi e verifica che l'interfaccia risponda correttamente.

Se ti serve un progetto pulito per l'automazione da zero, puoi avviare l'ambiente ancora più velocemente:

npx create-magnitude-app

Requisiti dei Modelli e Sfumature Nascoste

Il principale compromesso di questo approccio sono le risorse computazionali e i costi delle API. I piccoli modelli open non colpiranno le coordinate giuste in modo affidabile.

Gli sviluppatori consigliano di usare Claude Sonnet 4, che attualmente gestisce l'orientamento spaziale nelle immagini meglio di qualsiasi altra cosa. Se ti serve un'opzione open-weight per deployment locale o un ambiente privato, è supportato Qwen-2.5VL con 72 miliardi di parametri. Ma eseguire un tale modello localmente richiederà hardware serio con multiple schede grafiche di fascia alta.

La seconda cosa da tenere a mente: la velocità. Ogni passaggio dell'agente richiede l'invio di uno screenshot al modello e l'attesa di una risposta. Questo richiede un paio di secondi per azione, quindi lo strumento non funzionerà per il load testing. Attualmente gli autori stanno lavorando su un sistema di caching delle azioni nativo in modo che gli scenari ripetitivi vengano eseguiti deterministicamente senza richieste costanti all'LLM.

Per Quali Compiti il Progetto È Già Adatto

1. Automazione di servizi senza API aperta. Se hai bisogno di esportare report da un pannello bancario chiuso o da un sistema CRM di terze parti dove l'API è a pagamento o inesistente.
2. Test end-to-end di UI complesse. Quando un progetto ha molto drag-and-drop, iframe annidati o componenti canvas il cui supporto ai selettori diventa un incubo.
3. Raccolta intelligente di dati. Parsing di cataloghi con layout complessi, scrolling infinito e caricamento dinamico dei contenuti.

Magnitude guadagna punti per il fatto di non cercare di essere un "pulsante magico" universale, ma invece offre agli sviluppatori un'API TypeScript pulita con validazione dei tipi e controllo su ogni passaggio. Vale sicuramente la pena provarlo se sei stanco di correggere test che falliscono dopo ogni redesign.