superpowers-chrome vs Playwright : quel outil pour piloter un navigateur avec Claude Code ?

Le probleme : piloter un navigateur depuis le terminal

Quand on travaille avec Claude Code, il arrive un moment ou lire du code ne suffit plus. Il faut voir la page. Verifier un rendu CSS. Debugger un comportement JavaScript. Prendre une capture d'ecran pour documenter un bug. Scraper une page protegee par un login.

Pour tout ca, il faut que l'agent IA puisse piloter un navigateur. Deux outils existent dans l'ecosysteme Claude Code : Playwright MCP (le standard Microsoft) et superpowers-chrome (un plugin qui controle votre vrai Chrome). Ils font des choses similaires, mais avec des philosophies tres differentes.

Playwright MCP : le standard Microsoft

Comment ca marche

Playwright est un framework de test et d'automatisation developpe par Microsoft. Le Playwright MCP expose ses capacites a Claude Code via le protocole MCP. Quand vous l'utilisez, Playwright lance une instance Chromium isolee — un navigateur completement vierge, sans cookies, sans extensions, sans historique.

L'installation est simple :

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

Claude Code peut ensuite naviguer vers une URL, cliquer sur des elements, remplir des formulaires, prendre des screenshots, et lire le contenu de la page. Tout se passe dans un Chromium sandboxe.

Forces et limites

Forces :

Reproductibilite — chaque session demarre dans un etat vierge identique
Isolation — aucune interference avec votre navigation personnelle
Stabilite — projet mature, maintenu par Microsoft et Anthropic
CI/CD compatible — tourne sans interface graphique (mode headless)
Multi-navigateur — supporte Chromium, Firefox, WebKit

Limites :

Pas de sessions — impossible d'acceder a un site ou vous etes deja connecte
Pas d'extensions — pas d'ad blocker, pas de gestionnaire de mots de passe
Chromium =/= Chrome — le rendu peut differer legerement de votre Chrome reel
Lourd — telecharge et lance un Chromium complet a chaque session

superpowers-chrome : votre Chrome, vos sessions

Comment ca marche

superpowers-chrome prend l'approche inverse. Au lieu de lancer un navigateur isole, il se connecte a votre Chrome reel via le Chrome DevTools Protocol (CDP). Votre Chrome, avec vos onglets, vos cookies, vos sessions, vos extensions — tout est la.

La seule contrainte : Chrome doit etre lance avec le flag de remote debugging :

# macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

# Linux
google-chrome --remote-debugging-port=9222

# Windows
chrome.exe --remote-debugging-port=9222

Piege classique au premier lancement : si Chrome est deja ouvert, le flag --remote-debugging-port est ignore silencieusement. Chrome detecte qu'une instance tourne deja et s'y rattache — sans activer le port de debug. Resultat : superpowers-chrome ne peut pas se connecter et affiche l'erreur "Chrome n'est pas lance en mode Remote Debugging".

