Playwright dans Claude Code : donner un navigateur à l’IA

Playwright dans Claude Code donne à l’assistant un navigateur réel à piloter, capable de naviguer, cliquer et lire une page. Il s’installe en une seule commande via le protocole MCP, ce qui ouvre la voie à des tests visuels ou une vérification concrète de vos interfaces.

Qu’est-ce que le serveur MCP Playwright ?

Le serveur MCP Playwright est un paquet officiel de Microsoft qui donne à Claude Code un contrôle direct sur un navigateur, via le protocole MCP. Contrairement à une approche par capture d’écran, il s’appuie sur l’arbre d’accessibilité de la page, ce qui rend les interactions plus rapides et moins coûteuses en tokens.

Ce serveur ne nécessite aucun compte : il tourne localement sur votre machine via npx, et requiert Node.js 18 ou une version ultérieure.

Comment installer le serveur MCP Playwright dans Claude Code ?

Pour installer le serveur MCP Playwright, lancez la commande suivante dans votre terminal, en dehors d’une session Claude Code déjà ouverte :

claude mcp add playwright npx @playwright/mcp@latest

Cette commande enregistre le serveur et conserve la configuration sur votre machine. Ajoutez --scope project pour que la configuration soit partagée avec votre équipe via un fichier .mcp.json versionné, ou --scope user pour un usage personnel disponible sur tous vos projets.

Comment vérifier que le serveur Playwright est connecté ?

La confirmation « Added » indique que l’entrée a été enregistrée, pas que la connexion fonctionne réellement. Pour vérifier la connexion, lancez claude mcp list depuis votre terminal, ou tapez /mcp à l’intérieur d’une session Claude Code pour voir la liste des outils disponibles.

Une première vérification peut afficher un échec de connexion pendant que npx télécharge le paquet : patientez quelques secondes et relancez la vérification. Une fois connecté, une fenêtre de navigateur s’ouvre visiblement quand Claude utilise l’outil, et les appels apparaissent dans la sortie avec le nom du serveur playwright.

Comment pré-approuver les permissions Playwright ?

Par défaut, Claude Code demande une confirmation à chaque première utilisation des outils Playwright. Pour éviter ces confirmations répétées, ajoutez le serveur à la liste d’autorisation dans .claude/settings.local.json :

{ "permissions": { "allow": ["mcp__playwright"], "deny": [] } }

Le double underscore dans mcp__playwright n’est pas une coquille : c’est la syntaxe utilisée pour désigner les outils d’un serveur MCP dans les règles de permission.

Comment utiliser Playwright avec Claude Code au quotidien ?

Une fois connecté, Playwright permet de demander à Claude Code de naviguer vers votre serveur de développement local pour vérifier qu’une page s’affiche correctement après une modification, ou de reproduire pas à pas un bug signalé. L’assistant peut aussi générer du code de test à partir de ce qu’il observe dans le navigateur.

L’authentification reste simple : laissez Claude afficher une page de connexion, connectez-vous vous-même avec vos identifiants, puis indiquez-lui la suite des étapes à effectuer.

Quel est le piège le plus courant avec Playwright MCP ?

Le piège le plus courant consiste à ne pas mentionner explicitement Playwright dans votre premier message, ce qui pousse parfois Claude Code à essayer de piloter Playwright via des commandes Bash plutôt que par le serveur MCP. Précisez « utilise Playwright MCP » dans votre première demande pour éviter ce comportement.

Autre point de vigilance : il existe un paquet communautaire différent, @executeautomation/playwright-mcp-server, avec une API distincte. Le paquet officiel de Microsoft utilisé dans ce guide est @playwright/mcp.

Faut-il partager la configuration Playwright avec son équipe ?

Partager la configuration a du sens dès que plusieurs personnes de l’équipe utilisent Claude Code sur le même projet pour des vérifications visuelles ou la génération de tests. Committez le fichier .mcp.json dans votre dépôt : les collègues qui clonent le projet et lancent Claude Code verront une invite pour approuver le serveur, puis la connexion se fera automatiquement pour eux aussi.

Pour la documentation complète sur la connexion de serveurs MCP, y compris les serveurs hébergés nécessitant une authentification, consultez le guide officiel de démarrage MCP dans Claude Code.

Questions fréquentes