gilles/claude-code-best-practice

Fork 0

Files

T

gilles e8f2b1a034 traduction

2026-06-02 23:24:21 +02:00

13 KiB

Raw Permalink Blame History

Rapport de comparaison complet des MCP d'automatisation de navigateur

← Retour à Claude Code Best Practice

Résumé exécutif

Sur la base d'une recherche approfondie, j'ai analysé les deux outils de tes captures d'écran plus un troisième concurrent majeur. Voici mon décryptage complet pour t'aider à choisir la meilleure option pour le test automatisé de ton travail.

1. Les trois concurrents

A. Chrome DevTools MCP (Ta capture d'écran nº1)

Source : Équipe officielle Google Chrome
Sortie : Aperçu public septembre 2025
Architecture : Construit sur le Chrome DevTools Protocol (CDP) + Puppeteer
Usage de tokens : ~19,0k tokens (9,5% du contexte)
Outils : 26 outils spécialisés répartis en 6 catégories

B. Claude in Chrome (Ta capture d'écran nº2)

Source : Extension officielle Anthropic
Sortie : Bêta, déploiement sur tous les plans payants (Pro, Max, Team, Enterprise)
Architecture : Extension de navigateur avec capacités computer-use
Usage de tokens : ~15,4k tokens (7,7% du contexte)
Outils : 16 outils incluant des capacités computer use

C. Playwright MCP (Alternative solide)

Source : Microsoft (officiel + implémentations communautaires)
Architecture : Automatisation basée sur l'arbre d'accessibilité
Usage de tokens : ~13,7k tokens (6,8% du contexte)
Outils : 21 outils

2. Comparaison détaillée des fonctionnalités

Fonctionnalité	Chrome DevTools MCP	Claude in Chrome	Playwright MCP
Objectif principal	Débogage & performance	Automatisation générale de navigateur	Test UI & E2E
Support de navigateur	Chrome uniquement	Chrome uniquement	Chromium, Firefox, WebKit
Efficacité en tokens	19,0k (9,5%)	15,4k (7,7%)	13,7k (6,8%)
Sélection d'éléments	Sélecteurs CSS/XPath	Visuel + DOM	Arbre d'accessibilité (sémantique)
Traces de performance	✅ Excellentes	❌ Non	⚠️ Limitées
Inspection réseau	✅ Analyse approfondie	⚠️ Basique	⚠️ Basique
Logs de console	✅ Accès complet	✅ Accès complet	⚠️ Limité
Multi-navigateur	❌ Non	❌ Non	✅ Oui
Intégration CI/CD	✅ Excellente	❌ Faible (requiert login)	✅ Excellente
Mode headless	✅ Oui	❌ Non	✅ Oui
Authentification	Requiert configuration	Utilise ta session	Requiert configuration
Tâches planifiées	❌ Non	✅ Oui	❌ Non
Coût	Gratuit	Requiert un plan payant	Gratuit
Mise en place locale	Node.js requis	Extension de navigateur	Node.js requis

3. Décomposition des outils

Chrome DevTools MCP (26 outils)

AUTOMATISATION D'ENTRÉE (8):  click, drag, fill, fill_form, handle_dialog,
                              hover, press_key, upload_file

NAVIGATION (6):               close_page, list_pages, navigate_page,
                              new_page, select_page, wait_for

ÉMULATION (2):                emulate, resize_page

PERFORMANCE (3):              performance_analyze_insight,
                              performance_start_trace, performance_stop_trace

RÉSEAU (2):                   get_network_request, list_network_requests

DÉBOGAGE (5):                 evaluate_script, get_console_message,
                              list_console_messages, take_screenshot,
                              take_snapshot

Claude in Chrome (16 outils)

CONTRÔLE NAVIGATEUR:          navigate, read_page, find, computer
                              (click, type, scroll)

INTERACTION FORMULAIRE:       form_input, javascript_tool

MÉDIA:                        upload_image, get_page_text, gif_creator

GESTION ONGLETS:              tabs_context_mcp, tabs_create_mcp

DÉVELOPPEMENT:                read_console_messages, read_network_requests

UTILITAIRES:                  shortcuts_list, shortcuts_execute,
                              resize_window, update_plan

Playwright MCP (21 outils)

NAVIGATION:                   navigate, goBack, goForward, reload

INTERACTION:                  click, fill, select, hover, press,
                              drag, uploadFile

REQUÊTES D'ÉLÉMENTS:          getElement, getElements, waitForSelector

ASSERTIONS:                   assertVisible, assertText, assertTitle

ÉTAT DE PAGE:                 screenshot, getAccessibilityTree,
                              evaluateScript

GESTION NAVIGATEUR:           newPage, closePage

4. Analyse des cas d'usage pour le test automatisé

Chrome DevTools MCP est le MEILLEUR pour :

✅ Test de performance

Enregistrement de traces de performance avec les Core Web Vitals
Identification des goulots de rendu et des décalages de mise en page
Détection de fuites mémoire et profilage CPU

✅ Débogage approfondi

Inspection des requêtes réseau (en-têtes, payloads, timing)
Analyse des erreurs de console et stack traces
Inspection du DOM en temps réel

✅ Pipelines CI/CD

Support de l'exécution headless
Automatisation stable, basée sur des scripts
Aucune dépendance à l'état d'authentification

Workflow idéal : « Trouve pourquoi cette page est lente » ou « Débogue cet appel API »

Claude in Chrome est le MEILLEUR pour :

✅ Assistance au test manuel

Tester en étant connecté à tes comptes
Test exploratoire avec contexte visuel
Enregistrer des workflows que tu peux rejouer

✅ Vérification rapide

Vérification de design (comparer Figma à la sortie)
Contrôle ponctuel de nouvelles fonctionnalités
Lecture des erreurs de console pendant le développement

✅ Tâches de navigateur récurrentes

Vérifications automatisées planifiées
Gestion de workflows multi-onglets
Apprentissage à partir de tes actions enregistrées

Workflow idéal : « Vérifie si mes changements ont l'air corrects » ou « Teste ce formulaire avec mon login »

Playwright MCP est le MEILLEUR pour :

✅ Automatisation de tests E2E

Test multi-navigateur (Chrome, Firefox, Safari)
Génération de scripts de test réutilisables
Génération de Page Object Model

✅ Test UI fiable

Arbre d'accessibilité = pas de sélecteurs instables
Interactions déterministes
Moins sujet à la casse lors de changements d'UI

✅ Intégration CI/CD

Mode headless pour les pipelines
Génère des fichiers de test Playwright depuis le langage naturel
Intégration avec les outils de gestion de tests

Workflow idéal : « Écris des tests E2E pour ce parcours utilisateur » ou « Teste ceci sur plusieurs navigateurs »

5. Analyse de l'efficacité en tokens

Outil	Usage de tokens	% du contexte	Note d'efficacité
Playwright MCP	~13,7k	6,8%	⭐⭐⭐⭐⭐ Meilleur
Claude in Chrome	~15,4k	7,7%	⭐⭐⭐⭐ Bon
Chrome DevTools MCP	~19,0k	9,5%	⭐⭐⭐ Acceptable

Impact : Avec un contexte de 200k tokens :

Playwright laisse 186,3k tokens pour ton travail
Claude in Chrome laisse 184,6k tokens
Chrome DevTools laisse 181k tokens

La différence de ~5,3k tokens entre Playwright et Chrome DevTools peut compter pour des sessions complexes avec beaucoup de contexte de code.

6. Considérations de sécurité

Chrome DevTools MCP

✅ Profil de navigateur isolé par défaut
✅ Aucune dépendance cloud
✅ Contrôle local complet
⚠️ Sécurité du port de débogage distant (utilise des profils isolés)

Claude in Chrome

⚠️ Taux de succès d'attaque de 23,6% sans mitigations (réduit à 11,2% avec défenses)
⚠️ Utilise ta session de navigateur réelle (risque d'exposition de cookies)
⚠️ Bloqué des sites financiers/adultes/piratés
⚠️ Toujours en bêta avec des vulnérabilités connues

Playwright MCP

✅ Contextes de navigateur isolés
✅ Aucune dépendance cloud
✅ Modèle de sécurité mature (soutien de Microsoft)
✅ Peut gérer l'authentification en sécurité

7. Commandes d'installation

Chrome DevTools MCP

claude mcp add chrome-devtools npx chrome-devtools-mcp@latest

Claude in Chrome

Installer depuis le Chrome Web Store (requiert un plan Pro/Max/Team/Enterprise)

Playwright MCP (Recommandé)

# D'abord, installer les navigateurs
npx playwright install

# Puis ajouter à Claude Code (portée user = tous les projets)
claude mcp add playwright -s user -- npx @playwright/mcp@latest

8. Recommandations

Pour ton workflow de test automatisé :

🥇 Outil principal : Playwright MCP

À utiliser pour : Test E2E au quotidien, vérification multi-navigateur, génération de scripts de test

Pourquoi :

Usage de tokens le plus faible (plus de contexte pour ton code)
Support multi-navigateur (Chrome, Firefox, Safari)
Approche par arbre d'accessibilité = sélecteurs plus fiables
Excellente intégration CI/CD
Peut générer de vrais fichiers de test Playwright
Gratuit, aucun abonnement requis

🥈 Outil secondaire : Chrome DevTools MCP

À utiliser pour : Débogage de performance, analyse réseau, Core Web Vitals

Pourquoi :

Inégalé pour les traces de performance et le débogage
Inspection approfondie des requêtes réseau
Outillage officiel Google avec support long terme
Essentiel quand tu dois répondre à « pourquoi est-ce lent ? »

🥉 Selon la situation : Claude in Chrome

À utiliser pour : Vérification manuelle rapide en étant connecté, test exploratoire, vérification de design

Pourquoi :

Bon pour des contrôles visuels rapides pendant le développement
Peut lire ton état connecté
Utile pour la vérification « est-ce que ça a l'air correct ? »
À éviter pour le CI/CD ou l'automatisation de tests sérieuse

9. Configuration recommandée

# Installer à la fois Playwright et Chrome DevTools MCP
npx playwright install
claude mcp add playwright -s user -- npx @playwright/mcp@latest
claude mcp add chrome-devtools -s user -- npx chrome-devtools-mcp@latest

Workflow suggéré

1. DÉVELOPPER  → Claude Code (terminal)
2. TESTER      → Playwright MCP (E2E, multi-navigateur)
3. DÉBOGUER    → Chrome DevTools MCP (performance, réseau)
4. VÉRIFIER    → Claude in Chrome (contrôles visuels rapides)
5. CI/CD       → Playwright MCP (headless, automatisé)

10. Verdict final

Si tu as besoin de...	Utilise ceci
Tests E2E multi-navigateur	Playwright MCP
Analyse de performance	Chrome DevTools MCP
Débogage réseau	Chrome DevTools MCP
Vérification visuelle rapide	Claude in Chrome
Automatisation CI/CD	Playwright MCP
Génération de scripts de test	Playwright MCP
Usage de tokens le plus faible	Playwright MCP
Test de session connectée	Claude in Chrome
Débogage de logs de console	Chrome DevTools MCP

Recommandation TL;DR :

Installe à la fois Playwright MCP et Chrome DevTools MCP. Utilise Playwright comme outil de test principal (plus économe en tokens, multi-navigateur, et meilleur pour l'E2E). Utilise Chrome DevTools quand tu as besoin d'une analyse de performance approfondie ou d'un débogage réseau. Utilise Claude in Chrome uniquement pour des vérifications manuelles rapides où tu as besoin de ta session connectée.

Sources

Ce rapport a été généré par Claude Code avec le modèle Opus 4.5 le 19 décembre 2025.

13 KiB Raw Permalink Blame History

Rapport de comparaison complet des MCP d'automatisation de navigateur

Résumé exécutif

1. Les trois concurrents

A. Chrome DevTools MCP (Ta capture d'écran nº1)

B. Claude in Chrome (Ta capture d'écran nº2)

C. Playwright MCP (Alternative solide)

2. Comparaison détaillée des fonctionnalités

3. Décomposition des outils

Chrome DevTools MCP (26 outils)

Claude in Chrome (16 outils)

Playwright MCP (21 outils)

4. Analyse des cas d'usage pour le test automatisé

Chrome DevTools MCP est le MEILLEUR pour :

Claude in Chrome est le MEILLEUR pour :

Playwright MCP est le MEILLEUR pour :

5. Analyse de l'efficacité en tokens

6. Considérations de sécurité

Chrome DevTools MCP

Claude in Chrome

Playwright MCP

7. Commandes d'installation

Chrome DevTools MCP

Claude in Chrome

Playwright MCP (Recommandé)

8. Recommandations

Pour ton workflow de test automatisé :

🥇 Outil principal : Playwright MCP

🥈 Outil secondaire : Chrome DevTools MCP

🥉 Selon la situation : Claude in Chrome

9. Configuration recommandée

Workflow suggéré

10. Verdict final

Recommandation TL;DR :

Sources

13 KiB

Raw Permalink Blame History