Automatisation de navigateur avec agent-browser

Automatisation complète du navigateur pour les tests, l'extraction de données et l'interaction web.

Démarrage rapide

agent-browser open <url>        # Accéder à une page
agent-browser snapshot -i       # Obtenir les éléments interactifs avec références
agent-browser click @e1         # Cliquer sur un élément par référence
agent-browser fill @e2 "text"   # Remplir une entrée par référence
agent-browser close             # Fermer le navigateur

Flux de travail principal

Naviguer : agent-browser open <url>
Snapshot : agent-browser snapshot -i (retourne les éléments avec références comme @e1, @e2)
Interagir en utilisant les références du snapshot
Re-snapshot après une navigation ou des changements DOM importants

Installation

# Installer globalement
npm install -g agent-browser

# Ou utiliser via npx
npx agent-browser open https://example.com

Référence des commandes

Navigation

agent-browser open <url>      # Accéder à une URL
agent-browser back            # Revenir en arrière
agent-browser forward         # Aller en avant
agent-browser reload          # Recharger la page
agent-browser close           # Fermer le navigateur

Analyse de page (Snapshot)

agent-browser snapshot            # Arborescence d'accessibilité complète
agent-browser snapshot -i         # Éléments interactifs uniquement (RECOMMANDÉ)
agent-browser snapshot -c         # Sortie compacte
agent-browser snapshot -d 3       # Limiter la profondeur à 3
agent-browser snapshot -s "#main" # Limiter à un sélecteur CSS

Interactions (Utiliser les @refs du Snapshot)

# Cliquer
agent-browser click @e1           # Cliquer
agent-browser dblclick @e1        # Double-clic
agent-browser hover @e1           # Survoler

# Focus
agent-browser focus @e1           # Focus sur l'élément

# Saisie de texte
agent-browser fill @e2 "text"     # Effacer et taper
agent-browser type @e2 "text"     # Taper sans effacer

# Clavier
agent-browser press Enter         # Appuyer sur une touche
agent-browser press Control+a     # Combinaison de touches
agent-browser keydown Shift       # Maintenir une touche enfoncée
agent-browser keyup Shift         # Relâcher une touche

# Formulaires
agent-browser check @e1           # Cocher une case
agent-browser uncheck @e1         # Décocher une case
agent-browser select @e1 "value"  # Sélectionner une option de liste déroulante

# Défilement
agent-browser scroll down 500     # Faire défiler la page
agent-browser scrollintoview @e1  # Faire défiler l'élément dans la vue

# Autre
agent-browser drag @e1 @e2        # Glisser-déposer
agent-browser upload @e1 file.pdf # Télécharger des fichiers

Obtenir des informations

agent-browser get text @e1        # Obtenir le texte de l'élément
agent-browser get html @e1        # Obtenir le innerHTML
agent-browser get value @e1       # Obtenir la valeur de l'entrée
agent-browser get attr @e1 href   # Obtenir un attribut
agent-browser get title           # Obtenir le titre de la page
agent-browser get url             # Obtenir l'URL actuelle
agent-browser get count ".item"   # Compter les éléments correspondants
agent-browser get box @e1         # Obtenir la boîte englobante

Vérifier l'état

agent-browser is visible @e1      # Vérifier la visibilité
agent-browser is enabled @e1      # Vérifier si activé
agent-browser is checked @e1      # Vérifier si coché

Captures d'écran et PDF

agent-browser screenshot          # Capture vers stdout
agent-browser screenshot path.png # Enregistrer dans un fichier
agent-browser screenshot --full   # Page complète
agent-browser pdf output.pdf      # Enregistrer en PDF

Enregistrement vidéo

agent-browser record start ./demo.webm    # Démarrer l'enregistrement
agent-browser click @e1                   # Effectuer les actions
agent-browser record stop                 # Arrêter et enregistrer la vidéo
agent-browser record restart ./take2.webm # Arrêter actuel + démarrer nouveau

Attendre

agent-browser wait @e1                     # Attendre un élément
agent-browser wait 2000                    # Attendre en millisecondes
agent-browser wait --text "Success"        # Attendre du texte
agent-browser wait --url "**/dashboard"    # Attendre un motif d'URL
agent-browser wait --load networkidle      # Attendre que le réseau soit inactif
agent-browser wait --fn "window.ready"     # Attendre une condition JavaScript

Cookies et stockage

agent-browser cookies                     # Obtenir tous les cookies
agent-browser cookies set name value      # Définir un cookie
agent-browser cookies clear               # Effacer les cookies
agent-browser storage local               # Obtenir tout le localStorage
agent-browser storage local key           # Obtenir une clé spécifique
agent-browser storage local set k v       # Définir une valeur
agent-browser storage local clear         # Effacer tout

Réseau

agent-browser network route <url>              # Intercepter les requêtes
agent-browser network route <url> --abort      # Bloquer les requêtes
agent-browser network route <url> --body '{}'  # Simuler une réponse
agent-browser network unroute [url]            # Supprimer les routes
agent-browser network requests                 # Afficher les requêtes suivies
agent-browser network requests --filter api    # Filtrer les requêtes

Paramètres du navigateur

