Playwright MCP : piloter un navigateur avec l’IA (guide et bonnes pratiques)
Demander à une IA d’aller vérifier un formulaire, de reproduire un bug sur une page ou de récupérer un tableau sur un site, c’est tentant. Encore faut-il qu’elle ait un navigateur sous la main. C’est exactement ce que fait Playwright MCP, le serveur MCP officiel de Microsoft : il branche Claude, Cursor ou VS Code sur un vrai navigateur (Chrome, Firefox, WebKit ou Edge) et lui permet de naviguer, cliquer, remplir des champs et lire les pages.
Dans ce guide, on voit comment l’installer, comment bien lui parler et surtout comment l’utiliser proprement, parce qu’un agent qui clique partout sans cadre peut vite devenir une source de frustration.
Playwright MCP en bref
| Point clé | Détail |
|---|---|
| Éditeur | Microsoft (projet open source) |
| Installation | npx @playwright/mcp@latest |
| Navigateurs | Chrome, Firefox, WebKit, Edge |
| Mode par défaut | Arbre d’accessibilité (pas de vision nécessaire) |
| Prix | Gratuit |
| Idéal pour | Tests manuels assistés, reproduction de bugs, scraping léger, QA |
📇 Retrouvez la fiche Playwright MCP dans notre annuaire des serveurs MCP : commande d’installation, liens officiels et catégorie.
Qu’est-ce que Playwright MCP ?
Playwright est la bibliothèque d’automatisation de navigateur de Microsoft, très utilisée pour les tests end-to-end. Le serveur MCP expose ses capacités à un assistant IA via le Model Context Protocol. Concrètement, l’IA reçoit une série d’outils comme browser_navigate, browser_click, browser_type, browser_snapshot ou browser_take_screenshot, et les enchaîne pour accomplir la tâche que vous lui décrivez.
Ce qui le distingue d’autres serveurs de navigation, c’est sa façon de « voir » la page. Par défaut, il ne travaille pas sur des captures d’écran mais sur l’arbre d’accessibilité : une représentation structurée des boutons, liens, champs et textes. Résultat : c’est plus rapide, plus fiable et ça fonctionne avec n’importe quel modèle, même sans capacités de vision. Si vous avez besoin de cliquer à des coordonnées précises (sur un canvas par exemple), un mode vision existe via l’option --caps=vision.
Installer Playwright MCP
Il vous faut simplement Node.js 18 ou plus récent.
Avec Claude Code
Une seule commande dans votre terminal :
claude mcp add playwright npx @playwright/mcp@latest
Avec Claude Desktop, Cursor ou Windsurf
Ajoutez ce bloc dans le fichier de configuration MCP de votre client (claude_desktop_config.json pour Claude Desktop, mcp.json pour Cursor) :
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Redémarrez le client : les outils browser_* apparaissent dans la liste. Au premier lancement, un navigateur s’ouvre en mode visible, ce qui est pratique pour suivre ce que fait l’agent.
Les options utiles à connaître
--headless: lance le navigateur sans fenêtre (idéal sur un serveur ou en CI).--browser firefox: choisit le navigateur (chrome, firefox, webkit, msedge).--isolated: garde le profil en mémoire, sans rien écrire sur le disque. Chaque session repart de zéro.--storage-state fichier.json: charge des cookies et un localStorage existants, pratique pour démarrer déjà connecté.--allowed-origins/--blocked-origins: limite les domaines que le navigateur a le droit de contacter.--viewport-size 1280x720: fixe la taille de la fenêtre pour des résultats reproductibles.--output-dir: dossier où sont enregistrés captures, PDF et traces.
Premiers pas : quelques prompts qui marchent
Le plus efficace est de décrire l’objectif et le critère de réussite, pas chaque clic. Quelques exemples :
- « Ouvre https://mon-site.fr/contact, remplis le formulaire avec des données de test et dis-moi si un message de confirmation s’affiche. »
- « Va sur la page produit, ajoute l’article au panier et vérifie que le total affiché est cohérent. Fais une capture d’écran si quelque chose cloche. »
- « Parcours les 3 premières pages de résultats de cette liste et donne-moi un tableau avec le titre et le prix de chaque élément. »
- « Reproduis le bug décrit dans ce ticket, puis consulte les messages de la console pour trouver l’erreur JavaScript. »
Dans Claude Code, le combo est redoutable : l’agent modifie votre code, lance le serveur de dev, ouvre la page avec Playwright MCP et vérifie lui-même que son correctif fonctionne.
Cas d’usage concrets
Vérifier une fonctionnalité après une modification. Plutôt que de tester à la main chaque parcours, vous demandez à l’agent de rejouer le scénario et de vous signaler ce qui ne va pas.
Reproduire et diagnostiquer un bug. Grâce à l’accès à la console (browser_console_messages) et aux requêtes réseau, l’IA peut relier un comportement visible à une erreur technique.
Écrire des tests end-to-end. L’agent explore d’abord la page avec le serveur MCP, puis rédige un vrai test Playwright à partir de ce qu’il a observé. Vous obtenez des sélecteurs basés sur les rôles et les libellés, bien plus robustes que des sélecteurs CSS fragiles.
Collecter quelques données. Pour un besoin ponctuel (récupérer une liste, comparer des pages), c’est plus rapide que d’écrire un script. Pour de gros volumes, un vrai scraper restera plus adapté.
Bonnes pratiques pour utiliser Playwright MCP
1. Donnez un objectif clair et vérifiable
« Teste mon site » ne suffit pas. Précisez l’URL de départ, le parcours attendu et ce qui prouve que tout va bien (un message, une URL finale, un élément visible). L’agent s’arrêtera au bon moment au lieu d’explorer sans fin.
2. Préférez le mode snapshot au mode vision
Le mode par défaut, basé sur l’arbre d’accessibilité, consomme moins de tokens et donne des actions plus fiables. Activez la vision uniquement quand la page n’expose pas une structure exploitable (canvas, cartes interactives, jeux).
3. Isolez les sessions et protégez vos comptes
Évitez de laisser l’agent naviguer avec votre profil personnel connecté partout. Utilisez --isolated, ou un fichier --storage-state dédié à un compte de test. N’y mettez jamais les accès d’un compte administrateur de production.
4. Restreignez les domaines
Avec --allowed-origins, vous limitez le navigateur à votre application. C’est une vraie protection contre les injections de prompt : une page malveillante qui contiendrait des instructions cachées ne pourra pas emmener l’agent n’importe où.
5. Gardez un œil sur les tokens
Les pages très chargées produisent des snapshots volumineux. Pour les longs parcours, découpez la tâche en étapes, ciblez des pages précises et fermez les onglets inutiles. Microsoft note d’ailleurs que pour des agents de code très intensifs, l’approche CLI de Playwright peut être plus économe ; le serveur MCP reste idéal pour l’exploration et les échanges itératifs.
6. Validez les actions sensibles
Laissez l’approbation manuelle des outils activée dans votre client, au moins pour les actions qui soumettent des formulaires, envoient des messages ou effectuent des paiements. Un clic de trop sur « Supprimer » ne se rattrape pas.
7. Rendez les résultats reproductibles
Fixez la taille de fenêtre, le navigateur et, si besoin, utilisez --output-dir pour conserver captures et traces. Quand un test échoue, vous aurez de quoi comprendre pourquoi.
Problèmes fréquents et solutions
Le navigateur ne se lance pas. Vérifiez votre version de Node.js (18 minimum) et, si besoin, installez le navigateur demandé avec npx playwright install chrome.
L’agent ne trouve pas un élément. Souvent, la page n’était pas encore chargée. Demandez-lui d’attendre un texte précis (outil browser_wait_for) ou de reprendre un snapshot.
La session se déconnecte à chaque fois. En mode isolé, c’est normal. Utilisez --storage-state ou --user-data-dir pour conserver l’état de connexion d’un compte de test.
Questions fréquentes
Playwright MCP est-il gratuit ?
Oui. Le serveur est open source et publié par Microsoft. Vous ne payez que l’utilisation du modèle d’IA avec lequel vous le connectez.
Quelle différence avec le serveur Puppeteer MCP ?
Les deux pilotent un navigateur, mais Playwright MCP s’appuie sur l’arbre d’accessibilité plutôt que sur des captures d’écran, gère plusieurs navigateurs et est activement maintenu par Microsoft. Pour un nouveau projet, c’est aujourd’hui le choix le plus solide.
Faut-il un modèle avec vision ?
Non. Le mode par défaut fonctionne avec des données textuelles structurées. La vision n’est utile que pour des cas particuliers, via l’option --caps=vision.
Peut-on l’utiliser sur un serveur sans écran ?
Oui, avec l’option --headless. Pour un accès à distance, le serveur peut aussi écouter sur un port HTTP avec l’option --port.
En résumé
Playwright MCP transforme votre assistant IA en testeur infatigable : il ouvre un navigateur, suit un parcours et vous dit ce qu’il a vu. Bien cadré (objectif précis, session isolée, domaines restreints), c’est l’un des serveurs MCP les plus utiles au quotidien pour un développeur web.