Playwright MCP renvoie à votre agent un instantané complet d’accessibilité après chaque action, et c’est là que partent les tokens. Découvrez les options qui réduisent la consommation, une configuration allégée à copier, l’alternative CLI et un verdict honnête sur la sécurité.
Playwright MCP donne à un agent d’IA de vraies mains dans un navigateur, et il vous facture chaque coup d’œil sur la page. Une tâche type a été signalée à environ 114 000 tokens via le serveur MCP, avant même que l’agent ait fini de cliquer. Ce même serveur peut aussi tourner dans un navigateur qui contient vos sessions connectées. Les deux questions tapées dans la barre de recherche sont donc légitimes : comment garder sous contrôle l’utilisation de tokens de Playwright MCP, et est-il sûr à utiliser ? Vous trouverez ci-dessous les options exactes, une configuration à copier, une comparaison avec la CLI de Playwright et un verdict franc sur les risques.
💡 En bref : désactivez les captures d’écran, laissez les capacités facultatives désactivées, utilisez un profil isolé et ne dirigez jamais l’agent vers des comptes que vous ne pouvez pas vous permettre de perdre. Pour les longues sessions de code, la CLI de Playwright est la voie la moins coûteuse.
Le serveur MCP de Playwright, développé par Microsoft, ne s’appuie pas sur des captures d’écran par défaut. Il renvoie un instantané de l’accessibilité : un arbre de texte qui recense chaque titre, lien, bouton et champ de saisie de la page, chacun associé à un identifiant de référence que le modèle utilise pour cliquer ou saisir. C’est une manière plus intelligente de piloter un navigateur que de deviner à partir de pixels, car le modèle sait qu’un bouton est un bouton sans passer par une analyse visuelle. Mais sur n’importe quelle page chargée, cela représente un long bloc de texte, et vous le payez à chaque fois qu’il arrive.
Chaque outil d’action, comme browser_click ou browser_type, renvoie l’état de la page après son exécution. L’instantané s’ajoute encore et encore à la fenêtre de contexte. Une tâche de dix étapes sur un site riche en contenu empile dix arbres dans la fenêtre, et aucun ne disparaît tant que vous n’avez pas vidé la session.
La comparaison publiée par l’équipe de Playwright, telle que relayée dans plusieurs articles, place une tâche type à environ 114 000 tokens avec MCP, contre environ 27 000 tokens avec la CLI, soit un rapport d’environ 4 pour 1. Considérez ces chiffres comme des ordres de grandeur, car le poids de la page change tout.
Un signalement public de bug concernant le serveur MCP associé de Chrome DevTools montre le même problème : le contexte passe d’environ 31 000 à 242 000 tokens après un seul clic sur une page lourde. Serveur différent, même coupable. Le coût est porté par l’arbre de la page, pas par le clic.
Chaque serveur MCP fournit des schémas d’outils, que votre hôte charge dans le contexte au démarrage de la session. Un praticien a mesuré 28,1 k tokens, soit 14,1 % de la fenêtre, pour les définitions d’outils de plusieurs serveurs dans Claude Code. Playwright MCP propose une longue liste d’outils, et chaque capacité facultative en ajoute. Les hôtes imposent aussi leurs limites : Cursor limite à 40 le nombre d’outils, tous serveurs confondus.
💡 Astuce : si vous ne naviguez pas dans cette session, désactivez le serveur Playwright. Un serveur inactif coûte quand même des tokens de schéma.
Voici le bloc standard pour tout hôte qui lit une section mcpServers :
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
Elle fonctionne, mais les valeurs par défaut privilégient le confort : un navigateur visible, un profil persistant, des captures d’écran autorisées, les instantanés activés et toutes les origines accessibles. La plupart de ces réglages peuvent être resserrés en une ligne chacun.
claude mcp add playwright -- npx @playwright/mcp@latest --headless --isolated
Tout ce qui suit le double tiret correspond à la commande du serveur. Exécutez /mcp dans Claude Code pour vérifier la connexion. En cas d’échec au démarrage, vérifiez que Node.js est installé et que npx est dans votre PATH.
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"@playwright/mcp@latest",
"--headless",
"--isolated",
"--image-responses=omit",
"--allowed-origins=https://example.com;https://staging.example.com"
]
}
}
}
Voici ce que fait chaque option :
--headless lance le navigateur sans fenêtre. Par défaut, il est visible.--isolated garde le profil en mémoire, si bien que les cookies disparaissent à la fin de la session.--image-responses=omit supprime les captures d’écran des réponses des outils.--allowed-origins accepte des origines séparées par des points-virgules. Remplacez-les par vos propres domaines.
Toutes les options ne font pas économiser de tokens, et certaines échangent des tokens contre de la sécurité. Ce tableau montre les deux effets côte à côte.
| Option | Ce qu’elle fait | Effet sur les tokens | Effet sur la sécurité |
|---|---|---|---|
--image-responses omit | Supprime les captures d’écran des réponses des outils | Retire les charges d’images | Moins de données de page quittent le navigateur |
--snapshot-mode none | Désactive l’instantané automatique de la page (valeurs du README : full, none) | Plus forte réduction, mais l’agent travaille à moitié à l’aveugle | Neutre |
--caps | Active les ensembles d’outils facultatifs : vision, pdf, devtools, config, network, storage, testing | Moins de schémas d’outils quand ils restent désactivés | Surface d’attaque réduite |
--storage-state | Charge les cookies et le localStorage dans un contexte isolé | Évite les étapes de connexion, donc moins d’actions | Transporte de vraies données de session, utilisez donc un compte de test |
--blocked-origins | Bloque les requêtes vers les origines listées | Pages plus légères et arbres plus petits | Un confort, pas un mur |
--image-responses accepte allow, omit ou only, et la valeur par défaut est allow. Pour les tâches riches en texte, comme lire un tableau de tarifs ou remplir un formulaire, omit fait économiser sans effort. Cela réduit la facture sans la résoudre pour autant. L’instantané de l’accessibilité reste le poste le plus coûteux.
--snapshot-mode none est l’option la plus radicale. Ne l’utilisez que lorsque l’agent pilote la page par des scripts, car un modèle qui ne voit pas la page devinera.
L’option --caps active les ensembles d’outils facultatifs : vision pour les actions de souris par coordonnées, pdf, devtools, config, network, storage et testing. Gardez-les désactivés tant qu’une tâche n’en a pas besoin. L’ensemble testing active les outils de vérification, à n’activer que pour les sessions où vous écrivez des tests.
npx playwright test. L’exécution affiche quelques lignes au lieu de dizaines d’arbres.
Le README du projet est clair sur ce compromis : « Les appels CLI sont plus efficaces en tokens : ils évitent de charger de gros schémas d’outils et des arbres d’accessibilité verbeux dans le contexte du modèle. » Il réserve MCP aux workflows qui nécessitent un « état persistant, une introspection riche et un raisonnement itératif ».
| Mesure | Playwright MCP | Playwright CLI |
|---|---|---|
| Tâche type (publiée) | Environ 114 000 tokens | Environ 27 000 tokens |
| Gestion de l’instantané | Renvoyé en ligne dans chaque réponse | Enregistré sur le disque sous forme de fichier YAML |
| Par interaction (retours de praticiens) | Charges d’instantanés volumineuses | Environ 1 000 à 2 000 tokens après réglage |
| Schémas d’outils | Chargés dans le contexte au démarrage de la session | Aucun, il s’exécute sous forme de commandes shell |
| Usage idéal | État persistant et raisonnement itératif | Longues sessions de code et haut débit |
Ces chiffres proviennent de comptes rendus du benchmark de l’équipe de Playwright et de praticiens, et non d’un test que j’aurais réalisé. Mesurez donc votre propre tâche avant de bâtir un workflow autour d’eux.
Une règle simple fonctionne bien : testez avec MCP, puis figez le parcours dans un script et lancez ce script depuis la CLI.
La réponse honnête comporte deux volets. Il est suffisamment sûr pour le développement local sur des sites de confiance, avec un profil isolé. Il n’est pas sûr comme agent non supervisé dans le navigateur que vous utilisez pour vos opérations bancaires. Le README le dit clairement : « Playwright MCP n’est pas une frontière de sécurité. »
Tout ce que l’agent lit devient une entrée du modèle. Une page peut cacher du texte en blanc sur fond blanc, dans un commentaire HTML ou dans un attribut alt d’image, pour demander à l’agent d’ignorer vos instructions et d’ouvrir une autre URL. L’arbre d’accessibilité aplatit tout cela en texte brut, juste à côté de votre propre prompt. Les modèles résistent à certaines de ces attaques et en manquent d’autres.
Ce qui aide :
Par défaut, le navigateur conserve un profil persistant sur le disque, et --user-data-dir définit son emplacement, afin que les cookies survivent d’une session à l’autre. L’option --extension va plus loin : elle se connecte à une instance d’Edge ou de Chrome que vous avez déjà ouverte. Un agent détourné dans ce mode agit en votre nom, sur chaque site où vous êtes connecté. Pour tout ce qui touche à une connexion, utilisez --isolated avec un compte jetable.
--allowed-origins et --blocked-origins acceptent des listes séparées par des points-virgules, et la valeur par défaut autorise tout. Ils réduisent le bruit et les requêtes parasites, mais ce ne sont pas une frontière de sécurité. Il en va de même pour --secrets, qui pointe vers un fichier dotenv afin de masquer les chaînes sensibles dans les réponses : pratique, mais sans garantie. Laissez --allow-unrestricted-file-access désactivé, car il autorise les URL file:// et l’accès en dehors de votre espace de travail.
| Risque | Ce qui peut se produire | Correctif |
|---|---|---|
| Injection de prompt | Le texte de la page dirige l’agent | Sites de confiance et approbations d’outils |
| Profil persistant | Les cookies restent sur le disque et sont réutilisés | --isolated |
| Mode extension | L’agent agit dans vos sessions réelles | Évitez-le pour les comptes sensibles |
| Accès aux fichiers | Les fichiers locaux deviennent accessibles | Gardez l’accès sans restriction désactivé |
| Port ouvert | Quiconque sur le réseau atteint le serveur | Liez-le à localhost et gardez --allowed-hosts à sa valeur par défaut |
--isolated pour que rien ne persiste.--storage-state.--secrets avec un fichier dotenv pour que les valeurs soient masquées.@latest, afin qu’une nouvelle publication ne modifie pas le comportement à votre insu.
Pour un navigateur jetable qui ne touche jamais à votre profil hôte, le README propose cette commande :
docker run -i --rm --init --pull=always mcr.microsoft.com/playwright/mcp
Pour un service HTTP de longue durée, l’exemple du README publie le port 8931 et lie --host 0.0.0.0 à l’intérieur du conteneur. Publiez-le uniquement sur la boucle locale, afin que les autres machines de votre réseau ne puissent pas l’atteindre :
docker run -d -i --rm --init --pull=always \
--entrypoint node --name playwright -p 127.0.0.1:8931:8931 \
mcr.microsoft.com/playwright/mcp \
/app/cli.js --headless --browser chromium --no-sandbox --port 8931 --host 0.0.0.0
L’option --no-sandbox désactive le propre bac à sable de Chromium, si bien que le conteneur devient votre frontière de sécurité. Ne montez pas de dossiers sensibles de l’hôte à l’intérieur.
💡 Verdict : faites travailler Playwright MCP comme un artisan chez vous, pas comme un membre de la famille. Donnez-lui une seule pièce (un profil isolé), une tâche courte et quelqu’un qui le surveille.
Un modèle de langage fait office de second regard peu coûteux pour une configuration MCP. Claude Sonnet 5 sur PicassoIA est référencé pour les tâches de code, ce qui convient bien à une relecture de configuration.
Si la page du modèle propose un réglage de température, gardez-le bas pour les relectures de configuration, car vous voulez des réponses constantes plutôt que créatives.
D’autres modèles valent la peine d’être essayés pour la même tâche :
💡 Attention : ne collez jamais de fichiers
.env, de tokens d’API ou de cookies dans une zone de discussion. Remplacez-les d’abord par des placeholders.
Le MCP ne sert pas qu’aux navigateurs, d’ailleurs. PicassoIA propose son propre connecteur pour Claude, qui expose la génération d’images, l’édition d’images et la génération de vidéos à travers quelques outils, ce qui limite le poids des schémas par rapport à un serveur qui expose une longue liste d’outils de navigation.
Les agents de navigation lisent le web, mais vos articles, produits et publications ont toujours besoin d’images qui arrêtent le défilement. Picasso IA met des modèles de génération d’images photoréalistes à un clic, afin de passer d’une idée à un visuel abouti en quelques minutes.
Commencez avec PicassoIA Image pour un premier jet rapide, puis lancez le même prompt sur Seedream 5 Pro et comparez les résultats côte à côte.
Une formule de prompt qui fonctionne : sujet + décor + lumière + objectif. Par exemple :
Un développeur examinant l’écran de son ordinateur portable à un bureau près d’une fenêtre ensoleillée, lumière du matin venant de la gauche, objectif 85 mm, faible profondeur de champ, grain de film naturel.
Modifiez un seul détail à la fois, comme la lumière ou l’objectif, et observez comment le résultat change. Dix minutes de petites expériences affineront vos prompts mieux que n’importe quelle liste de contrôle. Ouvrez Picasso IA, collez le prompt ci-dessus et créez votre première image dès aujourd’hui.
Choisissez votre langue
