Playwright MCP — Cas d'usage, Installer & Démo en direct

Name: Playwright MCP Server
Author: microsoft

Pourquoi l'utiliser

Fonctionnalités clés

De première partie — publié et maintenu par l'équipe Microsoft Playwright
Basé sur l'arborescence d'accessibilité — bien plus fiable que les agents de navigateur basés sur les pixels
Supporte Chromium, Firefox, WebKit, en mode avec interface ou sans interface (headless)
Multi-onglets, téléchargements/téléversements de fichiers, interception réseau, enregistrement vidéo

Démo en direct

Aperçu en pratique

playwright.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "playwright",
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@latest"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "playwright": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@playwright/mcp@latest"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add playwright -- npx -y @playwright/mcp@latest

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Playwright

Testez un déploiement en production en 60 secondes

👤 Ingénieurs DevOps, responsables des versions ⏱ ~5 min intermediate

Quand l'utiliser : Vous venez de déployer et voulez vérifier rapidement que les flux utilisateur critiques fonctionnent toujours, avant de déclarer le succès.

Prérequis

Identifiants du compte de test (utilisez un compte QA dédié, pas un vrai compte utilisateur) — Stockez-les dans des variables d'environnement ou directement dans votre prompt

Déroulement

Ouvrez la page d'accueil et vérifiez qu'elle se charge

Ouvrez https://app.example.com. Vérifiez que la page retourne 200, le H1 dit « Welcome », et le bouton de connexion est visible.✓ Copié

→ Succès/échec avec capture d'écran en cas d'échec
Exécutez le flux connexion → action principale → déconnexion

Connectez-vous en tant que [email protected] / [mot de passe]. Puis créez un nouveau projet nommé 'smoke-test-<timestamp>'. Puis supprimez-le. Puis déconnectez-vous.✓ Copié

→ Chaque étape réussit ; en cas d'échec, capture d'écran + vidage du DOM
Diagnostiquez tout échec

Si une étape a échoué, capturez l'aperçu de la page et dites-moi ce qui diffère de la ligne de base fonctionnelle.✓ Copié

→ Élément spécifique ou requête réseau qui s'est cassée

Résultat : Confiance (ou panique rapide) à propos de votre déploiement en moins d'une minute, sans avoir besoin d'une suite E2E complète.

Pièges

Les données de test en dur s'accumulent et polluent la prod — Utilisez toujours des horodatages uniques dans les données de test et nettoyez à la fin du flux
La session du navigateur persiste entre les exécutions, masquant les bugs qui nécessitent un état propre — Exécutez avec --browser-context: incognito ou effacez les cookies entre les exécutions

Combiner avec : sentry

Auditez votre site à 5 largeurs de fenêtre d'affichage et signalez les cassures

👤 Ingénieurs frontend, concepteurs ⏱ ~15 min intermediate

Quand l'utiliser : Avant de lancer un site marketing ou une page produit, vous voulez vérifier qu'il ne casse pas aux largeurs courantes.

Déroulement

Ouvrez la page à 5 largeurs de fenêtre d'affichage (320, 375, 768, 1024, 1440)

Ouvrez https://example.com aux fenêtres d'affichage 320×568, 375×812, 768×1024, 1024×768, 1440×900. Prenez une capture d'écran de la page complète pour chacune.✓ Copié

→ 5 captures d'écran enregistrées
Détectez le débordement horizontal à chaque largeur

Pour chaque fenêtre d'affichage, listez tous les éléments où scrollWidth > viewportWidth. Ceux-ci provoquent un défilement horizontal et semblent cassés.✓ Copié

→ Liste par fenêtre d'affichage des sélecteurs CSS offensants
Suggérez des corrections

Pour chaque élément débordant, obtenez son CSS calculé et suggérez la correction la plus petite (probablement max-width, overflow-wrap, ou ajustement du point de rupture).✓ Copié

