Comment utiliser Claude Code avec Playwright MCP : Un guide de configuration complet

Qu’est-ce que Playwright MCP ?

Le serveur Playwright MCP donne à tout client Model Context Protocol les super-pouvoirs d’automatisation de navigateur. Au lieu de demander à une IA de « regarder » des pixels, le serveur retourne des snapshots d’accessibilité structurés de la page, et le modèle interagit avec les éléments par ID de référence. Cela rend la boucle rapide, déterministe et libre de la surcharge des modèles de vision. Il fonctionne avec VS Code, Cursor, Windsurf, Claude Desktop, Claude Code et tout autre client MCP.

Pour Claude Code en particulier, cela signifie que l’agent dans votre terminal peut maintenant ouvrir un navigateur, cliquer, remplir des formulaires, simuler les demandes réseau, capturer des captures d’écran et même exécuter des scripts Playwright personnalisés — tout piloté par des invites en langage naturel.

Conditions préalables

Avant de commencer, assurez-vous que vous avez :

• Node.js 18 ou une version plus récente installée
• Claude Code installé et connecté (exécutez claude dans votre terminal pour vérifier)
• Un terminal dans lequel vous êtes à l’aise de travailler

C’est tout — Playwright MCP télécharge ses propres binaires de navigateur à la première exécution.

Prêt à développer votre entreprise?

Commencez votre essai gratuit aujourd'hui et voyez les résultats en quelques jours.

Demander une démo Se connecter

Configuration de l’intégration Playwright MCP

Connecter Playwright MCP à Claude Code est une commande unique. Suivez ces étapes pour le configurer :

Ajouter le serveur Playwright MCP

Ouvrez votre terminal et exécutez :

claude mcp add playwright npx @playwright/mcp@latest

Cela enregistre un nouveau serveur MCP nommé playwright que Claude Code lance via npx chaque fois qu’il a besoin des outils du navigateur. Le premier appel télécharge le paquet et les binaires de navigateur requis, donc donnez-lui une minute la première fois.

Vérifier la connexion

Démarrez une nouvelle session Claude Code et exécutez la commande /mcp :

claude

/mcp

Vous devriez voir playwright répertorié en tant que serveur connecté, ainsi que les outils qu’il expose (navigation, clic, saisie, captures d’écran, simulation de réseau, et plus).

Optionnel : utiliser une configuration JSON à la place

Si vous préférez éditer directement les fichiers de configuration, le même serveur peut être ajouté à ~/.claude.json (ou à un .mcp.json limité au projet) en utilisant le format MCP standard :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

Redémarrez Claude Code après avoir édité le fichier et le serveur apparaîtra dans /mcp.

Votre première automatisation de navigateur dans Claude Code

Avec le serveur connecté, vos invites peuvent maintenant piloter un vrai navigateur. Essayez l’interaction canonique première de la documentation Playwright :

Accédez à https://demo.playwright.dev/todomvc et ajoutez quelques éléments todo.

Claude Code ouvrira le navigateur, demandera un snapshot d’accessibilité de la page, localisera l’entrée par sa référence d’élément, tapera chaque todo et confirmera le résultat dans le terminal.

Attention sur quel navigateur s’ouvre : par défaut, cela lance Chromium en mode avec interface. Pour le modifier, ajoutez des indicateurs aux args dans votre configuration MCP et redémarrez Claude Code : --headless pour masquer la fenêtre, ou --browser=firefox|webkit|msedge pour changer de moteur.

Comment fonctionnent les snapshots d’accessibilité

Lorsqu’un outil Playwright MCP s’exécute, il retourne un snapshot structuré de la page — rôles d’éléments, contenu texte et ID de référence — au lieu de pixels. Claude lit le snapshot et utilise des références comme ref=e5 pour taper dans la zone de texte ou ref=e10 pour basculer la case à cocher. Pas de poussée de pixels, pas de sélecteurs CSS fragiles — juste l’état de la page structuré sur lequel le modèle peut raisonner.

Rejoignez notre newsletter

Recevez gratuitement les derniers conseils, tendances et offres.

Adresse e-mail

S'abonner

Capacités principales que vous pouvez utiliser depuis Claude Code

Une fois Playwright MCP configuré, les mêmes invites que vous donneriez à un coéquipier fonctionnent dans Claude Code :

