Comment utiliser OpenClaw pour l'automatisation du navigateur

Ce que tu vas construire

Un systeme d'automatisation de navigateur qui permet a OpenClaw de :

1. Naviguer sur des sites — ouvrir des pages, cliquer sur des boutons, remplir des formulaires, defiler dans le contenu
2. Extraire des donnees — scraper des donnees structurees depuis des pages web, tableaux et dashboards
3. Prendre des captures d'ecran — capturer des captures pleine page ou d'elements specifiques pour le reporting
4. Executer des workflows multi-etapes — chainer des actions de navigateur en sequences d'automatisation complexes

A la fin de ce guide, tu pourras automatiser n'importe quelle tache de navigateur en decrivant ce que tu veux en langage naturel.

Pourquoi utiliser l'IA pour l'automatisation du navigateur

Les outils traditionnels d'automatisation de navigateur (Selenium, Puppeteer, Playwright) sont puissants mais necessitent d'ecrire et de maintenir du code pour chaque workflow. Quand le site change de mise en page, tes scripts cassent. Quand tu as besoin d'un nouveau workflow, tu ecris un nouveau script.

L'automatisation de navigateur par IA change la donne :

• Instructions en langage naturel — decris ce que tu veux au lieu d'ecrire des selecteurs et des gestionnaires de clics
• Auto-reparation — l'IA s'adapte aux changements d'interface sans mise a jour des scripts
• Zero maintenance de code — les workflows sont definis par l'intention, pas par l'implementation
• Prototypage rapide — mets en place une nouvelle automatisation en minutes, pas en heures
• Comprehension visuelle — l'IA peut interpreter la mise en page, lire le texte des captures d'ecran et prendre des decisions en fonction de ce qu'elle voit

Prerequis

• OpenClaw installe et configure (Guide de demarrage)
• Chrome ou Chromium installe sur ton systeme
• Node.js 18+

Etape 1 : Installer les Skills necessaires

# 1. Controle du navigateur
npx clawhub@latest install browser-use

# 2. Extraction de donnees web
npx clawhub@latest install web-scraper

# 3. Capture d'ecran
npx clawhub@latest install screenshot

Etape 2 : Verifier la configuration du navigateur

Le Skill browser-use a besoin d'une installation de Chrome/Chromium :

clawhub inspect browser-use

Cette commande verifie la presence d'un navigateur compatible et affiche le chemin detecte. Si Chrome n'est pas trouve automatiquement, definis le chemin manuellement dans la configuration du Skill.

Etape 3 : L'automatisation du navigateur en action

Exemple 1 : Extraire des donnees d'un dashboard

Suppose que tu dois recuperer des metriques d'un dashboard web chaque matin :

Ouvre https://analytics.example.com, connecte-toi avec mes identifiants enregistres,
va sur la page Daily Metrics, et extrais le tableau des KPIs d'hier
sous forme de tableau Markdown.

Le Skill navigateur gere la connexion, la navigation et l'extraction de donnees. Le resultat est un tableau Markdown propre que tu peux coller dans tes rapports ou Slack.

Exemple 2 : Surveiller la page de tarifs d'un concurrent

Va sur competitor.com/pricing, prends une capture d'ecran du tableau des tarifs,
et extrais tous les noms de plans, prix et listes de fonctionnalites au format JSON.

Resultat :

{
  "plans": [
    {
      "name": "Starter",
      "price": "$29/month",
      "features": ["5 users", "10GB storage", "Email support"]
    },
    {
      "name": "Professional",
      "price": "$79/month",
      "features": ["25 users", "100GB storage", "Priority support", "API access"]
    },
    {
      "name": "Enterprise",
      "price": "Custom",
      "features": ["Unlimited users", "Unlimited storage", "24/7 support", "SSO", "Audit logs"]
    }
  ]
}

Exemple 3 : Remplir un formulaire

Ouvre le formulaire interne de note de frais a expenses.company.com,
remplis : date = aujourd'hui, categorie = "Software", montant = $49.99,
description = "Abonnement ClawHub Pro", puis soumets.

Exemple 4 : Workflow de recherche multi-etapes

1. Cherche sur Google "best CI/CD tools 2026 comparison"
2. Ouvre les 3 premiers resultats
3. Extrais les principaux points de comparaison de chaque article
4. Compile le tout dans un tableau recapitulatif

Etape 4 : Captures d'ecran pour le reporting

Le Skill screenshot capture des preuves visuelles pour le reporting et la surveillance :

# Capture pleine page
clawhub run screenshot --url "https://status.example.com" --full-page

# Element specifique
clawhub run screenshot --url "https://grafana.example.com/d/api-latency" --selector ".panel-container"

# Plusieurs pages
clawhub run screenshot --urls "url1,url2,url3" --output "./screenshots/"

Surveillance visuelle planifiee

Combine avec cron pour capturer des snapshots quotidiens :

clawhub run cron --schedule "0 9 * * *" --task "screenshot --url https://status.example.com --output ~/snapshots/{{date}}.png"

Avance : Workflows complexes

Chainer des actions de navigateur

Pour les workflows multi-etapes qui doivent s'executer de maniere fiable :

# .openclaw/browser-workflow.yml
workflow:
  name: "Daily Metrics Collection"
  steps:
    - action: navigate
      url: "https://analytics.example.com"
    - action: login
      credentials: "analytics_dashboard"
    - action: click
      target: "Daily Report tab"
    - action: wait
      condition: "table is fully loaded"
    - action: extract
      target: "metrics table"
      format: "csv"
    - action: screenshot
      target: "full page"
    - action: save
      output: "~/reports/{{date}}-metrics.csv"

Gestion de l'authentification

Pour les sites qui necessitent une connexion :

credentials:
  analytics_dashboard:
    url: "https://analytics.example.com/login"
    username_field: "#email"
    password_field: "#password"
    # Credentials stored in OpenClaw's secure credential store

Utilise clawhub credentials set analytics_dashboard pour stocker les identifiants de connexion de maniere securisee.

Travailler avec les SPA et le contenu dynamique

Les applications monopage modernes chargent le contenu dynamiquement. Le Skill navigateur gere cela automatiquement en :

• Attendant la fin des requetes reseau
• Detectant quand la page est entierement rendue
• Reessayant si le contenu n'a pas encore charge

Pour les pages particulierement lentes, tu peux definir des conditions d'attente explicites :

Va sur le dashboard et attends que le graphique intitule "Revenue" soit visible avant de prendre une capture d'ecran.

Depannage

Le navigateur ne se lance pas

• Verifie que Chrome/Chromium est installe : which google-chrome ou which chromium
• Verifie le chemin dans la config du Skill : clawhub inspect browser-use
• Sur les serveurs headless, assure-toi que le flag --no-sandbox est active dans la configuration

Le contenu de la page ne charge pas

• Certaines pages necessitent JavaScript — le Skill navigateur lance un vrai navigateur, donc ca devrait fonctionner par defaut
• Verifie s'il y a une banniere de consentement aux cookies qui bloque le contenu
• Verifie que l'URL est accessible depuis ta machine (VPN, pare-feu)

Les captures d'ecran sont vides ou incompletes

• Ajoute un temps d'attente avant la capture : la page est peut-etre encore en cours de rendu
• Utilise le flag --full-page pour les pages qui necessitent un defilement
• Verifie si la page necessite une authentification

L'extraction retourne des donnees incorrectes

• Sois plus precis sur l'element a extraire
• Utilise des references visuelles : "le tableau dans la deuxieme section" ou "la carte de tarifs a droite"
• Pour les pages complexes, prends d'abord une capture d'ecran pour verifier l'etat de la page, puis extrais