Configurer et tester Playwright MCP dans Claude Code

Choisissez où le serveur doit être disponible avant de lancer claude mcp add. Pour un essai privé dans un projet, utilisez local. Pour une configuration que vos collègues pourront examiner et approuver, choisissez project. Pour un outil privé accessible dans plusieurs projets, choisissez user. Vérifiez ensuite la connexion, puis un résultat produit par le navigateur.

Une personne a placé --isolated parmi les options de Claude et reçu une erreur d’option inconnue. Cet argument revient à Playwright après le séparateur. Tabbit Browser sert plus loin d’exemple pour le cas d’un onglet déjà connecté. Discussion d’origine

À retenir

• Commencez à la racine du projet. Local et project dépendent tous deux du projet, mais ne partagent pas le même stockage.

• Placez --scope et --transport avant --. Passez --headless et --isolated à la commande du serveur.

• Une entrée peut être présente alors que son exécutable échoue. Consultez claude mcp list puis les outils de la session.

• Utilisez une page publique et vérifiez le résultat dans la trace de l’outil.

• Pour un premier essai, choisissez une portée privée et un état de navigateur temporaire.

Choisir la portée

Par défaut, Claude Code choisit local. L’entrée reste attachée à ce projet. Si plusieurs portées contiennent le même nom, l’ordre de priorité est local, puis project, puis user. Une entrée prioritaire peut expliquer pourquoi la commande visible diffère de celle que vous venez de modifier. Documentation des portées Claude Code

Le serveur Playwright MCP peut servir plusieurs clients, chacun avec sa syntaxe de configuration. Le guide Playwright MCP pour Codex utilise TOML. Le fichier de projet Claude Code utilise JSON.

Enregistrer un serveur privé

Vérifiez que la même fenêtre de terminal trouve Claude Code et npx. Le guide Playwright demande Node.js 20 ou plus récent. La commande fixe la version du test et ouvre un navigateur sans fenêtre et avec un état temporaire. Installation de Playwright MCP

claude --version
node --version
claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
claude mcp list

Claude lit les options à gauche de --. À droite, il passe la commande et les arguments au serveur. Face à unknown option '--headless', vérifiez d’abord la position du séparateur. Headless contrôle l’affichage de la fenêtre. Isolated contrôle l’état temporaire du navigateur. Syntaxe stdio d’Anthropic

Partager le lanceur avec l’équipe

Placez une entrée équivalente dans .mcp.json ou utilisez --scope project à l’enregistrement. Chacun peut lire l’exécutable et ses paramètres puis approuver le serveur dans le projet. Évitez les secrets et chemins locaux dans le fichier partagé. Démarrage rapide de Claude Code

{
  "mcpServers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]
    }
  }
}

Le fichier définit le lancement. Le compte et les droits relèvent de la session du navigateur et des politiques de l’organisation. Pour un site privé, préparez séparément un profil de test autorisé. Le guide des profils et des espaces précise quelles données peuvent appartenir au profil ou à l’onglet.

Vérifier la connexion sur une page publique

Démarrez une nouvelle session dans le projet configuré. Repérez Playwright dans /mcp. Nommez le serveur dans une demande de lecture pour éviter que l’assistant utilise la recherche web ou le terminal à sa place.

Utilise Playwright MCP pour ouvrir
https://www.selenium.dev/selenium/web/web-form.html.
Indique l’URL finale et le premier en-tête visible dans la sortie de l’outil.
Ne remplis et n’envoie rien. Arrête-toi après la lecture.

L’en-tête attendu est Web form. Si la navigation indique seulement le chemin d’une capture, demandez browser_snapshot. Avant un clic, vérifiez l’outil appelé, l’adresse et l’en-tête. Le guide des navigateurs agentiques explique l’usage de cette observation.

Le test a utilisé Claude Code 2.1.318, Node.js 22 et Playwright MCP 0.0.84. Claude Code a enregistré les portées et contrôlé la connexion dans un projet temporaire. Une sonde de protocole a démarré la commande exacte du fichier de projet, découvert browser_navigate et browser_snapshot, puis lu Web form. Aucun formulaire n’a été envoyé et aucun tour du modèle Claude n’a été lancé.

Dans le projet, l’entrée local s’est connectée et l’entrée project attendait une approbation. Dans un autre dossier, seule l’entrée user apparaissait.

Diagnostiquer le premier résultat manquant

Le test comprenait un serveur dont l’exécutable était absent. La configuration existait et le contrôle de connexion a échoué. En plaçant --headless du côté des options Claude, la commande a été rejetée avant le démarrage. L’un de ces symptômes concerne le lanceur, l’autre l’analyse de la commande.

Une personne a signalé que claude mcp list montrait parfois un serveur connecté, alors que le /mcp de sa session active ne le listait pas. Comparez ces deux résultats avant de modifier de nouveau le fichier. Discussion d’origine

La recherche d’outils de Claude Code peut charger une définition MCP au moment où elle devient nécessaire. Dans une session neuve, demandez une lecture précise et cherchez le nom de l’outil dans la trace. Si une règle bloque l’action, identifiez la permission en cause. Comparez les autres outils d’automatisation si le serveur configuré ne répond pas au besoin. Recherche d’outils selon Anthropic

Quand relier un onglet existant

Le mode isolé sert à reproduire une action sur une page publique. Si le travail commence dans un tableau de bord déjà connecté, définissez l’onglet, le compte et l’espace à partager. Confirmez-les par une lecture avant toute modification. Le guide de connexion à un navigateur existant détaille ce contrôle.

Tabbit Browser propose une autre connexion pour les agents compatibles, dont Claude Code. Ce chemin est utile si vous avez déjà l’onglet voulu dans Tabbit. La vidéo d’une saisie dans un compte vendeur montre comment vérifier la valeur après avoir rouvert la liste. Elle utilise un autre agent de programmation pour illustrer le contrôle dans le navigateur. Démarrage de Tabbit

Commencez par une entrée local et une page publique. Passez à project après revue, ou à user si plusieurs projets en ont besoin. Si la tâche demande un compte déjà connecté, choisissez une connexion autorisée à cette session. Gardez un résultat vérifiable à chaque essai d’automatisation du navigateur.

Secholar.L

Croissance et contenu chez Tabbit

Secholar.L rédige des guides pratiques sur les navigateurs IA et les workflows agentiques, en comparant les outils sur la base de recherches réelles et de sources vérifiables.