# Rapport de comparaison complet des MCP d'automatisation de navigateur

<table width="100%">
<tr>
<td><a href="../">← Retour à Claude Code Best Practice</a></td>
<td align="right"><img src="../../!/claude-jumping.svg" alt="Claude" width="60" /></td>
</tr>
</table>

## 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

```bash
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é)

```bash
# 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

```bash
# 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

- [Chrome DevTools MCP - GitHub](https://github.com/ChromeDevTools/chrome-devtools-mcp)
- [Anthropic - Piloting Claude in Chrome](https://claude.com/blog/claude-for-chrome)
- [Centre d'aide Claude in Chrome](https://support.claude.com/en/articles/12012173-getting-started-with-claude-in-chrome)
- [Playwright MCP - GitHub](https://github.com/microsoft/playwright-mcp)
- [Simon Willison - Using Playwright MCP with Claude Code](https://til.simonwillison.net/claude-code/playwright-mcp-claude-code)
- [Testomat.io - Playwright MCP Claude Code](https://testomat.io/blog/playwright-mcp-claude-code/)
- [MCP Integration Guide - Scrapeless](https://www.scrapeless.com/en/blog/mcp-integration-guide)
- [Chrome DevTools MCP Guide - Vladimir Siedykh](https://vladimirsiedykh.com/blog/chrome-devtools-mcp-ai-browser-debugging-complete-guide-2025)
- [Addy Osmani - Give your AI eyes](https://addyosmani.com/blog/devtools-mcp/)

---

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