Tutoriel 26 — OpenClaw Skill Agent Browser : automatisation avancée du navigateur sans interface, avec rendu dynamique et sessions de connexion (2026)

Objectif : installer le Skill Agent Browser, utiliser les instantanés Accessibility Tree et les références ref pour piloter précisément les éléments web, et traiter les pages nécessitant un rendu JavaScript ou une connexion.

Différence entre Agent Browser et les outils navigateur intégrés

La différence entre openclaw agent browser et le navigateur intégré peut s'expliquer en un tableau :

Dimension	Outils navigateur intégrés (tutoriel 04)	Agent Browser (ce tutoriel)
Type de page	HTML statique	Rendu dynamique (React/Vue/Angular)
Session de connexion	Non supporté	Supporté, peut sauvegarder session/cookie
Mode d'opération	Capture d'écran + clic par coordonnées	Accessibility Tree + références ref
Précision des opérations	Moyenne, risque de décalage de coordonnées	Haute, référence directe aux éléments DOM
Stratégie d'attente	Délai fixe	Attente intelligente (réseau inactif/élément visible)
Cas d'usage	Extraction rapide de contenu statique	Soumission de formulaires, opérations post-connexion, SPA

Si vous rencontrez des échecs de scraping de pages à rendu dynamique JavaScript avec openclaw, ou si vous avez besoin de simuler une connexion, il faut passer du tutoriel 04 à l'Agent Browser de ce tutoriel.

Concept fondamental : qu'est-ce que l'Accessibility Tree ?

La base du tutoriel sur les opérations agent browser avec Accessibility Tree est de comprendre pourquoi ne pas utiliser de captures d'écran.

Le problème avec les captures d'écran : l'IA doit identifier les coordonnées de chaque élément dans la capture — le moindre défilement ou changement de zoom décale les coordonnées et provoque un échec de clic.

L'Accessibility Tree (arbre d'accessibilité) est la description structurée des pages maintenue par le navigateur pour les outils d'accessibilité (lecteurs d'écran, etc.). Il contient pour chaque élément :

Son rôle (button, input, link, heading...)
Son contenu textuel
Un identifiant ref unique
Son état (visible, désactivé, sélectionné...)

Extrait exemple :

[ref=e23] button "Se connecter" (activé)
[ref=e24] input type="text" placeholder="Email" value=""
[ref=e25] input type="password" placeholder="Mot de passe" value=""
[ref=e26] checkbox "Se souvenir de moi" (non coché)

Avec ref, un clic devient click ref=e23 — fiable quelle que soit la mise en page. C'est pourquoi Agent Browser est bien plus précis que les captures d'écran.

Étape 1 : Installer les dépendances (Playwright)

Le Skill Agent Browser nécessite le navigateur sans interface Playwright :

npm install -g playwright
npx playwright install chromium

Vérification :

npx playwright --version
# Affiche le numéro de version, ex. 1.41.0

Si vous préférez Puppeteer :

npm install -g puppeteer

Le Skill détecte automatiquement le pilote de navigateur installé.

Étape 2 : Installer le Skill

/install @matrixy/agent-browser-clawdbot

Vérification :

pnpm openclaw skills list
# Le Skill agent-browser-clawdbot devrait apparaître

Étape 3 : Usage de base — naviguer et obtenir la structure de la page

Flux de base pour scraper des pages à rendu dynamique avec openclaw :

Ouvre https://example.com avec Agent Browser et donne-moi un instantané de la structure de la page

Exécution sous-jacente :

/browser navigate https://example.com
/browser snapshot