agent-browser set viewport 1920 1080      # Définir la taille de la fenêtre
agent-browser set device "iPhone 14"      # Émuler un appareil
agent-browser set geo 37.7749 -122.4194   # Définir la géolocalisation
agent-browser set offline on              # Basculer le mode hors ligne
agent-browser set headers '{"X-Key":"v"}' # En-têtes HTTP supplémentaires
agent-browser set credentials user pass   # Authentification HTTP basique
agent-browser set media dark              # Émuler le schéma de couleur

Onglets et fenêtres

agent-browser tab                 # Lister les onglets
agent-browser tab new [url]       # Nouvel onglet
agent-browser tab 2               # Basculer vers l'onglet 2
agent-browser tab close           # Fermer l'onglet
agent-browser window new          # Nouvelle fenêtre

Cadres

agent-browser frame "#iframe"     # Basculer vers une iframe
agent-browser frame main          # Revenir au cadre principal

Dialogues

agent-browser dialog accept [text]  # Accepter le dialogue
agent-browser dialog dismiss        # Rejeter le dialogue

Exécution JavaScript

agent-browser eval "document.title"   # Exécuter JavaScript

Exemples de flux de travail

Soumission de formulaire

agent-browser open https://example.com/form
agent-browser snapshot -i
# La sortie montre : textbox "Email" [ref=e1], textbox "Password" [ref=e2], button "Submit" [ref=e3]

agent-browser fill @e1 "user@example.com"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Vérifier le résultat

Authentification avec état sauvegardé

# Se connecter une fois
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "username"
agent-browser fill @e2 "password"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# Sessions ultérieures : charger l'état sauvegardé
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard

Scraper des données

agent-browser open https://example.com/products
agent-browser snapshot -i --json > page_structure.json

# Obtenir des données spécifiques
agent-browser get text @e5  # Titre du produit
agent-browser get attr @e6 href  # Lien du produit

Prendre une capture d'écran de page complète

agent-browser open https://example.com
agent-browser wait --load networkidle
agent-browser screenshot --full fullpage.png

Tester un flux de connexion

# Accéder à la page de connexion
agent-browser open https://app.example.com/login

# Prendre un snapshot initial
agent-browser snapshot -i

# Remplir les identifiants
agent-browser fill @e1 "test@example.com"
agent-browser fill @e2 "testpassword"

# Cliquer sur connexion
agent-browser click @e3

# Attendre la redirection
agent-browser wait --url "**/dashboard"

# Vérifier la connexion
agent-browser get text @e10  # Doit afficher le nom d'utilisateur

Débogage

agent-browser open example.com --headed              # Afficher la fenêtre du navigateur
agent-browser console                                # Afficher les messages de la console
agent-browser console --clear                        # Effacer la console
agent-browser errors                                 # Afficher les erreurs de page
agent-browser errors --clear                         # Effacer les erreurs
agent-browser highlight @e1                          # Mettre en évidence un élément
agent-browser trace start                            # Démarrer l'enregistrement de la trace
agent-browser trace stop trace.zip                   # Arrêter et enregistrer la trace
agent-browser --cdp 9222 snapshot                    # Se connecter via CDP

Sessions (navigateurs parallèles)

agent-browser --session test1 open site-a.com
agent-browser --session test2 open site-b.com
agent-browser session list

Sortie JSON

Ajouter --json pour une sortie lisible par machine :

agent-browser snapshot -i --json
agent-browser get text @e1 --json

Localisateurs sémantiques (alternative aux références)

agent-browser find role button click --name "Submit"
agent-browser find text "Sign In" click
agent-browser find label "Email" fill "user@test.com"
agent-browser find first ".item" click
agent-browser find nth 2 "a" text

Bonnes pratiques

Toujours faire un snapshot d'abord : Obtenir l'état actuel de la page avant d'interagir
Utiliser le mode interactif (-i) : Affiche uniquement les éléments cliquables/remplissables
Attendre correctement : Utiliser --load networkidle après une navigation
Re-snapshot après les changements : Les mises à jour du DOM invalident les références
Enregistrer l'état d'authentification : Éviter les connexions répétées
Utiliser --headed pour le débogage : Voir ce que le navigateur voit
Vérifier la console pour les erreurs : agent-browser console révèle les problèmes

Quand utiliser cette skill

Tester les applications web de bout en bout
Automatiser les tâches web répétitives
Scraper les données des sites web
Déboguer les problèmes frontend
Prendre des captures d'écran pour la documentation
Enregistrer des vidéos de démonstration
Vérifier la fonctionnalité de l'interface utilisateur
Remplir les formulaires par programmation

Désactiver les MCPs conflictuels

Si Chrome DevTools ou Playwright MCP est activé, demander à l'utilisateur s'il souhaite le désactiver pour économiser du contexte. Cette skill couvre les mêmes fonctionnalités.

Lui demander d'exécuter :

/mcp

S'il voit chrome-devtools ou playwright listés, lui suggérer de les supprimer :

/mcp remove chrome-devtools
/mcp remove playwright

Ne pas exécuter ces commandes vous-même. Laisser l'utilisateur décider de désactiver le MCP.

browser-navigation