Playwright MCP — Add-ons & intégrations

Playwright MCP

✓ Officiel★ 34.987

Le serveur MCP officiel de Microsoft pour l'automatisation de navigateur — via l'arbre d'accessibilité, sans captures d'écran ni modèle de vision.

Playwright MCP pilote un vrai navigateur — mais contrairement aux approches basées sur des captures d'écran, le serveur s'appuie sur l'arbre d'accessibilité de Playwright, c'est-à-dire la description structurée d'une page (quels boutons, liens, champs de formulaire existent, avec leur nom et leur état). Le README résume les avantages ainsi : « Fast and lightweight », « LLM-friendly — no vision models needed, operates purely on structured data » et « deterministic tool application » — il n'y a aucune ambiguïté sur le pixel visé, car l'agent cible directement les éléments au lieu de cliquer sur des coordonnées.

L'agent dispose pour cela d'un ensemble d'outils de navigateur : browser_navigate ouvre des pages, browser_snapshot fournit l'instantané d'accessibilité actuel sous forme de texte, browser_click et des outils apparentés interagissent avec les éléments, browser_tabs gère plusieurs onglets. Des capacités supplémentaires sont opt-in : export PDF (browser_pdf_save via --caps=pdf) et actions de souris basées sur des coordonnées pour les cas particuliers (--caps=vision). Le routage réseau ainsi que les cookies/le stockage local peuvent également être contrôlés.

Chrome, Firefox, WebKit et Microsoft Edge sont pris en charge ; par défaut, le navigateur s'exécute de façon visible (headed), et de façon invisible avec --headless. Seul prérequis : Node.js 18 ou plus récent — le serveur démarre directement via npx @playwright/mcp@latest, sans installation permanente. Un agent comme Claude Code peut ainsi piloter des pages web, remplir des formulaires et tester son propre frontend de bout en bout par des clics, chaque étape étant consignée comme une action d'outil traçable.

🔧 SETUP

Vérifier le prérequis : Node.js 18 ou plus récent
Enregistrer dans Claude Code : `claude mcp add playwright npx @playwright/mcp@latest`
Pour d'autres clients MCP, déclarer la configuration standard : `{"mcpServers": {"playwright": {"command": "npx", "args": ["@playwright/mcp@latest"]}}}`
Activer en option des capacités : `--caps=pdf` (export PDF) ou `--caps=vision` (clics par coordonnées), navigateur invisible avec `--headless`
Tester : demander à l'agent d'ouvrir une page et de la décrire — il utilisera alors browser_navigate et browser_snapshot

✅ QUAND L’UTILISER ?

Tester son propre frontend de bout en bout

« Ouvre localhost:3000, connecte-toi avec les données de test et vérifie que le message d'erreur apparaît en cas de mot de passe incorrect » — l'agent navigue en cliquant via l'arbre d'accessibilité.

Interaction web structurée sans modèle de vision

Remplir automatiquement un formulaire en plusieurs étapes : l'agent voit les champs avec leur nom et leur rôle sous forme d'instantané textuel, et les remplit de façon déterministe — plus rapide et moins coûteux qu'une analyse de captures d'écran.

⛔ QUAND ÉVITER ?

Vérifications visuelles au pixel près

L'arbre d'accessibilité décrit la structure et l'état, mais pas l'apparence — le mode standard ne détecte pas si une mise en page a glissé ou si les couleurs sont correctes.

Mieux: Pour les vérifications visuelles, activer le mode vision optionnel (`--caps=vision`) ou utiliser des tests classiques basés sur des captures d'écran.

Interaction avec son propre navigateur déjà connecté

Playwright MCP démarre ses propres instances de navigateur — les connexions et sessions existantes de votre navigateur habituel n'y sont pas disponibles automatiquement.

Mieux: Pour des tâches dans son propre navigateur déjà connecté, préférer Claude in Chrome.