Exemple de résultat (extrait de l'Accessibility Tree) :

[ref=e1]  heading "Example Domain" niveau=1
[ref=e2]  paragraph "Ce domaine est utilisé pour des exemples illustratifs..."
[ref=e3]  link "Plus d'informations..." href="https://www.iana.org/domains/example"

Contrairement au tutoriel 04, ce n'est pas une capture d'écran mais du texte structuré — l'IA peut localiser précisément n'importe quel élément.

Étape 4 : Clics précis (avec références ref)

Après l'instantané, utilisez les références ref pour opérer sur les éléments, pas les coordonnées :

Clique sur le lien "Plus d'informations" de la page

OpenClaw trouve le [ref=e3] correspondant et exécute :

/browser click ref=e3

Remplir un formulaire (opération combinée) :

Saisis "Tutoriel OpenClaw" dans le champ de recherche, puis clique sur le bouton de recherche

Exécution équivalente :

/browser type ref=e12 text="Tutoriel OpenClaw"
/browser click ref=e15

C'est le cœur du tutoriel sur les opérations Agent Browser avec Accessibility Tree — toutes les opérations sont basées sur des références ref, sans dépendance aux coordonnées.

Étape 5 : Gérer les connexions (sauvegarder la session)

Flux standard pour simuler une connexion avec un navigateur sans interface openclaw :

Connecte-toi à https://app.exemple.com avec Agent Browser,
identifiant : utilisateur@exemple.com, mot de passe : monmotdepasse,
après connexion réussie, sauvegarde la session

Étapes d'exécution OpenClaw :

/browser navigate https://app.exemple.com/login
/browser snapshot
# Trouve le champ email [ref=e24] et le champ mot de passe [ref=e25]
/browser type ref=e24 text="utilisateur@exemple.com"
/browser type ref=e25 text="monmotdepasse"
/browser click ref=e23  # Bouton de connexion
/browser save-session --name "app-exemple"

Après la sauvegarde de session, réutilisez-la directement lors des prochaines opérations :

/browser load-session --name "app-exemple"
/browser navigate https://app.exemple.com/tableau-de-bord

Étape 6 : Stratégies d'attente pour les pages à rendu dynamique

Pour l'automatisation de sites nécessitant un rendu JavaScript avec openclaw, le problème le plus courant est « capture/instantané pris avant le chargement du contenu ». Agent Browser propose plusieurs stratégies d'attente :

Attendre la fin des requêtes réseau (adapté aux SPA pilotées par API) :

/browser navigate https://app.exemple.com/tableau-données --wait-for network-idle

Attendre l'apparition d'un élément spécifique (adapté au contenu chargé de façon asynchrone) :

/browser wait-for-element --text "Données chargées"
/browser wait-for-element --ref-role "table"

Délai fixe (solution de repli) :

/browser wait 2000

Étape 7 : Pratique — remplir et soumettre automatiquement un formulaire

Exemple complet de soumission de formulaire avec un navigateur sans interface openclaw :

Ouvre https://formulaires.exemple.com/contact avec Agent Browser,
remplis les informations suivantes et soumets :
- Nom : Jean Dupont
- Email : jean.dupont@société.fr
- Message : Je souhaite en savoir plus sur vos offres de partenariat entreprise — merci de demander à votre équipe commerciale de me contacter.

Processus d'exécution OpenClaw :

/browser navigate https://formulaires.exemple.com/contact
/browser snapshot
# Identification des références des champs du formulaire

/browser type ref=e10 text="Jean Dupont"
/browser type ref=e11 text="jean.dupont@société.fr"
/browser type ref=e12 text="Je souhaite en savoir plus sur vos offres de partenariat entreprise..."
/browser click ref=e20  # Bouton de soumission

/browser wait-for-element --text "Formulaire envoyé avec succès"
/browser snapshot  # Confirmer le résultat de soumission

Questions fréquentes

Quelle est la différence entre OpenClaw Agent Browser et l'automatisation du tutoriel 04 ?

Les outils navigateur intégrés du tutoriel 04 fonctionnent par captures d'écran et clics par coordonnées — adaptés à l'extraction rapide de contenu web statique, simples à configurer, prêts à l'emploi. Agent Browser utilise Playwright pour piloter Chrome sans interface — via l'Accessibility Tree plutôt que des captures, il supporte les pages dynamiques à rendu JavaScript, le maintien de session et la réutilisation de cookies, avec une précision d'opération bien supérieure. Si vous n'avez besoin que de lire des pages statiques, le tutoriel 04 suffit. Pour les connexions, la saisie de formulaires et les SPA, Agent Browser est nécessaire.

Le Skill Agent Browser peut-il traiter les sites nécessitant une connexion ?

Oui. Agent Browser supporte le flux de connexion complet : navigation vers la page de connexion → saisie des identifiants → soumission → sauvegarde de session. La session sauvegardée contient les cookies et données localStorage — lors des prochaines opérations sur le même site, chargez-la directement sans reconnexion. La session est chiffrée et stockée localement dans ~/.openclaw/sessions/ — aucun envoi vers le cloud. Attention : certains sites détectent les navigateurs automatisés (Bot Detection). Dans ce cas, activez le mode furtif (stealth) dans les paramètres du Skill.

Qu'est-ce que l'Accessibility Tree ? Pourquoi est-il meilleur que les captures d'écran ?

L'Accessibility Tree est l'arbre structurel des pages maintenu par le navigateur pour les outils d'accessibilité. Chaque élément UI a une référence ref unique, un type de rôle et un contenu textuel. Il est supérieur aux captures d'écran pour trois raisons : premièrement, les références ref ne sont pas affectées par le défilement ou le zoom — la stabilité des opérations est bien supérieure aux coordonnées ; deuxièmement, le contenu textuel est directement compréhensible par l'IA, sans OCR ; troisièmement, les états des éléments masqués ou en cours de rendu sont accessibles, facilitant l'évaluation de l'état de chargement. En résumé, une capture d'écran dit à l'IA « à quoi ressemble la page », l'Accessibility Tree dit à l'IA « quels éléments contient la page et comment s'appellent-ils ».

Faut-il installer Chrome séparément ?

Non. Lors de l'exécution de npx playwright install chromium, Playwright télécharge un binaire Chromium indépendant (~150 Mo), complètement isolé du navigateur système — votre Chrome habituel n'est pas affecté. Si vous souhaitez réutiliser un Chrome déjà installé sur votre système, vous pouvez spécifier executablePath dans la configuration du Skill Agent Browser — mais ce n'est généralement pas nécessaire.

Prochaines étapes

Retour à la liste de tous les tutoriels — Voir tous les tutoriels OpenClaw
Tutoriel 25 — Utilisez API Gateway pour vous connecter à 100+ services SaaS sans configuration