Claude + Playwright : piloter et tester un navigateur via MCP

Écrire et maintenir des tests end-to-end coûte cher : il faut connaître les sélecteurs, gérer les attentes, mettre à jour le code à chaque évolution de l’interface. Le serveur MCP Playwright déplace une partie de ce travail vers l’assistant. Vous décrivez le scénario en langage naturel, Claude pilote le navigateur, observe ce qui se passe et génère le test Playwright correspondant. La promesse n’est pas de supprimer le QA, mais de transformer une tâche répétitive et technique en conversation.

Comme le connecteur Figma, le MCP Playwright vise les outils de développement, pas l’application de chat web. Avec Claude, le terrain est donc Claude Code ou Claude Desktop, où le serveur tourne en local sur votre machine. Avant la configuration, posons les bases.

MCP : le protocole qui connecte Claude à vos outils

MCP (Model Context Protocol) est un standard ouvert créé par Anthropic pour permettre à un modèle d’interagir avec des services externes. Un connecteur MCP expose des outils que le modèle appelle de lui-même : lire un fichier, interroger une API, ou — avec Playwright — naviguer, cliquer et remplir des champs dans un navigateur.

Le client (Claude Code ou Claude Desktop) communique avec le serveur, découvre les outils disponibles, puis appelle ceux qui correspondent à votre demande. Le serveur Playwright traduit ces appels en actions de navigateur et renvoie le résultat structuré dans la conversation.

Le serveur MCP Playwright : à quoi il sert

Playwright est le framework d’automatisation de navigateur de Microsoft, capable de piloter Chromium, Firefox et WebKit avec une même base de code. Le serveur MCP Playwright — le package officiel @playwright/mcp, sous licence open source — expose ces capacités à un assistant IA via le protocole MCP. Plutôt que d’écrire le code d’automatisation à la main, vous décrivez l’action et Claude la traduit en commandes de navigateur.

Le serveur expose plus de 25 outils répartis en catégories : navigation et interaction, gestion des onglets, assertions de test, et quelques actions visuelles. Par défaut, il tourne en local sur votre machine via le transport stdio, ce qui maintient les interactions sur votre environnement. Pour des configurations distantes ou en conteneur, il peut basculer en mode HTTP avec l’option de port adéquate. C’est l’un des serveurs MCP les plus populaires de l’écosystème.

Configurer le connecteur Playwright dans Claude Code

La mise en place prend quelques minutes. Elle suppose Node.js et npm installés sur votre machine.

Pour Claude Desktop, la configuration passe par le fichier claude_desktop_config.json : on y ajoute le serveur Playwright comme serveur local (commande npx, argument @playwright/mcp@latest), puis on redémarre l’application. La configuration est quasiment identique d’un client à l’autre, seul l’emplacement du fichier change.

Ce que le connecteur permet concrètement

Une fois connecté, Claude pilote un navigateur réel et peut en exploiter le résultat. Voici les usages principaux.

Naviguer et interagir

Claude ouvre des pages, clique sur des éléments, remplit des champs, sélectionne des options et gère plusieurs onglets. Comme il s’appuie sur l’arbre d’accessibilité, 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 end-to-end

À partir d’un parcours décrit ou exécuté, Claude rédige le test Playwright correspondant, avec les sélecteurs et les assertions. C’est l’usage phare pour les équipes QA : passer d’une user story à un test exécutable sans l’écrire ligne à ligne.

Vérifier et analyser les échecs

Le serveur expose des outils d’assertion pour valider qu’un élément est présent, qu’un texte s’affiche ou qu’une action a réussi. Quand un test échoue, Claude peut rejouer le parcours, observer où ça casse et proposer un correctif de sélecteur ou de logique.

Automatiser des parcours répétitifs

Au-delà du test, le connecteur sert à automatiser des tâches web récurrentes : vérifier l’état d’une interface, contrôler un parcours après une mise en production, ou reproduire un scénario de bug signalé. Le tout depuis le terminal, à côté de votre code.

Trois workflows concrets

Les limites à connaître

Le serveur est puissant, mais il a des contraintes qu’il vaut mieux anticiper.

• Local par défaut — le serveur tourne sur votre machine via stdio. Il faut donc un client capable de lancer un processus local (Claude Code, Claude Desktop), pas l’application de chat web.
• Actions réelles sur le navigateur — Claude agit pour de vrai. Réservez-le à des environnements de test ou des comptes dédiés, et évitez de l’exécuter sur des services sensibles avec vos identifiants de production.
• Qualité liée à la page — une page bien structurée et accessible donne des interactions fiables. Sur une interface peu accessible ou très dynamique, le ciblage des éléments peut demander des ajustements.
• Pas un remplacement du QA — le code généré accélère le travail, mais la stratégie de test, la couverture et la maintenance restent du ressort humain. Relisez et consolidez les tests produits.
• Performance selon la machine — piloter un navigateur réel consomme des ressources. Pour des suites volumineuses, pensez au mode sans interface (headless) et à l’intégration en CI.

MCP Playwright n’est pas réservé à Claude : Cursor, VS Code et les autres

MCP est un standard ouvert. Le même serveur Playwright — le même package @playwright/mcp — fonctionne avec la plupart des clients MCP. La configuration est quasiment identique partout : seul l’emplacement du fichier de config change. Voici les points à connaître par client.

Claude Code

Installation en une commande : claude mcp add playwright npx @playwright/mcp@latest, config enregistrée dans ~/.claude.json ou un .mcp.json par projet. C’est le parcours détaillé dans ce guide, idéal pour les équipes QA travaillant dans le terminal.

Claude Desktop

Ajoutez le serveur dans claude_desktop_config.json comme serveur local (commande npx), puis redémarrez l’application. Le serveur apparaît ensuite dans le panneau des serveurs MCP.

Cursor

Dans Cursor Settings > MCP > Add new MCP Server, choisissez le type commande et renseignez npx @playwright/mcp@latest. La même configuration standard fonctionne dans VS Code (via Copilot).

Le serveur est également compatible avec Windsurf, Codex, Cline, Goose, Kiro et la plupart des clients MCP. La logique reste la même : un serveur local lancé via npx, piloté par votre assistant.

Playwright MCP officiel vs serveurs communautaires

En cherchant « Playwright MCP », vous tomberez sur deux familles de packages. Le serveur officiel de Microsoft est @playwright/mcp. Un projet communautaire répandu, @executeautomation/playwright-mcp-server, propose une API différente. Les deux pilotent un navigateur, mais mieux vaut savoir lequel vous installez.

En résumé : sauf besoin précis, partez sur le package officiel @playwright/mcp. C’est lui que documentent en priorité Claude Code, Cursor et VS Code.

Notre avis

Le serveur MCP Playwright est l’un des connecteurs les plus aboutis de la série pour qui développe ou teste des interfaces web. Son choix de l’arbre d’accessibilité plutôt que des captures d’écran le rend rapide, économe et fiable, là où les approches par vision peinent. Pour générer des tests end-to-end à partir d’une description, déboguer un parcours ou automatiser un contrôle après déploiement, le gain de temps est immédiat, surtout intégré à Claude Code dans le flux de travail d’une équipe QA.

Deux précautions s’imposent. La sécurité d’abord : Claude agit réellement dans un navigateur, donc cantonnez-le à des environnements de test et à des comptes dédiés. La maintenance ensuite : les tests générés sont un point de départ solide, pas une suite clé en main — la stratégie de couverture et la consolidation restent humaines. Avec ce cadre, Playwright MCP fait passer une part du travail de test de l’écriture manuelle à la conversation.