Lorsqu’un agent IA modifie une interface web (barre de recherche dynamique, tableau de bord, application PWA), vérifier uniquement que le code compile ne suffit pas : une erreur ReferenceError au chargement ou une règle CSS display: none peut rendre un composant inopérant sans faire échouer le build statique.
Playwright MCP (@playwright/mcp, maintenu par Microsoft) expose un navigateur Chromium/Firefox/WebKit headless via le protocole Model Context Protocol (MCP). Sa particularité architecturale majeure est d’opérer sur l’arbre d’accessibilité structuré du DOM (Accessibility Snapshot) plutôt que sur des captures d’écran matricielles.
Pourquoi l’arbre DOM bat les captures d’écran
Envoyer des captures d’écran PNG 1080p à chaque clic d’un agent consomme des milliers de tokens de vision et souffre d’imprécisions sur les coordonnées (x, y). Playwright MCP adopte une approche purement structurelle :
- Adressage par références sémantiques (
ref) : le serveur renvoie un arbre YAML compact où chaque élément interactif (textbox,button,link,article) porte un identifiant déterministe (ref=e12). L’agent clique ou saisit du texte sure12avec une fiabilité de 100 %, indépendamment de la taille de l’écran. - Capture native des erreurs runtime (
browser_console_messages&browser_network_requests) : l’agent détecte instantanément une feuille de style en404, un blocage CORS/CSP ou une exception JavaScript non gérée lors d’une saisie utilisateur.
Configurer le serveur MCP
L’intégration dans la configuration MCP de l’agent (mcp_config.json ou .claude.json) ne requiert qu’une commande npx en mode headless sans sandbox :
# Démarrage autonome du serveur Playwright MCP en mode headless isolé
npx @playwright/mcp@latest --headless --isolated --no-sandbox
# Exemple de vérification automatisée en ligne de commande
npx playwright test --reporter=list
–> Combiner une simulation rapide JSDOM/Puppeteer et l’inspection de l’arbre DOM via Playwright MCP garantit qu’aucune régression d’interface (recherche dynamique, filtres, authentification SSO) n’est livrée à l’aveugle.
Caractéristiques
| Approche de Test par Agent | Analyse Statique du Code | Agent Vision (Screenshots PNG) | Playwright MCP (DOM / A11y Tree) |
|---|---|---|---|
| Coût moyen par étape d’interaction | ~200 tokens | ~2 500 à 4 500 tokens (Image) | ~350 à 600 tokens (YAML A11y) |
| Précision des clics et saisies | N/A (Pas d’exécution) | ⚠️ Fragile (Coordonnées X/Y) | ✅ 100 % déterministe (ref=eXX) |
Détection des Uncaught TypeError JS | ❌ Invisible | ❌ Invisible sur un screenshot | ✅ Remontée native de la console |
| Latence par boucle d’action | < 50 ms | 2,5 s à 5 s | 150 ms à 400 ms |
Isolation de session (--isolated) | N/A | Variable | ✅ Contexte éphémère propre à chaque test |
| Commande | Description |
|---|---|
`npx @playwright/mcp@latest --headless`
| Lance le serveur MCP Playwright en mode headless standard. |
`npx @playwright/mcp@latest --isolated`
| Exécute chaque session dans un profil mémoire éphémère sans persistance de cookies. |
`browser_snapshot`
| Outil MCP renvoyant l'arbre d'accessibilité YAML complet de la page active avec les références d'éléments. |
`browser_console_messages`
| Outil MCP récupérant toutes les erreurs console JavaScript et échecs réseau de la page. |