Jak Magnitude automatyzuje przeglądarkę za pomocą wizji zamiast nietrwałych selektorów

Każdy, kto pisał testy end-to-end lub parsery z Playwright i Selenium, zna ten ból. Developerzy frontend zmienili build, Tailwind zregenerował klasy, układ przesunął się o dziesięć pikseli w bok, a połowa scenariuszy crashuje z błędem ElementNotFound. Nawet jeśli nałożysz standardowy model językowy, szybko potknie się o rozdęte drzewo DOM nowoczesnych aplikacji SPA lub canvas, który nie ma węzłów znaczników.

Twórcy projektu open-source Magnitude postanowili podejść do tego z innej strony. Zamiast karmić LLM megabajtami surowego HTML czy rysować markery z numerami na przyciskach, zbudowali narzędzie oparte na bezpośrednim widzeniu komputerowym.

Dlaczego selektory i nakładane markery już nie działają

Większość nowoczesnych agentów AI dla przeglądarek działa przy użyciu podejścia Set-of-Marks. Skrypt znajduje wszystkie interaktywne elementy na stronie, rysuje wokół nich jasne kolorowe ramki z numerami, robi zrzut ekranu i prosi model o wybranie numeru żądanego przycisku.

Na prostych stronach landingowych ten trick działa. Ale spróbuj otworzyć złożony panel administracyjny, interaktywną mapę lub edytor jak Figma. Po pierwsze, skrypt markup zaczyna lagować. Po drugie, elementy często nakładają się na siebie, numery wpełzają na tekst, a menu rozwijane zamykają się w momencie wstrzyknięcia pomocniczego DOM.

Magnitude wykorzystuje wizyjne LLM. Sieć neuronowa patrzy na czysty zrzut ekranu strony tak samo jak człowiek i natychmiast wyprowadza precyzyjne współrzędne pikseli do kliknięcia. Eliminuje to potrzebę zajmowania się strukturą strony i zapewnia 94% skuteczności w benchmarku WebVoyager.

Jak działa kod agenta

W kodzie Magnitude wygląda jak standardowa asynchroniczna biblioteka TypeScript. Możesz wydawać polecenia najwyższego poziomu w języku naturalnym lub jawnie określać akcje niskiego poziomu.

Oto podstawowy przykład pracy z zadaniami na tablicy:

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

Szczególne uznanie należy się funkcjonalności parsowania danych. Często nie wystarczy tylko kliknąć przycisk, ale trzeba wyodrębnić ustrukturyzowane informacje ze strony. Magnitude zawiera metodę extract, która przyjmuje schemat walidacji 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')
    })),
);

Zwróć uwagę na pole difficulty. Agent nie tylko pobiera surowy tekst z markupu, ale może też oceniać złożoność zadania w locie za pomocą skali, jeśli poprosisz o to w opisie pola.

Wbudowany runner testów

Poza elastyczną automatyzacją, autorzy stworzyli gotowy runner do testowania aplikacji webowych. Możesz zainstalować go w istniejącym repozytorium:

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

Polecenie tworzy folder tests/magnitude z konfiguracją i przykładem testu. W przeciwieństwie do standardowych testów, asercje są tutaj oparte na wizualnych sprawdzeniach. Piszesz scenariusz w zwykłym języku, agent przechodzi przez kroki i weryfikuje, że interfejs odpowiada poprawnie.

Jeśli potrzebujesz czystego projektu do automatyzacji od zera, możesz uruchomić środowisko jeszcze szybciej:

npx create-magnitude-app

Wymagania dotyczące modeli i ukryte niuanse

Głównym kompromisem tego podejścia są zasoby obliczeniowe i koszty API. Małe otwarte modele nie będą niezawodnie trafiać we właściwe współrzędne.

Deweloperzy zalecają użycie Claude Sonnet 4, który obecnie radzi sobie z orientacją przestrzenną na obrazach lepiej niż cokolwiek innego. Jeśli potrzebujesz opcji z otwartymi wagami do lokalnego wdrożenia lub środowiska prywatnego, obsługiwany jest Qwen-2.5VL z 72 miliardami parametrów. Ale uruchomienie takiego modelu lokalnie wymaga poważnego sprzętu z wieloma wysokiej klasy kartami graficznymi.

Druga rzecz, o której trzeba pamiętać: szybkość. Każdy krok agenta wymaga wysłania zrzutu ekranu do modelu i oczekiwania na odpowiedź. Trwa to kilka sekund na akcję, więc narzędzie nie sprawdzi się w testach obciążeniowych. Obecnie autorzy pracują nad natywnym systemem cache'owania akcji, aby powtarzalne scenariusze wykonywały się deterministycznie bez ciągłych zapytań do LLM.

Do czego projekt nadaje się już teraz

1. Automatyzacja usług bez otwartego API. Jeśli musisz eksportować raporty z zamkniętego panelu bankowego lub zewnętrznego systemu CRM, gdzie API jest albo płatne, albo nie istnieje.
2. Testowanie end-to-end złożonych interfejsów. Gdy projekt ma dużo drag-and-drop, zagnieżdżonych iframe'ów lub komponentów canvas, których obsługa selektorów zamienia się w koszmar.
3. Inteligentne zbieranie danych. Parsowanie katalogów ze złożonym układem, nieskończonym przewijaniem i dynamicznym ładowaniem treści.

Magnitude zdobywa punkty za to, że nie próbuje być uniwersalnym "magicznym przyciskiem", ale zamiast tego daje developerom czyste API TypeScript z walidacją typów i kontrolą nad każdym krokiem. Zdecydowanie warto wypróbować, jeśli masz dość naprawiania niedziałających testów po każdym przebudowaniu interfejsu.