Hoe Magnitude de Browser Automatiseert Via Visie In Plaats van Breekbare Selectors

Iedereen die end-to-end tests of parsers heeft geschreven met Playwright en Selenium kent deze pijn. Frontend developers hebben de build bijgewerkt, Tailwind heeft de classes geregenereerd, de layout is tien pixels opzij geschoven, en de helft van de scenario's crasht met een ElementNotFound error. Zelfs als je een standaard taalmodel erop legt, struikelt het snel over de uitgebreide DOM-boom van moderne SPA-applicaties of een canvas die helemaal geen markup nodes heeft.

De makers van het open-source project Magnitude hebben besloten het vanuit een ander perspectief te benaderen. In plaats van LLM's megabytes aan ruwe HTML te voeren of markers met nummers op knoppen te tekenen, hebben ze het tool gebouwd rond directe computer vision.

Waarom Selectors en Overlays Met Markers Niet Meer Werken

De meeste moderne AI-agents voor browsers werken met de Set-Of-Marks aanpak. Het script vindt alle interactieve elementen op de pagina, tekent felgekleurde vakken met nummers eromheen, maakt een screenshot, en vraagt het model om het nummer van de gewenste knop te selecteren.

Op eenvoudige landingspagina's werkt deze truc. Maar open eens een complex admin panel, een interactieve kaart, of een editor zoals Figma. Ten eerste begint het markup script te haperen. Ten tweede overlappen elementen elkaar vaak, kruipen nummers over tekst, en sluiten dropdown menu's zodra de hulp-DOM wordt geïnjecteerd.

Magnitude gebruikt visueel verankerde LLM's. Het neurale netwerk kijkt naar een schone pagina-screenshot op dezelfde manier als een persoon dat doet, en genereert direct nauwkeurige pixelcoördinaten voor klikken. Dit elimineert de noodzaak om met paginastructuur om te gaan en levert een slagingspercentage van 94% op de WebVoyager benchmark.

Hoe de Agent Code Werkt

In code ziet Magnitude eruit als een standaard asynchrone TypeScript-bibliotheek. Je kunt commando's op hoog niveau in natuurlijke taal geven, of expliciet low-level acties specificeren.

Hier is een basisvoorbeeld van werken met board-taken:

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

Afzonderlijke lof gaat naar de data parsing functionaliteit. Vaak hoef je niet alleen maar op een knop te klikken, maar ook gestructureerde informatie van de pagina te extraheren. Magnitude bevat een extract methode die een Zod-validatieschema accepteert.

// Извлечение данных прямо по схеме с дополнительным анализом
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')
    })),
);

Merk het difficulty veld op. De agent haalt niet alleen ruwe tekst uit de markup, maar kan ook de taakcomplexiteit dynamisch evalueren met een schaal, als je hierom vraagt via de veld beschrijving.

Ingebouwde Test Runner

Naast flexibele automatisering hebben de auteurs een kant-en-klare runner gemaakt voor webapplicatie testing. Je kunt het installeren in een bestaande repository:

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

Het commando maakt een tests/magnitude map aan met een config en een testvoorbeeld. In tegenstelling tot standaard tests zijn assertions hier gebaseerd op visuele checks. Je schrijft een scenario in gewone taal, de agent doorloopt de stappen en verifieert dat de interface correct reageert.

Als je een schoon project voor automatisering vanaf nul nodig hebt, kun je de omgeving nog sneller opzetten:

npx create-magnitude-app

Model Vereisten en Verborgen Nuances

Het belangrijkste nadeel van deze aanpak is rekenkracht en API-kosten. Kleine open modellen zullen betrouwbaar niet de juiste coördinaten raken.

De ontwikkelaars raden aan om Claude Sonnet 4 te gebruiken, wat momenteel beter omgaat met ruimtelijke oriëntatie in afbeeldingen dan anything else. Als je een open-weight optie nodig hebt voor lokale deployment of een private omgeving, wordt Qwen-2.5VL met 72 miljard parameters ondersteund. Maar zo'n model lokaal draaien vereist serieuze hardware met meerdere high-end grafische kaarten.

Het tweede waar je rekening mee moet houden: snelheid. Elke agent-stap vereist het verzenden van een screenshot naar het model en wachten op een reactie. Dit kost een paar seconden per actie, dus het tool werkt niet voor load testing. Momenteel werken de auteurs aan een native action caching systeem zodat repetitieve scenario's deterministisch worden uitgevoerd zonder constante verzoeken aan de LLM.

Waar het Project Nu Al Goed Voor Is

1. Services automatiseren zonder open API. Als je rapporten moet exporteren uit een gesloten bankierenpaneel of een third-party CRM-systeem waar de API ofwel betaald ofwel niet-bestaand is.
2. End-to-End testing van complexe UI's. Wanneer een project veel drag-and-drop, geneste iframes, of canvas-componenten heeft waarvan de selector-ondersteuning een nachtmerrie wordt.
3. Slimme dataverzameling. Parsen van catalogi met complexe layouts, infinite scrolling, en dynamische content loading.

Magnitude scoort punten door niet te proberen een universele "magische knop" te zijn, maar developers een schone TypeScript API te geven met type-validatie en controle over elke stap. Het is zeker de moeite waard om te proberen als je moe bent van het repareren van falende tests na elke redesign.