La solution : fermer Chrome completement (toutes les fenetres + verifier qu'aucun processus Chrome ne tourne en arriere-plan), puis le relancer avec le flag. Sur macOS, un Cmd+Q ne suffit pas toujours — Chrome peut rester en memoire. En cas de doute :

# Forcer la fermeture de tous les processus Chrome
pkill -f "Google Chrome"

# Puis relancer avec le flag
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Astuce : creez un alias dans votre ~/.zshrc pour ne plus y penser :

alias chrome-debug='/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222'

Une fois Chrome ouvert avec ce flag, superpowers-chrome peut s'y connecter et tout piloter : naviguer, cliquer, saisir du texte, executer du JavaScript, lire le DOM, prendre des screenshots.

Skill Mode vs MCP Mode

superpowers-chrome offre deux modes d'utilisation :

Skill Mode — des commandes slash directement dans Claude Code :

/chrome navigate https://example.com
/chrome screenshot
/chrome click "#login-button"
/chrome type "#email" "user@example.com"
/chrome evaluate "document.title"

MCP Mode — les memes capacites exposees comme outils MCP, utilisables par l'agent IA de maniere autonome dans ses workflows. Claude Code choisit lui-meme quand naviguer, quand cliquer, quand capturer.

Le Skill Mode est pratique pour des actions ponctuelles (debug rapide, capture). Le MCP Mode est plus puissant pour les workflows automatises ou Claude Code enchaine les actions sans intervention.

Les 17 commandes

Commande	Description
`/chrome navigate <url>`	Naviguer vers une URL
`/chrome screenshot`	Capture d'ecran de l'onglet actif
`/chrome click <selector>`	Cliquer sur un element CSS
`/chrome type <selector> <text>`	Saisir du texte dans un champ
`/chrome evaluate <js>`	Executer du JavaScript dans la page
`/chrome network`	Afficher les logs reseau
`/chrome console`	Afficher les logs console
`/chrome html [selector]`	Recuperer le HTML (page ou element)
`/chrome tabs`	Lister les onglets ouverts
`/chrome select-tab <id>`	Changer d'onglet
`/chrome scroll <direction>`	Scroller dans la page
`/chrome wait <ms>`	Attendre un delai
`/chrome cookies [domain]`	Lire les cookies
`/chrome storage <type>`	Lire localStorage/sessionStorage
`/chrome styles <selector>`	Inspecter les styles CSS computes
`/chrome accessibility`	Arbre d'accessibilite de la page
`/chrome performance`	Metriques de performance

Forces et limites

Forces :

Chrome reel — c'est votre navigateur, avec votre profil complet
Sessions conservees — connecte a Gmail, GitHub, dashboards admin, etc.
Extensions actives — ad blockers, password managers, dev tools
Pas de telechargement — utilise le Chrome deja installe
Dual mode — Skill (commandes manuelles) + MCP (automatise)
Leger — se connecte via CDP, pas de process supplementaire

Limites :

BETA — version 1.8.0, peut contenir des bugs
Chrome uniquement — pas de Firefox ou Safari
Non reproductible — l'etat depend de votre session Chrome
Flag obligatoire — Chrome doit etre lance avec --remote-debugging-port=9222
Securite — le port CDP expose votre Chrome, a utiliser en local uniquement

Comparatif detaille

Critere	superpowers-chrome	Playwright MCP
Navigateur	Chrome reel de l'utilisateur	Chromium isole (sandboxe)
Sessions/cookies	Conserves (profil complet)	Aucune (navigateur vierge)
Extensions	Toutes actives	Aucune
Mode d'utilisation	Skill (`/chrome`) + MCP	MCP uniquement
Installation	Plugin Claude Code	`npx @anthropic/playwright-mcp`
Connexion	Chrome DevTools Protocol (CDP)	API Playwright interne
Prerequis	Chrome + flag `--remote-debugging-port`	Node.js uniquement
Mode headless	Non (Chrome reel avec UI)	Oui (natif)
CI/CD	Non adapte	Ideal
Reproductibilite	Non (depend de l'etat Chrome)	Oui (etat vierge garanti)
Multi-navigateur	Chrome uniquement	Chromium, Firefox, WebKit
Maturite	BETA (v1.8.0)	Stable
Maintenu par	Communaute (obra)	Microsoft + Anthropic
Licence	MIT	Apache 2.0

Quand utiliser lequel ?

Scenario 1 : debug visuel d'un site en production

Vous avez un bug CSS signale par un client. Vous voulez voir la page telle qu'elle apparait dans un vrai navigateur, avec les polices chargees, les images en cache, et le rendu exact de Chrome.

Outil : superpowers-chrome. Il utilise votre Chrome reel — meme moteur de rendu que vos utilisateurs. Vous pouvez inspecter les styles, lire le DOM, prendre un screenshot et le partager. Pas besoin de reconfigurer quoi que ce soit.

/chrome navigate https://client-site.com/page-buggee
/chrome screenshot
/chrome styles ".header-nav"
/chrome console

Scenario 2 : tests E2E automatises

Vous ecrivez des tests d'integration pour verifier que le formulaire d'inscription fonctionne : saisir un email, un mot de passe, cliquer sur "S'inscrire", verifier le message de confirmation.

Outil : Playwright. Les tests doivent etre reproductibles. Chaque execution doit partir d'un etat vierge — pas de cookies, pas de sessions precedentes. Playwright garantit cette isolation. C'est aussi le seul qui tourne en CI/CD sans interface graphique.

Scenario 3 : scraping avec authentification

Vous voulez extraire des donnees d'un dashboard SaaS ou vous etes connecte. Le site utilise OAuth, des cookies httpOnly, et un token CSRF.

Outil : superpowers-chrome. Votre session est deja active dans Chrome. Pas besoin de scripter un flow de login complexe. superpowers-chrome accede directement aux pages protegees parce que Chrome a deja les cookies d'authentification.

/chrome navigate https://app.saas-tool.com/dashboard
/chrome html ".data-table"
/chrome evaluate "JSON.stringify([...document.querySelectorAll('.row')].map(r => r.textContent))"

Scenario 4 : captures d'ecran pour documentation

Vous redigez un article ou une doc technique et vous avez besoin de captures d'ecran de votre site en developpement local.

Outil : superpowers-chrome. C'est le plus direct. Naviguez vers localhost:3000, prenez le screenshot, continuez votre travail. Pas de configuration supplementaire, pas de Chromium a lancer separement.

/chrome navigate http://localhost:3000
/chrome screenshot

Si par contre vous avez besoin de captures dans plusieurs resolutions (mobile, tablette, desktop) de maniere automatisee, Playwright est mieux adapte grace a ses viewports configurables.

Ma configuration

Voici comment j'ai configure les deux outils pour coexister. Dans mon CLAUDE.md, la regle est simple : superpowers-chrome par defaut, Playwright en fallback.

superpowers-chrome est installe comme plugin Claude Code :

# Installation (une seule fois)
/plugin marketplace add obra/superpowers-marketplace
/plugin install superpowers-chrome@superpowers-marketplace

Playwright MCP est configure dans ~/.claude.json :

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

Pour le quotidien, je lance Chrome avec le flag de debug au demarrage de ma session de travail :

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Et dans mon CLAUDE.md, j'ai ajoute une section qui explique a Claude quand utiliser l'un ou l'autre. Resultat : quand je demande "prends un screenshot du site", Claude utilise superpowers-chrome. Quand je demande "lance les tests E2E", il utilise Playwright.

Le point important : les deux peuvent coexister. Il n'y a pas de conflit. Ils utilisent des mecanismes completement differents (CDP vs instance Playwright). C'est comme avoir un tournevis plat et un cruciforme — on ne choisit pas l'un "contre" l'autre, on prend celui qui correspond a la vis.

Conclusion

superpowers-chrome et Playwright MCP ne sont pas en concurrence. Ils repondent a des besoins differents :

superpowers-chrome est votre outil de travail quotidien — debug, inspection, captures, scraping avec auth. C'est votre Chrome, avec tout votre contexte.
Playwright est votre outil de test et d'automatisation — environnement propre, reproductible, compatible CI/CD.

La bonne configuration, c'est d'avoir les deux. superpowers-chrome en premiere intention pour le travail interactif. Playwright quand vous avez besoin d'un environnement isole ou d'un workflow reproductible.

superpowers-chrome est encore en BETA (v1.8.0), mais il est deja tres fonctionnel pour le cas d'usage principal : piloter votre vrai navigateur depuis le terminal. Et c'est un cas d'usage que Playwright ne couvre pas — par design.

superpowers-chrome sur GitHub

Le plugin Claude Code pour piloter votre Chrome reel via le Chrome DevTools Protocol.

Voir sur GitHub

Playwright MCP

Le serveur MCP officiel Anthropic/Microsoft pour l'automatisation de navigateur avec Playwright.

Voir sur GitHub

Retour aux articles