Comment les agents IA naviguent sur le web : Playwright, MCP et snapshots d’accessibilité

Vous êtes-vous déjà demandé comment des agents IA parviennent à naviguer sur des sites, à cliquer sur des boutons et à remplir des formulaires sans jamais « voir » l’écran ?

Les modèles de vision, ces IA capables de traiter des images, ont beau être populaires, ils sont souvent lents, coûteux et sujets aux hallucinations. On peut citer GPT-4 d’OpenAI, Claude 3 Opus d’Anthropic ou Copilot with Vision de Microsoft. Il existe une approche plus astucieuse et plus rapide : combiner Playwright, le Model Context Protocol (MCP) et les snapshots d’accessibilité.

Dans cet article, nous expliquons en détail comment les grands modèles de langage (LLM) pilotent un navigateur web uniquement à partir de données sémantiques textuelles.

1. Les briques de base

Avant de voir comment elles fonctionnent ensemble, présentons les trois acteurs principaux.

Playwright est un puissant framework d’automatisation open source, généralement utilisé pour tester des applications web. Il permet de contrôler des navigateurs (Chrome, Firefox, Safari) par programmation. Plus d’informations sur playwright.dev (en anglais).

Le Model Context Protocol (MCP) est un standard ouvert, conçu pour connecter de manière sûre les modèles d’IA à des outils et à des sources de données externes. Voyez-le comme une API universelle qui permet à un LLM de dire : « Exécute cette fonction précise pour moi. »

Les snapshots d’accessibilité sont l’ingrédient secret. Les navigateurs génèrent un Accessibility Object Model (AOM) pour aider les lecteurs d’écran à rendre les pages accessibles aux personnes malvoyantes. Au lieu de HTML brut ou de pixels, on obtient un arbre propre et structuré des éléments interactifs : « Bouton : Envoyer », « Champ de texte : Nom d’utilisateur ». Pour en savoir plus sur le format et l’accès aux éléments : playwright.dev/mcp/snapshots (en anglais).

2. Pourquoi se passer des modèles de vision ?

Si une IA veut cliquer sur un bouton « Log In », prendre une capture d’écran, l’envoyer à un modèle de vision, calculer les coordonnées de la zone englobante, puis lancer une commande de clic, c’est terriblement inefficace.

L’approche textuelle l’emporte sur trois points.

• Vitesse. Analyser un arbre d’accessibilité en JSON prend quelques millisecondes. Traiter des images prend plusieurs secondes.
• Coût. Les tokens de texte coûtent bien moins cher que les tokens d’image.
• Précision. Les modèles de vision peuvent mal interpréter les interfaces modernes. Un arbre d’accessibilité indique à l’IA exactement ce qu’est un élément et dans quel état il se trouve : désactivé, coché, et ainsi de suite.

3. Comment ça marche, étape par étape

Étape 1 : l’utilisateur donne une instruction

Vous dites à votre agent IA : « Connecte-toi à mon tableau de bord et télécharge le dernier rapport. »

Étape 2 : l’agent appelle un outil MCP

L’agent n’a pas de navigateur intégré. Il envoie donc, via le Model Context Protocol, une requête à un serveur Playwright connecté et lui demande d’ouvrir la page de connexion.

page.goto(url)

Étape 3 : Playwright navigue et prend un snapshot

Playwright dirige le navigateur headless vers l’URL. Au lieu de prendre une capture d’écran visuelle, il exécute page.accessibility.snapshot(), qui génère une représentation JSON propre de l’interface de la page.

{  
  "role": "WebArea", 
  "children": [    
    { "role": "textbox", "name": "Email Address" },    
    { "role": "textbox", "name": "Password" },    
    { "role": "button", "name": "Log In" }  
]
}

Étape 4 : le LLM lit le snapshot

Le serveur MCP de Playwright renvoie le snapshot JSON au LLM. Comme les LLM excellent à lire du JSON et à comprendre le contexte, l’agent comprend aussitôt qu’il y a un champ de texte pour une adresse e-mail et un bouton nommé « Log In ».

Étape 5 : l’agent passe à l’action

L’agent décide de sa prochaine action et renvoie une nouvelle commande MCP à Playwright.

await page.getByRole('textbox', { name: 'Email Address' }).fill('ai@example.com');
await page.getByRole('button', { name: 'Log In' }).click();

Playwright exécute ces commandes dans le vrai navigateur, prend un nouveau snapshot d’accessibilité de la page suivante, et la boucle continue jusqu’à ce que la tâche soit terminée.

En résumé

En reliant Playwright et les agents IA grâce au Model Context Protocol, on peut construire une automatisation web remarquablement robuste.

S’appuyer sur les snapshots d’accessibilité plutôt que sur des modèles de vision donne au LLM une carte parfaite, en texte, de l’interface utilisateur. La preuve que, parfois, pour qu’une IA navigue mieux sur le web, il est inutile de lui donner des yeux : il suffit de lui donner une meilleure carte.