Claude + Playwright : piloter et tester un navigateur via MCP
Vous décrivez un parcours web. Claude ouvre un vrai navigateur, clique, remplit, vérifie le résultat et écrit le test correspondant. Le serveur MCP Playwright, publié par Microsoft, lit la structure d’accessibilité de la page plutôt que des captures d’écran. Voici comment le configurer dans Claude Code ou Claude Desktop, ce qu’il permet, ses limites et ses alternatives.
Écrire et maintenir des tests de bout en bout coûte cher. Il faut connaître les sélecteurs, gérer les attentes et mettre à jour le code à chaque évolution de l’interface. Le serveur MCP Playwright confie une partie de ce travail à l’assistant : vous décrivez le scénario, Claude pilote le navigateur, observe ce qui se passe et génère le test Playwright. Il ne supprime pas le travail de QA, mais transforme une tâche répétitive en conversation.
Comme le connecteur Figma, Playwright vise d’abord les outils de développement. Avec Claude, il s’utilise donc dans Claude Code ou dans Claude Desktop, où le serveur tourne en local sur votre machine.
MCP : le protocole qui connecte Claude à vos outils
MCP, pour Model Context Protocol, est un standard ouvert créé par Anthropic. Un connecteur MCP expose des outils que le modèle appelle de lui-même, comme lire un fichier ou, avec Playwright, naviguer et remplir des champs. Notre article sur le protocole MCP détaille son fonctionnement.
Le client, Claude Code ou Claude Desktop, découvre les outils du serveur, puis appelle ceux qui correspondent à votre demande. Le serveur Playwright traduit ensuite ces appels en actions dans le navigateur et renvoie le résultat dans la conversation.
Par défaut, Playwright MCP lit l’arbre d’accessibilité de la page, une description structurée et légère de ses éléments. Les interactions sont ainsi plus rapides et plus fiables qu’avec l’analyse d’images. Le serveur sait toutefois prendre des captures d’écran, et un mode « vision » optionnel permet de cliquer par coordonnées.
Le serveur MCP Playwright : à quoi il sert
Playwright est le framework d’automatisation de navigateur de Microsoft. Il pilote Chromium, Firefox, WebKit et Edge avec une même base de code. Le serveur MCP officiel, publié sous le nom @playwright/mcp et sous licence open source, expose ces capacités à un assistant IA. Microsoft le met à jour très souvent, avec plusieurs versions par mois.
Par défaut, le serveur propose 25 outils de navigation, d’interaction et de gestion des onglets. L’option --caps en ajoute des dizaines d’autres, pour un total de plus de 70. Les assertions de test demandent ainsi --caps=testing, et d’autres familles couvrent le PDF, le réseau, les cookies ou les traces. Le serveur tourne en local sur votre machine, mais un mode HTTP existe aussi avec l’option --port.
Microsoft le dit en tête de sa documentation : pour un agent de code comme Claude Code, Playwright CLI associé à des skills peut être plus intéressant que le serveur MCP. La CLI consomme moins de tokens, car elle évite de charger de longs schémas d’outils et des arbres d’accessibilité verbeux. Le serveur MCP reste conseillé pour l’exploration, les tests qui se réparent seuls et les longues boucles autonomes. La CLI s’installe avec npm install -g @playwright/cli@latest, puis playwright-cli install --skills.
Configurer Playwright MCP dans Claude Code
La mise en place prend quelques minutes, avec Node.js 18 ou une version plus récente.
Installez Node.js et npm, ainsi que Claude Code dans votre terminal. Une familiarité minimale avec la ligne de commande suffit.
Lancez claude mcp add playwright npx @playwright/mcp@latest. Pour passer des options au serveur, séparez-les par --, par exemple claude mcp add playwright -- npx @playwright/mcp@latest --headless.
Par défaut, la configuration reste locale au projet, dans ~/.claude.json. L’option --scope user l’active pour tous vos projets, tandis que --scope project crée un fichier .mcp.json partagé avec l’équipe via le dépôt.
Demandez : « Ouvre cette page, remplis le formulaire d’inscription avec des données de test, vérifie le message de confirmation, puis génère le test Playwright. » Claude pilote le navigateur et restitue le résultat.
Dans Claude Desktop, ouvrez Réglages, puis l’onglet Développeur, et cliquez sur « Edit Config ». Ajoutez le serveur dans le fichier claude_desktop_config.json avec la commande npx et l’argument @playwright/mcp@latest. Quittez ensuite complètement l’application et relancez-la : le serveur apparaît alors dans le menu des connecteurs.
Les options utiles
Le serveur ouvre un navigateur visible par défaut, et l’option --headless le masque. L’option --isolated évite de réutiliser le profil persistant, ce qui convient aux tests. D’autres options choisissent le navigateur (--browser), émulent un appareil mobile (--device) ou fixent le langage du code généré (--codegen). Une extension permet enfin de piloter vos onglets Chrome ou Edge déjà ouverts, avec vos sessions connectées.
Ce que le connecteur permet concrètement
Naviguer et interagir
Claude ouvre des pages, clique sur des éléments, remplit des champs, sélectionne des options et gère plusieurs onglets. Il cible les éléments par leur rôle et leur libellé plutôt que par des coordonnées, ce qui rend les interactions plus fiables.
Générer des tests de bout en bout
À partir d’un parcours décrit ou exécuté, Claude rédige le test Playwright correspondant, avec ses sélecteurs et ses assertions. Les équipes QA passent ainsi d’une user story à un test exécutable sans l’écrire ligne à ligne. Playwright propose aussi trois agents de test, chargés de planifier, de générer et de réparer les tests, qui s’installent dans Claude Code avec npx playwright init-agents --loop=claude.
Vérifier et analyser les échecs
Avec l’option de test activée, le serveur valide qu’un élément est présent ou qu’un texte s’affiche. Quand un test échoue, Claude rejoue le parcours, observe l’endroit où il casse et propose un correctif.
Automatiser des parcours répétitifs
Au-delà du test, le connecteur sert à contrôler une interface après une mise en production ou à reproduire un scénario de bug signalé. Tout se fait depuis le terminal, à côté de votre code.
Trois workflows concrets
Décrivez le scénario attendu. Claude exécute le parcours dans le navigateur, vérifie le comportement, puis génère le test Playwright à intégrer à votre suite.
Après une mise en production, Claude rejoue les parcours critiques, comme la connexion ou le paiement, et signale toute régression visible.
Donnez à Claude un test qui échoue. Il rejoue le scénario, repère l’étape qui casse, propose un sélecteur corrigé et met à jour le test.
Les limites à connaître
Le serveur est puissant, mais certaines contraintes méritent d’être anticipées.
- Le serveur tourne en local. Il faut un client capable de lancer un processus sur votre machine, comme Claude Code ou Claude Desktop.
- Les pages visitées peuvent contenir des pièges. Une page malveillante peut glisser des instructions cachées pour détourner l’agent, ce qu’on appelle une injection de prompt. Microsoft précise d’ailleurs que Playwright MCP ne constitue pas une barrière de sécurité.
- Claude agit pour de vrai. Réservez-le à des environnements de test et à des comptes dédiés. Le profil persistant et l’extension donnent accès à vos sessions connectées, donc préférez
--isolatedpour les tests. - La qualité dépend de la page. Une interface bien structurée et accessible donne des interactions fiables, alors qu’une page très dynamique demande des ajustements.
- Le QA humain reste indispensable. Les tests générés accélèrent le travail, mais la stratégie de test et la couverture restent de votre ressort.
Playwright MCP avec Cursor, VS Code et les autres
Le même serveur fonctionne avec la plupart des clients MCP, avec une configuration quasiment identique. Dans Cursor, ouvrez Cursor Settings, puis MCP, et ajoutez un serveur de type commande avec npx @playwright/mcp@latest. Dans VS Code, la même configuration standard s’applique. Le serveur est aussi compatible avec Windsurf, Codex, Cline, Goose et Kiro.
Playwright MCP ou ses alternatives
D’autres outils pilotent un navigateur depuis un assistant IA. Claude in Chrome, l’extension d’Anthropic, est disponible sur les offres payantes de Claude depuis août 2026, et Claude Code y accède avec claude --chrome. Chrome DevTools MCP, de Google, analyse plutôt les performances, le réseau et la console. Browserbase propose enfin un navigateur hébergé dans le cloud.
| Outil | Éditeur | Usage recommandé |
|---|---|---|
| Playwright MCP | Microsoft | Tests de bout en bout et exploration, sur Chromium, Firefox et WebKit |
| Playwright CLI et skills | Microsoft | Agents de code, avec moins de tokens consommés |
| @executeautomation/playwright-mcp-server | Communauté | Captures, génération de tests et émulation d’appareils, sans nouvelle version depuis décembre 2025 |
| Chrome DevTools MCP | Débogage, traces de performance et analyse réseau dans Chrome | |
| Claude in Chrome | Anthropic | Tâches dans votre propre navigateur, avec vos sessions |
Sauf besoin précis, partez sur le package officiel @playwright/mcp pour les tests, ou sur la CLI de Microsoft si vous travaillez surtout dans Claude Code.
Notre avis
Le serveur MCP Playwright reste l’un des connecteurs les plus aboutis de la série pour qui développe ou teste des interfaces web. Son approche par l’arbre d’accessibilité le rend rapide et fiable. Pour générer des tests, déboguer un parcours ou contrôler un déploiement, le gain de temps est immédiat.
Deux précautions s’imposent néanmoins. Cantonnez Claude à des environnements de test et à des comptes dédiés, car il agit réellement dans le navigateur. Relisez aussi les tests générés, qui forment un point de départ solide plutôt qu’une suite clé en main. Les autres articles de notre série, comme Canva, Higgsfield, Pappers ou Composio, présentent d’autres connecteurs.
Retrouvez notre guide pour connecter Claude à vos outils du quotidien.