Serveur Playwright MCP : laissez un assistant piloter un vrai navigateur
Guide du serveur Playwright MCP et générateur de configuration
Serveur Playwright MCP : installation, options et outils | We.Inc
Ce que fait le serveur Playwright MCP, le fonctionnement des snapshots d'accessibilité, les options à régler, ses outils principaux et un générateur qui écrit la configuration pour vous.
Playwright MCP est le serveur MCP open source de Microsoft qui donne à un assistant IA un vrai navigateur pour cliquer, saisir du texte, remplir des formulaires et lire des pages. Au lieu d'analyser des captures d'écran, il lit l'arbre d'accessibilité de la page, une liste structurée de boutons, de liens et de textes. Il nécessite Node.js 18 ou plus récent et s'installe avec une seule ligne npx.
Playwright MCP en bref
Élément
Valeur
Paquet npm
@playwright/mcp
Prérequis
Node.js 18 ou plus récent
Comment il voit les pages
Snapshots d'accessibilité, pas de pixels
Navigateurs
chrome, firefox, webkit, msedge
Fenêtre par défaut
Visible (headed) ; ajoutez --headless pour la masquer
Si vous gérez un site web ou une boutique, Playwright MCP est un moyen pratique de faire parcourir vos propres pages par un assistant, comme le ferait un client : ouvrir le menu, ajouter un article au panier, envoyer le formulaire de contact, puis signaler ce qui ne fonctionne pas. Il repose sur Playwright, une bibliothèque de test de navigateur très répandue. Choisissez vos options ci-dessous et copiez une configuration, puis lisez les remarques de sécurité avant de l'utiliser sur une session connectée.
Choisissez un navigateur et indiquez si la fenêtre doit être visible ou headless.
Activez le mode isolé si vous voulez que chaque session démarre à zéro, sans rien enregistrer sur le disque.
Ajoutez les groupes de fonctionnalités supplémentaires dont vous avez besoin, comme l'enregistrement PDF ou les assertions de test.
Copiez le JSON dans la configuration de votre application MCP et redémarrez-la. Le premier lancement télécharge le paquet.
Testez sur une copie de préproduction ou un compte de test, pas avec votre connexion d'administration réelle.
Utilisez --isolated pour les tests afin que les cookies d'une session ne fuient jamais dans la suivante.
Demandez un snapshot avant de demander des clics : l'assistant cible les éléments à partir de cette liste.
Donnez des étapes précises ("ouvre /pricing, clique sur la deuxième offre, indique le total") plutôt que des objectifs vagues.
Gardez browser_run_code_unsafe à l'esprit : il exécute n'importe quel code Playwright, utilisez-le donc uniquement avec des prompts de confiance.
Questions fréquentes
Qu'est-ce qu'un snapshot d'accessibilité ?
Les navigateurs conservent un arbre d'accessibilité, la même vue structurée qu'utilisent les lecteurs d'écran : chaque bouton, lien, titre et champ avec son nom et son rôle. Playwright MCP transmet cet arbre à l'assistant, qui peut ainsi dire "clique sur le bouton Ajouter au panier" sans deviner à partir d'une image.
Playwright MCP est-il une barrière de sécurité ?
Non, et son README le précise en gras. Les options comme --allowed-origins et --blocked-origins ne sont pas non plus présentées comme une barrière de sécurité. Considérez-le comme un outil que vous supervisez, et exécutez-le là où une erreur ne peut pas atteindre de vraies données clients.
Mémorise-t-il les connexions d'une session à l'autre ?
Par défaut, il utilise un profil persistant : les connexions sont donc enregistrées sur le disque comme dans un navigateur normal. Avec --isolated, le profil reste en mémoire et disparaît à la fermeture du navigateur. Vous pouvez précharger des cookies dans une session isolée avec --storage-state.
Peut-il prendre des captures d'écran ou enregistrer des PDF ?
browser_take_screenshot fait partie des outils principaux. L'enregistrement PDF (browser_pdf_save) s'active avec --caps=pdf, et les outils de clic par coordonnées nécessitent --caps=vision.
Faut-il utiliser Playwright MCP ou la CLI Playwright ?
Le README suggère que les agents de code peuvent obtenir de meilleurs résultats avec la CLI Playwright distincte, qui consomme moins de tokens. Il réserve MCP aux longues sessions exploratoires, où garder l'état du navigateur ouvert vaut ce coût.
Profil persistant, isolé ou votre propre navigateur
Playwright MCP peut fonctionner de trois façons. Le profil persistant par défaut conserve les cookies et les connexions dans un dossier par projet. Le mode isolé garde tout en mémoire, ce qui convient aux tests reproductibles. Le mode extension de navigateur se connecte à une fenêtre Chrome ou Edge déjà ouverte : c'est pratique, mais l'assistant agit alors avec vos vraies connexions.
Un seul navigateur à la fois peut utiliser un profil persistant. Si vous lancez deux sessions d'assistant sur le même projet, démarrez la seconde avec --isolated ou un autre --user-data-dir.
Des tâches utiles sur votre propre site
Vérifier que chaque lien du menu principal ouvre une page qui se charge. Remplir le formulaire de contact avec des données de test et confirmer que le message de remerciement s'affiche. Lire les messages de la console sur une page qui semble lente. Passer à une largeur de téléphone et lister tout ce qui déborde.
Notez les résultats sous forme de liste de contrôle que vous pourrez reprendre après chaque modification : le passage de l'assistant devient ainsi votre test de non-régression.
Les options à connaître
Chaque option existe aussi sous forme de variable d'environnement, listée dans le README.
Sélection d'options de Playwright MCP
Option
Ce qu'elle fait
--browser <browser>
chrome, firefox, webkit ou msedge
--headless
S'exécute sans fenêtre visible ; le mode visible est celui par défaut
--isolated
Garde le profil du navigateur en mémoire, pas sur le disque
--storage-state <path>
Charge les cookies et le stockage local dans une session isolée
--device <device>
Émule un appareil, par exemple "iPhone 15"
--viewport-size <size>
Définit le viewport en pixels, par exemple "1280x720"
--caps <caps>
Active des groupes d'outils supplémentaires, comme pdf ou vision
--allowed-origins / --blocked-origins
Autorise ou bloque des origines de requêtes ; pas une barrière de sécurité
--timeout-action / --timeout-navigation
5000 ms et 60000 ms par défaut
--port <port>
Sert en HTTP pour qu'un client puisse se connecter par URL
Outils principaux
Outils principaux de Playwright MCP
Outil
Rôle
Lecture seule
Ouvrir une URL
Non
Capturer le snapshot d'accessibilité de la page
Oui
Cliquer sur un élément
Non
Saisir du texte dans un champ
Non
Remplir plusieurs champs à la fois
Non
Enregistrer une capture d'écran
Oui
Lire les messages de la console
Oui
Lister les requêtes réseau
Oui
Redimensionner la fenêtre
Non
Exécuter du code Playwright
Non
Exemples de configuration
Configuration standard
La configuration minimale proposée par le README pour la plupart des applications MCP.
Lancer en serveur HTTP et se connecter par URL
Utile lorsque l'application ne peut pas ouvrir de fenêtre elle-même. Le client pointe alors vers http://localhost:8931/mcp.
Générateur de configuration Playwright MCP
Choisissez vos options et copiez le JSON. Cette page ne fait qu'écrire du texte ; elle ne lance aucun navigateur.
Navigateur
Headless (aucune fenêtre visible)
Profil isolé (rien n'est enregistré sur le disque)
Taille du viewport, par exemple 1280x720 (facultatif)
Groupes de fonctionnalités supplémentaires
JSON de configuration
Le viewport doit ressembler à 1280x720 (largeur x hauteur en pixels). Il a été ignoré.