Wie Magnitude Browser durch Vision statt durch fragile Selektoren automatisiert

Jeder, der End-to-End-Tests oder Parser mit Playwright und Selenium geschrieben hat, kennt diesen Schmerz. Frontend-Entwickler haben den Build aktualisiert, Tailwind hat die Klassen neu generiert, das Layout hat sich um zehn Pixel verschoben – und die Hälfte der Szenarien stürzt mit einem ElementNotFound Fehler ab. Selbst wenn man ein Standard-Sprachmodell darauf ansetzt, stößt es schnell an seine Grenzen bei den aufgeblähten DOM-Bäumen moderner SPA-Anwendungen oder bei einem Canvas, das überhaupt keine Markup-Knoten hat.

Die Entwickler des Open-Source-Projekts Magnitude haben sich entschieden, das Problem aus einem anderen Blickwinkel anzugehen. Statt LLMs Megabytes an rohem HTML zu füttern oder Marker mit Zahlen auf Buttons zu zeichnen, haben sie das Tool auf direkte Computer Vision ausgerichtet.

Warum Selektoren und überlagerte Marker nicht mehr funktionieren

Die meisten modernen KI-Agenten für Browser arbeiten nach dem Set-of-Marks-Ansatz. Das Skript findet alle interaktiven Elemente auf der Seite, zeichnet bunte farbige Boxen mit Zahlen darum, macht einen Screenshot und bittet das Modell, die Nummer des gewünschten Buttons auszuwählen.

Auf einfachen Landing Pages funktioniert dieser Trick. Aber versuchen Sie, eine komplexe Admin-Oberfläche, eine interaktive Karte oder einen Editor wie Figma zu öffnen. Erstens beginnt das Markup-Skript zu hängen. Zweitens überlappen sich Elemente oft gegenseitig, Zahlen kriechen auf Text, und Dropdown-Menüs schließen sich, sobald das Hilfs-DOM injiziert wird.

Magnitude verwendet visuell verankerte LLMs. Das neuronale Netz betrachtet einen sauberen Seiten-Screenshot genau wie ein Mensch und gibt sofort präzise Pixelkoordinaten zum Klicken aus. Dadurch entfällt die Notwendigkeit, sich mit der Seitenstruktur auseinanderzusetzen, und erreicht eine Erfolgsrate von 94% auf dem WebVoyager-Benchmark.

Wie der Agent-Code funktioniert

Im Code sieht Magnitude wie eine standardmäßige asynchrone TypeScript-Bibliothek aus. Sie können Befehle auf oberster Ebene in natürlicher Sprache geben oder explizit Low-Level-Aktionen angeben.

Hier ist ein grundlegendes Beispiel für die Arbeit mit Board-Aufgaben:

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

Besondere Anerkennung verdient die Daten-Parsing-Funktionalität. Oft müssen Sie nicht nur einen Button klicken, sondern strukturierte Informationen von der Seite extrahieren. Magnitude enthält eine extract Methode, die ein Zod-Validierungsschema akzeptiert.

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

Beachten Sie das difficulty Feld. Der Agent zieht nicht nur rohen Text aus dem Markup, sondern kann auch die Aufgabenkomplexität dynamisch auf einer Skala bewerten, wenn Sie dies über die Feldbeschreibung anfordern.

Integrierter Test-Runner

Neben der flexiblen Automatisierung haben die Autoren einen fertigen Runner für Web-Anwendungstests erstellt. Sie können ihn in einem bestehenden Repository installieren:

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

Der Befehl erstellt einen tests/magnitude Ordner mit einer Konfiguration und einem Testbeispiel. Im Gegensatz zu Standard-Tests basieren hier die Assertions auf visuellen Prüfungen. Sie schreiben ein Szenario in einfacher Sprache, der Agent durchläuft die Schritte und verifiziert, dass die Oberfläche korrekt reagiert.

Wenn Sie ein sauberes Projekt für Automatisierung von Grund auf benötigen, können Sie die Umgebung noch schneller aufsetzen:

npx create-magnitude-app

Anforderungen an Modelle und versteckte Nuancen

Der Hauptnachteil dieses Ansatzes sind die Rechenressourcen und API-Kosten. Kleine Open-Source-Modelle treffen nicht zuverlässig die richtigen Koordinaten.

Die Entwickler empfehlen die Verwendung von Claude Sonnet 4, das derzeit die räumliche Orientierung in Bildern besser bewältigt als alles andere. Wenn Sie eine Open-Weight-Option für lokale Bereitstellung oder eine private Umgebung benötigen, wird Qwen-2.5VL mit 72 Milliarden Parametern unterstützt. Aber die lokale Ausführung eines solchen Modells erfordert ernsthafte Hardware mit mehreren High-End-Grafikkarten.

Die zweite Sache, die Sie beachten sollten: Geschwindigkeit. Jeder Agent-Schritt erfordert das Senden eines Screenshots an das Modell und das Warten auf eine Antwort. Das dauert ein paar Sekunden pro Aktion, daher eignet sich das Tool nicht für Lasttests. Derzeit arbeiten die Autoren an einem nativen Action-Caching-System, damit wiederholende Szenarien deterministisch ausgeführt werden können, ohne ständige Anfragen an das LLM.

Wofür das Projekt bereits gut geeignet ist

1. Automatisierung von Diensten ohne offene API. Wenn Sie Berichte aus einem geschlossenen Banking-Panel oder einem Drittanbieter-CRM-System exportieren müssen, wo die API entweder kostenpflichtig oder nicht vorhanden ist.
2. End-to-End-Tests komplexer UIs. Wenn ein Projekt viele Drag-and-Drop-Interaktionen, verschachtelte iframes oder Canvas-Komponenten hat, deren Selektor-Unterstützung zum Albtraum wird.
3. Intelligente Datensammlung. Parsing von Katalogen mit komplexen Layouts, unendlichem Scrollen und dynamischem Inhaltsladen.

Magnitude punktet damit, dass es nicht versucht, ein universeller „Magic Button" zu sein, sondern Entwicklern eine saubere TypeScript-API mit Typvalidierung und Kontrolle über jeden Schritt bietet. Es lohnt sich auf jeden Fall, es auszuprobieren, wenn Sie es leid sind, nach jedem Redesign fehlschlagende Tests zu reparieren.