Vous pourrez contrôler n'importe quel site web avec l'IA : J'ai fait piloter Gemini par Claude et c'est époustouflant

Playwright est un puissant framework open-source pour les tests et l'automatisation web. Développé par Microsoft, il permet aux développeurs d'automatiser de manière fiable les interactions sur Chromium, Firefox et WebKit avec une API unique. Sa vitesse, sa fiabilité et sa prise en charge des fonctionnalités web modernes en font un moteur idéal pour les tests automatisés et les tâches complexes d'IA basées sur le navigateur.

Le Model Context Protocol (MCP) devient rapidement la norme pour connecter les modèles d'IA aux outils et données externes. Pour les développeurs et les utilisateurs avancés, le "saint graal" de l'IA locale est de donner au modèle des yeux et des mains : la capacité de voir une page web et d'interagir avec elle.

L'Application de Bureau Claude est une application native qui apporte la puissance des modèles d'IA Claude d'Anthropic directement sur votre bureau. Contrairement à la version web, l'application de bureau est conçue pour s'intégrer profondément à votre environnement local, ce qui en fait l'hôte idéal pour les serveurs MCP nécessitant un accès aux ressources locales, fichiers et outils comme Playwright.

Playwright MCP agit comme ce pont. Contrairement aux outils de scraping standard qui se contentent de récupérer le HTML, le serveur Playwright MCP crée un canal de communication bidirectionnel entre Claude Desktop et un moteur de navigateur Playwright. Cela permet à Claude de naviguer, cliquer, taper et même inspecter l'arbre d'accessibilité des pages web en temps réel.

Dans ce tutoriel, nous nous concentrerons sur la configuration du Pont Playwright MCP sur Windows, en soulignant spécifiquement comment connecter Claude à une session de navigateur existante (via l'extension Bridge) pour contourner les flux d'authentification complexes.

Prérequis

Avant de modifier les fichiers de configuration, assurez-vous que votre environnement Windows permet l'exécution de serveurs locaux.

1. Node.js (Version LTS) sous Windows : Le serveur Playwright MCP est une application Node.js. Vous devez avoir Node.js version 18 ou supérieure installée directement sur votre système Windows.

   node --version
   

2. Application de Bureau Claude : Vous devez utiliser l'application Windows installée, et non la version navigateur web (claude.ai), car la version web ne peut pas se connecter aux serveurs MCP locaux.
3. Navigateurs Playwright : Bien que le paquet les télécharge souvent automatiquement, il est recommandé d'installer les dépendances manuellement pour éviter les erreurs de délai d'attente lors de la première exécution.

   npx playwright install --with-deps
   

4. Abonnement Claude Pro (Recommandé) : Bien que les fonctionnalités MCP soient disponibles pour tous les utilisateurs, un plan payant Claude Pro est fortement recommandé. Les tâches d'automatisation du navigateur impliquent souvent de multiples allers-retours de messages pendant que Claude "réfléchit" à travers la navigation et l'extraction, ce qui peut rapidement consommer les limites d'utilisation du niveau gratuit.

1

Configuration du Serveur MCP

Le cœur de cette configuration est le fichier claude_desktop_config.json. Ce fichier indique à l'Application de Bureau Claude quels outils locaux elle est autorisée à lancer et avec lesquels elle peut communiquer.

1. Localiser le Fichier de Configuration : Sous Windows, ce fichier se trouve dans votre dossier AppData. Ouvrez l'Explorateur de fichiers et naviguez vers : %AppData%\Claude\claude_desktop_config.json (Si le dossier ou le fichier n'existe pas, créez-le manuellement).

2. Définir le Serveur : Ouvrez le fichier dans un éditeur de texte (comme VS Code ou Notepad) et ajoutez la configuration du serveur Playwright MCP. Nous utiliserons le paquet @playwright/mcp via npx pour que vous exécutiez toujours la dernière version.

   claude_desktop_config.json

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

   • command : Nous utilisons npx pour exécuter le paquet node.
   • args : Le drapeau -y supprime l'invite "Êtes-vous sûr de vouloir installer...", ce qui est critique car Claude crée un shell non interactif.

3. Redémarrer Claude : Quittez complètement l'application de bureau Claude (vérifiez la barre d'état système pour vous assurer qu'elle est fermée) et rouvrez-la.

2

Le Pont – Connexion à une Session Existante

Les instances Playwright standard sont "incognito" par défaut — elles ne partagent pas vos cookies ou états de connexion. Pour permettre à Claude d'interagir avec des sites où vous êtes déjà connecté (comme GitHub, Jira ou des outils d'entreprise internes), nous utilisons le Pont Playwright MCP.

1. Installer l'Extension Chrome : L'extension officielle Playwright MCP n'est pas disponible sur le Chrome Web Store. Vous devez la télécharger manuellement depuis le dépôt officiel.

   • Télécharger : Allez sur la Page des versions de Playwright MCP et téléchargez le dernier code source ou le zip de l'extension.
   • Installer : Décompressez le contenu. Ouvrez Chrome et allez sur chrome://extensions. Activez le "Mode développeur" en haut à droite, puis cliquez sur "Charger l'extension non empaquetée" et sélectionnez le dossier que vous venez de décompresser.
   Configuration du Mode Extension

   Pour activer spécifiquement le mode extension, vous devez mettre à jour vos arguments de configuration pour inclure le drapeau --extension :

   claude_desktop_config.json

   "args": [
     "-y",
     "@playwright/mcp@latest",
     "--extension"
   ]
   

