💻 Développement

playwright-browser-automation

Automatisation de navigateur via Playwright MCP — naviguer, cliquer, remplir des formulaires, prendre des captures d'écran et déboguer des pages web.

⚡ Installation & lancement en 1 commande

Copiez-collez dans votre terminal : le skill s'installe dans ~/.claude/skills et Claude Code se lance directement dessus.

macOS / Linux

curl -fsSL https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.sh | sh -s -- playwright-browser-automation --launch

Windows (PowerShell)

iex "& { $(iwr -useb https://raw.githubusercontent.com/khalilbenaz/claude-skills-collection/main/install.ps1) } playwright-browser-automation -Launch"

🚀 Déjà installé ?

claude "/playwright-browser-automation"

Ou tapez /playwright-browser-automation dans une session Claude Code, ou décrivez simplement votre besoin — le skill se déclenche automatiquement via le skill-router.

🔑 Déclencheurs automatiques

Le skill s'active automatiquement quand votre demande contient :

ouvre cette pageteste le formulaireautomatise le navigateurcapture d'écran de la pageremplis le formulaire

📦 Installation manuelle

git clone https://github.com/khalilbenaz/claude-skills-collection.git cp -r claude-skills-collection/dev-skills/playwright-browser-automation ~/.claude/skills/

Source : dev-skills/playwright-browser-automation

📖 Manuel

Automatisation Navigateur avec Playwright

Workflow

Navigation : accéder à la page cible via son URL.
Inspection : obtenir la structure de la page (arbre d'accessibilité) avant toute interaction.
Interaction selon le besoin :

Formulaires : identifier les champs, les remplir, soumettre
Navigation multi-étapes : cliquer, attendre le chargement, enchaîner les actions
Débogage : consulter les messages console, les requêtes réseau, évaluer du JavaScript

Vérification : valider le résultat (message de succès, changement de page, absence d'erreurs).

Bonnes pratiques

Inspection vs Capture d'écran

Besoin	Outil
Comprendre la structure, trouver des éléments	Snapshot (structuré, avec identifiants)
Vérifier l'apparence visuelle, bugs CSS	Capture d'écran (image visuelle)
Les deux	Snapshot d'abord, puis capture si nécessaire

Interaction avec les formulaires

Champ unique : remplir directement avec le texte voulu
Plusieurs champs : utiliser le remplissage groupé pour plus d'efficacité
Menu déroulant : sélectionner par la valeur de l'option
Toujours vérifier le résultat après soumission (message de succès, erreurs)

Débogage web

Naviguer vers la page problématique
Consulter en parallèle :

Les messages de la console JavaScript (erreurs, warnings)
Les requêtes réseau (appels API échoués, codes de statut)

Inspecter la structure de la page pour identifier les états d'erreur
Exécuter du JavaScript personnalisé si nécessaire

Dépannage

Problème	Solution
Navigateur non démarré	Installer le navigateur, puis naviguer vers une URL simple
Éléments introuvables après navigation	Attendre le chargement du contenu asynchrone avant d'inspecter
Sortie trop volumineuse	Naviguer vers une sous-page ou interroger des éléments spécifiques
Domaines internes inaccessibles	Utiliser l'adresse locale directe (ex: 127.0.0.1)

Règles

Toujours inspecter la page avant d'interagir avec ses éléments.
Préférer l'inspection structurée aux captures d'écran pour l'automatisation.
Attendre le chargement complet avant de valider un résultat.
Ne jamais supposer la structure d'une page — toujours vérifier d'abord.