→ Diff exploitable par élément

Résultat : Une liste de corrections priorisée avec des sélecteurs spécifiques, appropriée à soumettre en tant que PR unique.

Pièges

Les vrais utilisateurs ont des barres de défilement (15px sur Windows), que le navigateur sans interface ne simule pas par défaut — Testez avec --browser=chromium et --browser=webkit ; les largeurs importent plus que vous ne le pensez

Combiner avec : chrome-devtools · filesystem

Explorez votre site et trouvez chaque lien interne cassé

👤 Responsables de la documentation, responsables SEO ⏱ ~30 min intermediate

Quand l'utiliser : Avant une campagne marketing ou une fois par trimestre — les 404 silencieux sur les liens internes nuisent au référencement et à la confiance des utilisateurs.

Déroulement

Explorez le site en collectant tous les liens internes

À partir de https://docs.example.com, explorez toutes les pages du même domaine (profondeur 3 max). Collectez chaque href trouvé.✓ Copié

→ Inventaire complet des liens
Testez chaque lien

Pour chaque URL unique, envoyez une requête HEAD et capturez le code d'état. Signalez tout ce qui est >= 400.✓ Copié

→ Liste des liens cassés avec codes d'état
Groupez les liens cassés par référent

Pour chaque lien cassé, listez quelle(s) page(s) y pointent, pour que je sache où corriger.✓ Copié

→ Liste par lien cassé des référents, ordonnée par nombre de référents

Résultat : Un rapport markdown que vous pouvez remettre à l'équipe docs listant chaque lien cassé groupé par page à corriger.

Pièges

Certains sites limitent le débit des robots d'exploration agressifs — Ajoutez un délai entre les requêtes ; si vous exécutez sur la production, faites-le pendant les heures creuses

Combiner avec : filesystem · github

Grattez les données qui nécessitent une authentification

👤 Analystes de données, chercheurs ⏱ ~20 min advanced

Quand l'utiliser : Les données dont vous avez besoin se trouvent derrière une connexion (votre propre tableau de bord d'administration, rapports internes, etc.) et les outils de grattage basiques ne peuvent pas les atteindre.

Prérequis

Identifiants valides pour la cible — Utilisez un compte de service, jamais le vôtre

Déroulement

Connectez-vous

Ouvrez https://target.example.com/login. Remplissez le champ email avec [email] et le mot de passe avec [mot de passe]. Soumettez.✓ Copié

→ Session confirmée — arrivé à l'URL du tableau de bord
Accédez à la page de données

Cliquez dans la section Rapports. Attendez que le tableau de données s'affiche.✓ Copié

→ Tableau visible dans le DOM
Extrayez les données

Lisez chaque ligne du tableau de rapport. Retournez en JSON avec chaque colonne comme clé.✓ Copié

→ Ensemble de données complet en JSON

Résultat : Données structurées que vous n'auriez pas pu obtenir avec un simple outil de grattage HTTP, prêtes à mettre dans une feuille de calcul ou une base de données.

Pièges

L'authentification multifacteur est activée et casse le flux — Configurez un mot de passe spécifique à l'application si le service le supporte, ou utilisez un token API long terme à la place
Les captchas apparaissent après plusieurs connexions — Utilisez un contexte de navigateur persistant (--user-data-dir) pour que les cookies soient réutilisés et que vous ne déclenchiez pas les portes captcha

Combiner avec : postgres · filesystem

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

playwright + filesystem

Grattez un site, enregistrez le contenu de chaque page sur disque pour RAG hors ligne

Explorez docs.stripe.com à partir de /api, enregistrez chaque page en tant que fichier Markdown sous ./knowledge/stripe/{path}.md.✓ Copié

playwright + chrome-devtools

Test de performance + fonctionnel en un seul flux — vérifiez que la page se charge correctement ET rapidement