2. Lancer via le Pont : Lorsque vous demandez à Claude d'effectuer une tâche maintenant, il cherchera une instance de navigateur connectée via le pont au lieu de lancer une nouvelle fenêtre sans tête. Cela vous permet de vous connecter manuellement, puis de passer le contrôle à Claude.

   La première fois que vous initiez une connexion, votre navigateur demandera probablement une permission explicite pour permettre au serveur Playwright MCP de prendre le contrôle de l'onglet.

Vous saurez que la connexion est réussie lorsque vous verrez le navigateur lancé et contrôlé avec succès par le serveur, souvent indiqué par un état de navigateur distinct ou un message dans la console vérifiant la session active.

Rapports Automatisés de Tableau de Bord Personnel

L'une des utilisations les plus pratiques de ce pont est la récupération de données personnelles depuis des "jardins clos" — des sites qui nécessitent une connexion et n'offrent pas d'API facile à utiliser pour vos besoins spécifiques.

Scénario : Vous voulez vérifier votre utilisation de l'API ou votre statut de facturation sans naviguer manuellement à travers des tableaux de bord complexes.

Exemple de Prompt

Va sur la plateforme Deepseek et dis-moi combien j'ai consommé ce mois-ci.

Le Processus

1. Navigation : Claude navigue vers le tableau de bord Deepseek.
2. Authentification : Parce que vous utilisez le Pont connecté à votre session Chrome existante, vous êtes probablement déjà connecté. Sinon, vous pouvez vous connecter manuellement pendant que Claude regarde.
3. Extraction : Claude trouve l'élément spécifique affichant les statistiques d'utilisation/facturation et vous en fait rapport.

Avantage Clé

Le plus grand avantage ici est la sécurité et la commodité. Vous n'avez pas besoin de fournir votre nom d'utilisateur, mot de passe ou clés API dans le prompt lui-même. Puisque Claude conduit votre instance de navigateur existante, il "profite" de vos cookies de session actifs. Cela garde vos identifiants en sécurité et hors de l'historique de chat.

Usage Général

Cette approche se généralise à toute plateforme où vous devez récupérer des données en "lecture seule" derrière un mur d'authentification — vérifier les soldes bancaires, vérifier l'utilisation des abonnements SaaS ou surveiller les tableaux de bord de statut — le tout sans écrire une seule ligne de code de scraping.

Collaboration LLM-à-LLM (Validation Agentique)

Et si vous pouviez faire travailler deux puissantes IA ensemble ? Avec Playwright MCP, Claude peut "conduire" d'autres LLM basés sur le web comme Gemini ou ChatGPT.

Scénario : Vous voulez recouper des instructions techniques ou combiner les connaissances de deux modèles.

Exemple de Prompt

Va sur gemini.google.com et demande comment installer playwright dans l'Application Windows Claude. Vérifie les instructions que tu obtiens et dis-moi si elles sont correctes.

Le Processus

1. Navigation : Claude va sur l'URL de Gemini.
2. Interaction : Il tape la requête dans la boîte de chat de Gemini et l'envoie.
3. Synthèse : Claude lit la réponse de Gemini à l'écran, la compare avec sa propre base de connaissances interne et valide l'exactitude — créant effectivement un système de "revue par les pairs" pour les sorties d'IA.

Pourquoi cela fonctionne

Cela transforme le navigateur web en une interface universelle pour tout modèle d'IA, vous permettant de construire des flux de travail complexes où un agent agit comme "l'exécuteur" et l'autre comme le "consultant" ou le "vérificateur".

Conclusion

L'intégration de Playwright avec Claude Desktop via MCP transforme l'IA d'un générateur de texte passif en un agent actif capable d'effectuer un travail dans le monde réel.

Cette configuration est un changement de paradigme pour les flux de travail basés sur le navigateur, débloquant des capacités qui nécessitaient auparavant des scripts personnalisés fragiles :

• Recherche Approfondie — Extraire et synthétiser des données à travers des sources disparates
• Collaboration IA — Créer une interface universelle pour l'interaction agent-à-agent
• Automatisation Administrative — Gérer des tâches répétitives au sein de portails authentifiés
• Opérations en Plusieurs Étapes — Exécuter des flux de travail complexes avec une prise de décision intelligente

Peut-être plus important encore, cette configuration permet une nouvelle ère de collaboration IA-à-IA, où un modèle peut examiner par les pairs, valider ou consulter un autre via l'interface universelle du web.

La combinaison du raisonnement de Claude avec l'exécution de Playwright crée un moteur robuste pour l'automatisation intelligente.

En utilisant la configuration Bridge, vous contournez le plus grand obstacle — l'authentification — vous permettant de tirer parti de cette puissance immédiatement.

Références

• Documentation du Model Context Protocol (MCP)
• Dépôt GitHub de Playwright MCP
• Extension Officielle Playwright MCP (Versions GitHub)

Rejoignez la conversation ! Vous avez des questions ou un cas d'utilisation génial pour le Pont Playwright MCP ? Partagez vos pensées dans la section commentaires ci-dessous (compte GitHub requis).