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

Le problème : 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. Vérifier un rendu CSS. Debugger un comportement JavaScript. Prendre une capture d'écran pour documenter un bug. Scraper une page protégée par un login.

Pour tout ça, il faut que l'agent IA puisse piloter un navigateur. Deux outils existent dans l'écosystème Claude Code : Playwright MCP (le standard Microsoft) et superpowers-chrome (un plugin qui contrôle votre vrai Chrome). Ils font des choses similaires, mais avec des philosophies très différentes.

Playwright MCP : le standard Microsoft

Comment ça marche

Playwright est un framework de test et d'automatisation développé par Microsoft. Le Playwright MCP expose ses capacités à Claude Code via le protocole MCP. Quand vous l'utilisez, Playwright lance une instance Chromium isolée - un navigateur complètement 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 éléments, remplir des formulaires, prendre des screenshots, et lire le contenu de la page. Tout se passe dans un Chromium sandboxé.

Forces et limites

Forces :

• Reproductibilité - chaque session démarre dans un état vierge identique
• Isolation - aucune interférence avec votre navigation personnelle
• Stabilité - 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'accéder à un site où vous êtes déjà connecté
• Pas d'extensions - pas d'ad blocker, pas de gestionnaire de mots de passe
• Chromium =/= Chrome - le rendu peut différer légèrement de votre Chrome réel
• Lourd - télécharge et lance un Chromium complet à chaque session

superpowers-chrome : votre Chrome, vos sessions

Comment ça marche

superpowers-chrome prend l'approche inverse. Au lieu de lancer un navigateur isolé, il se connecte à votre Chrome réel via le Chrome DevTools Protocol (CDP). Votre Chrome, avec vos onglets, vos cookies, vos sessions, vos extensions - tout est là.

La seule contrainte : Chrome doit être 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

Piège classique au premier lancement : si Chrome est déjà ouvert, le flag --remote-debugging-port est ignore silencieusement. Chrome détecte qu'une instance tourne déjà et s'y rattache - sans activer le port de debug. Résultat : superpowers-chrome ne peut pas se connecter et affiche l'erreur "Chrome n'est pas lance en mode Remote Debugging".

La solution : fermer Chrome complètement (toutes les fenêtres + vérifier qu'aucun processus Chrome ne tourne en arrière-plan), puis le relancer avec le flag. Sur macOS, un Cmd+Q ne suffit pas toujours - Chrome peut rester en mémoire. 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 : créez 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, exécuter 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 mêmes capacités exposées comme outils MCP, utilisables par l'agent IA de manière autonome dans ses workflows. Claude Code choisit lui-même 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 automatisés ou Claude Code enchaîne les actions sans intervention.

Les 17 commandes

Forces et limites

Forces :

• Chrome réel - c'est votre navigateur, avec votre profil complet
• Sessions conservées - connecte à Gmail, GitHub, dashboards admin, etc.
• Extensions actives - ad blockers, password managers, dev tools
• Pas de téléchargement - utilise le Chrome déjà installe
• Dual mode - Skill (commandes manuelles) + MCP (automatise)
• Léger - se connecte via CDP, pas de process supplémentaire

Limites :

• BETA - version 1.8.0, peut contenir des bugs
• Chrome uniquement - pas de Firefox ou Safari
• Non reproductible - l'état dépend de votre session Chrome
• Flag obligatoire - Chrome doit être lance avec --remote-debugging-port=9222
• Sécurité - le port CDP expose votre Chrome, à utiliser en local uniquement

Comparatif détaille

Quand utiliser lequel ?

Scénario 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 apparaît dans un vrai navigateur, avec les polices chargées, les images en cache, et le rendu exact de Chrome.

Outil : superpowers-chrome. Il utilise votre Chrome réel - même 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

Scénario 2 : tests E2E automatisés

Vous écrivez des tests d'intégration pour vérifier que le formulaire d'inscription fonctionne : saisir un email, un mot de passe, cliquer sur "S'inscrire", vérifier le message de confirmation.

Outil : Playwright. Les tests doivent être reproductibles. Chaque exécution doit partir d'un état vierge - pas de cookies, pas de sessions précédentes. Playwright garantit cette isolation. C'est aussi le seul qui tourne en CI/CD sans interface graphique.

Scénario 3 : scraping avec authentification

Vous voulez extraire des données d'un dashboard SaaS où vous êtes connecte. Le site utilise OAuth, des cookies httpOnly, et un token CSRF.

Outil : superpowers-chrome. Votre session est déjà active dans Chrome. Pas besoin de scripter un flow de login complexe. superpowers-chrome accède directement aux pages protégées parce que Chrome a déjà 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))"

Scénario 4 : captures d'écran pour documentation

Vous rédigez un article où une doc technique et vous avez besoin de captures d'écran de votre site en développement local.

Outil : superpowers-chrome. C'est le plus direct. Naviguez vers localhost:3000, prenez le screenshot, continuez votre travail. Pas de configuration supplémentaire, pas de Chromium à lancer séparément.

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

Si par contre vous avez besoin de captures dans plusieurs résolutions (mobile, tablette, desktop) de manière automatisée, Playwright est mieux adapte grâce à ses viewports configurables.

Ma configuration

Voici comment j'ai configuré les deux outils pour coexister. Dans mon CLAUDE.md, la règle est simple : superpowers-chrome par défaut, 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 configuré dans ~/.claude.json :

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

Pour le quotidien, je lance Chrome avec le flag de debug au démarrage 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 à Claude quand utiliser l'un où l'autre. Résultat : 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 mécanismes complètement différents (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 à la vis.

Conclusion

superpowers-chrome et Playwright MCP ne sont pas en concurrence. Ils répondent à des besoins différents :

• 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 première intention pour le travail interactif. Playwright quand vous avez besoin d'un environnement isolé ou d'un workflow reproductible.

superpowers-chrome est encore en BETA (v1.8.0), mais il est déjà très 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.