• Navigation : « Allez à example.com », « retournez », « rechargez la page ».
• Clic et saisie : « Cliquez sur le bouton Soumettre », « remplissez le champ e-mail avec test@example.com ».
• Captures d’écran : « Prenez une capture d’écran de la section tarification ».
• Clavier et souris : Appuyez sur les touches, survolez, glissez-déposez.
• Onglets et dialogues : Ouvrez de nouveaux onglets, basculez entre eux, acceptez ou rejetez les fenêtres contextuelles.
• Surveillance du réseau : « Énumérez les demandes effectuées depuis le chargement de la page ».
• Simulation d’API : « Simulez le point de terminaison /api/users pour retourner un tableau vide ».
• État de stockage : Enregistrez les sessions authentifiées dans un fichier et rechargez-les ultérieurement.

Pour les workflows qui nécessitent plus qu’un seul appel d’outil, vous pouvez demander à Claude Code d’invoquer browser_run_code et d’exécuter un script Playwright en ligne — utile pour les assertions, l’extraction de données ou tout ce qui bénéficie de quelques lignes de code impératif.

Options de configuration utiles

Playwright MCP a une poignée d’indicateurs utiles à connaître. Ajoutez-les au tableau args dans votre configuration (ou à la commande claude mcp add après --).

Mode sans interface

Le navigateur s’exécute avec interface par défaut pour que vous puissiez voir ce qui se passe. Pour exécuter sans interface — utile pour CI ou les shells distants — passez --headless :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--headless"
      ]
    }
  }
}

Choisir un navigateur

Changez les moteurs avec l’indicateur --browser. Les valeurs prises en charge sont chrome, firefox, webkit et msedge :

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=firefox"
      ]
    }
  }
}

Modes de profil

Playwright MCP prend en charge trois modes de profil :

• Persistant (par défaut) : L’état de connexion et les cookies persistent entre les sessions.
• Isolé : Passez --isolated pour démarrer chaque session à neuf, optionnellement amorcée avec --storage-state.
• Extension de navigateur : Passez --extension pour vous attacher aux onglets de votre navigateur existant via l’extension Playwright MCP Bridge.

Serveur HTTP autonome

Si vous devez exécuter un navigateur avec interface quelque part sans écran attaché (ou depuis un worker IDE), lancez le serveur séparément et connectez-vous via HTTP.

Ouvrez un deuxième terminal — laissez-le fonctionner pendant toute la session — et démarrez le serveur là-bas :

npx @playwright/mcp@latest --port 8931

Gardez ce terminal ouvert. C’est ce qui expose le navigateur sur localhost:8931 pour que vous puissiez voir la session dans votre propre navigateur et pour que Claude Code ait quelque chose auquel se connecter. Fermer le terminal arrête le serveur.

Ensuite, dans le terminal où vous exécutez Claude Code, pointez-le vers le point de terminaison en mettant à jour votre configuration :

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Workflows pratiques à voler

Une fois Playwright MCP connecté, Claude Code peut gérer l’échafaudage des tests de bout en bout, les reproductions de bugs, les vérifications de simulation d’API, les audits de page et les tests de fumée de version — tout ce qui implique de piloter un navigateur et de signaler.

Deux choses rendent ces invites réellement fonctionnelles en pratique. Premièrement, un CLAUDE.md dans la racine de votre projet qui documente votre URL de staging, les identifiants de démonstration et toutes les conventions que l’agent doit suivre — sans cela, « connectez-vous en tant qu’utilisateur de démonstration » n’a rien sur lequel s’appuyer. Deuxièmement, si vous voulez que Claude Code tire le contexte des problèmes ou des tickets, connectez un deuxième serveur MCP pour cela — le serveur GitHub MCP est le choix courant. Ignorez les deux et Claude Code demandera (raisonnablement) ce que le problème #482 est.

Pourquoi associer Claude Code à Playwright MCP ?

Quelques raisons pour lesquelles cette combinaison est difficile à battre :

• Natif au terminal : Tout se passe où vous travaillez déjà. Pas de changement de contexte dans un exécuteur de test séparé.
• Accessibilité en premier : Les snapshots battent les captures d’écran pour la vitesse et la fiabilité, et ils fonctionnent sans modèle de vision.
• Vrai Playwright en dessous : Tout ce que vous pouvez faire avec Playwright dans le code, vous pouvez le faire ici — multi-navigateur, simulation de réseau, état de stockage, et plus.
• Composable avec d’autres serveurs MCP : Empilez Playwright à côté de GitHub, votre base de données ou votre serveur MCP de surveillance et Claude Code peut déplacer le travail de bout en bout sur tous.
• Standard ouvert : MCP est portable. Le même serveur Playwright fonctionne dans Cursor, VS Code, Windsurf et Claude Desktop si vous changez de client.

Ajoutez le serveur, exécutez /mcp pour confirmer, et votre prochaine invite « allez tester la page de connexion » devient une vraie session de navigateur — pilotée par Claude Code, regardée (ou non) en mode avec interface et vérifiable via les snapshots d’accessibilité.