Comment Magnitude automatise le navigateur par la vision plutôt que par des sélecteurs fragiles

Quiconque a écrit des tests de bout en bout ou des parseurs avec Playwright et Selenium connaît cette douleur. Les développeurs frontend ont mis à jour le build, Tailwind a régénéré les classes, la mise en page s'est décalée de dix pixels sur le côté, et la moitié des scénarios plantent avec une erreur ElementNotFound. Même si vous superposez un modèle de langage standard par-dessus, il trébuche rapidement sur l'arbre DOM gonflé des applications SPA modernes ou sur un canvas qui n'a aucun nœud de balisage du tout.

Les créateurs du projet open-source Magnitude ont décidé de l'aborder sous un angle différent. Au lieu de nourrir les LLM de mégaoctets de HTML brut ou de dessiner des marqueurs avec des chiffres sur les boutons, ils ont construit l'outil autour de la vision par ordinateur directe.

Pourquoi les sélecteurs et les marqueurs superposés ne fonctionnent plus

La plupart des agents IA modernes pour navigateurs utilisent l'approche Set-of-Marks. Le script trouve tous les éléments interactifs de la page, dessine des cases colorées vives avec des chiffres autour d'eux, prend une capture d'écran et demande au modèle de choisir le numéro du bouton souhaité.

Sur les landing pages simples, cette astuce fonctionne. Mais essayez d'ouvrir un panneau d'administration complexe, une carte interactive ou un éditeur comme Figma. D'abord, le script de balisage commence à ramer. Deuxièmement, les éléments se chevauchent souvent, les chiffres empiètent sur le texte et les menus déroulants se ferment dès que le DOM auxiliaire est injecté.

Magnitude utilise des LLM ancrés visuellement. Le réseau neuronal regarde une capture d'écran propre de la page comme le ferait une personne, et génère immédiatement des coordonnées de pixels précises pour le clic. Cela élimine le besoin de gérer la structure de la page et atteint un taux de réussite de 94% sur le benchmark WebVoyager.

Comment fonctionne le code de l'agent

En code, Magnitude ressemble à une bibliothèque TypeScript asynchrone standard. Vous pouvez émettre des commandes de haut niveau en langage naturel, ou spécifier explicitement des actions de bas niveau.

Voici un exemple basique de travail avec des tâches de tableau :

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

Une mention spéciale va à la fonctionnalité d'analyse de données. Souvent, vous n'avez pas seulement besoin de cliquer sur un bouton, mais aussi d'extraire des informations structurées de la page. Magnitude inclut une méthode extract qui accepte un schéma de validation 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')
    })),
);

Notez le champ difficulty. L'agent ne se contente pas d'extraire du texte brut du balisage, mais peut aussi évaluer la complexité de la tâche à la volée en utilisant une échelle, si vous le demandez dans la description du champ.

Runner de tests intégré

En plus de l'automatisation flexible, les auteurs ont créé un runner prêt à l'emploi pour les tests d'applications web. Vous pouvez l'installer dans un dépôt existant :

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

La commande crée un dossier tests/magnitude avec une configuration et un exemple de test. Contrairement aux tests standard, ici les assertions sont basées sur des vérifications visuelles. Vous écrivez un scénario en langage naturel, l'agent parcourt les étapes et vérifie que l'interface répond correctement.

Si vous avez besoin d'un projet propre pour l'automatisation à partir de zéro, vous pouvez démarrer l'environnement encore plus rapidement :

npx create-magnitude-app

Exigences des modèles et nuances cachées

Le principal compromis de cette approche est les ressources de calcul et les coûts d'API. Les petits modèles open ne toucheront pas de manière fiable les bonnes coordonnées.

Les développeurs recommandent d'utiliser Claude Sonnet 4, qui gère actuellement l'orientation spatiale dans les images mieux que tout autre. Si vous avez besoin d'une option open-weight pour un déploiement local ou un environnement privé, Qwen-2.5VL avec 72 milliards de paramètres est supporté. Mais exécuter un tel modèle en local nécessitera un matériel sérieux avec plusieurs cartes graphiques haut de gamme.

La deuxième chose à garder à l'esprit : la vitesse. Chaque étape de l'agent nécessite d'envoyer une capture d'écran au modèle et d'attendre une réponse. Cela prend quelques secondes par action, donc l'outil ne conviendra pas pour les tests de charge. Actuellement, les auteurs travaillent sur un système natif de mise en cache des actions afin que les scénarios répétitifs s'exécutent de manière déterministe sans requêtes constantes au LLM.

Ce pour quoi le projet est déjà utile

1. Automatiser des services sans API ouverte. Si vous avez besoin d'exporter des rapports depuis un panneau bancaire fermé ou un système CRM tiers où l'API est payante ou inexistante.
2. Tests de bout en bout d'interfaces complexes. Quand un projet a beaucoup de drag-and-drop, d'iframes imbriqués ou de composants canvas dont le support des sélecteurs devient un cauchemar.
3. Collecte intelligente de données. Parser des catalogues avec des mises en page complexes, du défilement infini et du chargement dynamique de contenu.

Magnitude gagne des points pour ne pas essayer d'être un "bouton magique" universel, mais plutôt pour donner aux développeurs une API TypeScript propre avec validation des types et contrôle à chaque étape. C'est définitivement quelque chose à essayer si vous en avez assez de corriger des tests qui échouent après chaque refonte.