Automatisation de navigateur avec MCP pour Claude Code

Problème : Les tests de régression, le scraping de pages et le suivi manuel des flux QA bouffent une bonne partie de ta journée. Un serveur MCP navigateur confie tout ça à Claude.

Gain immédiat : Ajoute le serveur MCP Puppeteer dans ta config Claude Code et ta première automatisation est prête en quelques minutes. Colle ça dans ton fichier de configuration :

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Dis ensuite à Claude : « Ouvre un navigateur, navigue vers example.com et prends une capture d'écran ». Le navigateur, la navigation et la capture d'écran se font sans la moindre touche supplémentaire de ta part.

L'ancien travail de navigateur, c'est du câblage de sélecteurs, de la gestion d'état et cinquante lignes de code juste pour remplir un formulaire. Un serveur MCP navigateur inverse ça. Tu décris le résultat en mots et Claude conduit.

Au lieu d'écrire cinquante lignes de Puppeteer, dis : « Remplis ce formulaire de contact avec des données de test et soumet-le. » C'est tout le script.

Installer le serveur MCP navigateur

Configuration du serveur MCP Puppeteer

La config Puppeteer va dans ton fichier MCP. Utilise ~/.claude.json pour le CLI ou claude_desktop_config.json pour Desktop :

{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

Sauvegarde, redémarre Claude Code, et le serveur s'enregistre. Pour vérifier, demande à Claude de lancer un navigateur et d'ouvrir n'importe quelle URL.

Configuration du serveur MCP Playwright

Playwright te donne Chrome, Firefox et Safari en un seul package, c'est pour ça que les équipes le choisissent pour les vraies suites de tests. Installe d'abord @modelcontextprotocol/server-playwright :

npm install -g @modelcontextprotocol/server-playwright

Ensuite, enregistre-le dans ta config MCP :

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

Alternative Playwright MCP : Un build communautaire sur @executeautomation/playwright-mcp-server offre la même surface de base :

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

La couverture multi-navigateurs explique pourquoi la plupart des suites de tests sérieuses finissent sur Playwright MCP pour une automatisation poussée avec Claude Code.

Ce que tu peux lui demander de faire

Scraping web simplifié

Demande des données extraites en anglais simple. Une requête comme « Ouvre example.com, trouve tous les produits et extrait les titres et les prix dans un fichier CSV » déclenche le pipeline complet : lancement du navigateur, recherche d'éléments, extraction de données, écriture CSV.

Automatisation de tests de formulaires

Essaie ça : « Ouvre mon site de développement local sur localhost:3000, remplis le formulaire d'inscription avec des données de test, soumets-le et vérifie que le message de succès s'affiche ». Une phrase remplace toute la boucle QA manuelle. Claude visite l'URL, invente des inputs plausibles, remplit chaque champ et vérifie l'état de succès.

Tests de régression visuelle

Un snapshot sur trois breakpoints ressemble à : « Prends des captures d'écran de ma page d'accueil à différentes tailles d'écran (mobile, tablette, desktop) et sauvegarde-les dans ./screenshots/ ».

Parcours utilisateur multi-étapes

Les flux plus complexes marchent aussi. Essaie : « Simule un parcours d'achat e-commerce complet : parcours les produits, ajoute au panier, passe la commande avec des données de test et vérifie la page de confirmation ».

Flux d'authentification

Les états de connexion en une ligne : « Connecte-toi à mon environnement de staging, navigue vers le tableau de bord admin et vérifie que tous les liens de navigation fonctionnent ».

Surveillance des performances

Demande les temps aussi : « Ouvre mon app, mesure les temps de chargement du dashboard et signale les pages qui mettent plus de 3 secondes à charger ».

Résoudre les problèmes d'automatisation navigateur

Le navigateur ne démarre pas : Chrome ou Chromium doit être installé sur la machine. Sur Linux :

sudo apt-get install -y chromium-browser

Éléments introuvables : Les pages dynamiques ont besoin d'une attente. Dis à Claude : « Attends que le bouton de connexion soit visible avant de cliquer dessus. »

Timeouts : Les pages lentes ont besoin de plus de patience. Dis : « Navigue vers la page et attends jusqu'à 30 secondes qu'elle soit complètement chargée. »

Intégration dans ton workflow

L'automatisation navigateur s'intègre directement dans le reste de ta boucle de dev :

• Tests : Runs de régression pendant le build
• Debugging : Captures d'écran qui prouvent le bug
• Surveillance : Polling discret des pages de production
• Développement : Vérifications de fonctionnalités sur chaque navigateur

Optimisation du contexte avec MCP Tool Search

Ces serveurs s'associent bien avec MCP Tool Search. Tool Search ne tire les définitions Playwright ou Puppeteer dans le contexte que quand le travail nécessite réellement un navigateur, ce qui laisse ta fenêtre libre pour tout le reste.

Commence par de petits morceaux. Commence par une demande de capture d'écran. Passe à un formulaire. Puis construis ton chemin vers des parcours utilisateur end-to-end complets au fur et à mesure que le flux en langage naturel commence à sembler normal.