Ouvrez ma page de destination. Vérifiez le H1, puis capturez une trace Lighthouse et dites-moi si LCP est en moins de 2 secondes.✓ Copié

playwright + sentry

Reproduisez une erreur de production signalée dans Sentry en relisant les miettes de pain de l'utilisateur

Le problème Sentry WEB-3a91 indique que l'utilisateur a cliqué sur X puis Y puis s'est écrasé. Reproduisez cette séquence exacte dans Playwright et confirmez.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
browser_navigate	url: str	Accédez à une URL — première action de tout flux	1 chargement de page
browser_snapshot		Obtenez une vue structurée de tous les éléments interactifs (liens, boutons, entrées)	gratuit
browser_click	ref: str (de snapshot) \| selector: str	Cliquez sur un élément identifié par ref snapshot ou sélecteur CSS	gratuit
browser_type	ref, text, submit?: bool	Remplissez un champ d'entrée ; avec submit:true appuie également sur Entrée	gratuit
browser_screenshot	fullPage?: bool, path?: str	Capturez des preuves visuelles — débogage ou audit	espace disque
browser_evaluate	script: str	Exécutez du JS arbitraire dans le contexte de la page — utilisez avec parcimonie, préférez les outils spécifiques	gratuit
browser_network_requests		Inspectez ce que la page charge ; utile pour trouver les points de terminaison API cachés	gratuit

Coût et limites

Coût d'exécution

Quota d'API: Gratuit — s'exécute localement, uniquement vos ressources machine
Tokens par appel: Les snapshots coûtent 500-3000 tokens selon la complexité de la page
Monétaire: Gratuit. Binaires de navigateur téléchargés une seule fois (~300MB Chromium).
Astuce: Utilisez browser_snapshot au lieu de captures d'écran — c'est 100 fois moins cher en tokens et plus fiable pour que Claude agisse.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Passez via des variables d'environnement ; ne mettez jamais de vrais identifiants de production dans les prompts

Sortie de données : Les navigateurs se connectent à tous les URL auxquels vous accédez. Aucune télémétrie vers Microsoft.

Les sessions du navigateur persistent — effacez les cookies entre les exécutions si vous testez l'authentification.
Le mode avec interface ouvre une vraie fenêtre sur votre machine ; utilisez headless pour CI.

Dépannage

Erreurs courantes et correctifs

Élément non trouvé / TimeoutError

La page n'a pas fini de s'afficher. Ajoutez une attente explicite : browser_wait_for(selector) ou browser_wait_for(text='...') avant l'action.

Vérifier : Prenez d'abord un snapshot pour voir ce qui est réellement sur la page

Le navigateur ne lance pas sur Linux

Installez les dépendances du SE : npx playwright install-deps. Courant dans Docker — utilisez l'image Playwright officielle comme base.

Vérifier : playwright --version

Toutes les navigations échouent avec net::ERR_*

Problème de sandboxing réseau. Exécutez avec --no-sandbox si dans Docker, ou vérifiez votre pare-feu / proxy.

Le site détecte l'automatisation et affiche le captcha

Utilisez --browser-type=firefox (moins détecté que Chromium sans interface), ou exécutez avec interface si approprié. Certains sites sont intentionnellement résistants aux robots — respectez cela.

Alternatives

Playwright vs autres

Alternative	Quand l'utiliser	Compromis
MCP Puppeteer	Vous n'avez besoin que de Chromium et voulez une API légèrement plus simple	Chromium uniquement ; pas de Firefox/WebKit ; communauté plus petite maintenant
MCP Firecrawl	Vous avez juste besoin d'extraire du contenu, pas d'interagir avec la page	Hébergé (coûte des crédits) mais zéro infra ; ne peut pas cliquer à travers les flux
MCP Browserbase	Vous avez besoin d'exécuter des automatisations de navigateur à partir d'un contexte serverless (pas de navigateur local)	Service hébergé avec tarification à la minute ; excellent pour les agents de production

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills