Guide Technique 12 min de lecture Claude Code

Claude Code + Playwright MCP : Automatiser tes Tests E2E avec l'IA

Mis à jour le 27 mars 2026

Les tests end-to-end sont essentiels mais chronophages à écrire et à maintenir. Avec le MCP Server Playwright, Claude Code prend le contrôle d'un vrai navigateur : il navigue, clique, remplit des formulaires, prend des screenshots et vérifie que tout fonctionne — le tout piloté par tes instructions en langage naturel. Ce guide te montre comment installer, configurer et exploiter Playwright MCP avec Claude Code pour automatiser tes tests E2E de A à Z.

Si tu découvres les MCP Servers, commence par le guide des MCP Servers de Claude Code. Pour une vue d'ensemble de Claude Code, consulte le guide complet de Claude Code.

Pourquoi combiner Playwright et Claude Code via MCP ?

Playwright est le framework de tests E2E le plus puissant du marché. Claude Code est l'IA de coding la plus capable. Ensemble, via le protocole MCP (Model Context Protocol), ils créent un workflow où l'IA écrit, exécute et débugge tes tests automatiquement.

Le problème des tests E2E traditionnels

Écrire des tests E2E classiques, c'est pénible. Tu dois :

Identifier les sélecteurs CSS/XPath pour chaque élément de l'interface.
Écrire du code répétitif : navigation, attente, assertions, gestion des timeouts.
Maintenir les tests : à chaque changement d'UI, les sélecteurs cassent et les tests aussi.
Debugger à l'aveugle : quand un test échoue, tu ne vois pas ce qui se passe réellement dans le navigateur.

Résultat : la plupart des équipes abandonnent les tests E2E ou les laissent pourrir. C'est un classique.

Ce que le MCP Playwright change

Avec le MCP Playwright, Claude Code contrôle directement un navigateur Chromium. Concrètement, il peut :

Naviguer sur n'importe quelle URL : ton app locale, un site en staging, en production.
Interagir avec les éléments : cliquer, taper du texte, scroller, survoler, drag & drop.
Prendre des screenshots : capture d'écran à chaque étape pour vérification visuelle.
Analyser visuellement la page : détecter des régressions CSS, des éléments manquants, des layouts cassés.
Générer des tests Playwright réutilisables : transformer une session exploratoire en fichier .spec.ts.

L'IA ne se contente pas d'exécuter des instructions mécaniques. Elle comprend ce qu'elle voit et adapte ses actions en conséquence. Un bouton qui a changé de place ? Elle le retrouve. Un texte d'erreur inattendu ? Elle le signale.

Communauté gratuite

Rejoins +4 000 membres qui apprennent l'automatisation IA

Ressources, entraide et challenges hebdomadaires. 100% gratuit.

Rejoindre gratuitement →

Comment installer le MCP Server Playwright ?

L'installation est rapide — une seule commande suffit. Le MCP Server Playwright est maintenu par Anthropic et s'intègre nativement avec Claude Code.

Prérequis

Avant de commencer, vérifie que tu as :

Node.js 18+ installé (vérifie avec node --version).
Claude Code installé et fonctionnel (vérifie avec claude --version).
npm ou npx accessible dans ton terminal.

Étape 1 : Ajouter le MCP Server via la CLI

La méthode recommandée est la commande CLI :

claude mcp add playwright -- npx @anthropic-ai/mcp-playwright

Cette commande enregistre le MCP Server Playwright dans ta configuration Claude Code. Au premier lancement, npx télécharge le package et installe les navigateurs nécessaires (Chromium principalement).

Étape 2 : Configuration manuelle (alternative)

Si tu préfères configurer manuellement, ajoute cette entrée dans ton fichier settings.json :

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

Place ce fichier dans ~/.claude/settings.json pour un usage global, ou dans .claude/settings.json à la racine de ton projet pour un usage local.

Étape 3 : Vérifier l'installation

Lance Claude Code et teste :

claude
> Ouvre https://example.com et prends un screenshot

Si Claude Code ouvre le site et t'affiche une capture d'écran, le MCP Playwright est opérationnel. En cas d'erreur, vérifie que Node.js est bien à jour et que npx est accessible depuis ton terminal.

Pour un aperçu complet de tous les MCP Servers disponibles, consulte le guide dédié aux MCP Servers.

Comment écrire des tests E2E avec Claude Code et Playwright ?

La force du MCP Playwright, c'est que tu décris tes tests en langage naturel. Claude Code se charge de les traduire en actions concrètes dans le navigateur.

Test basique : vérifier qu'une page charge

Le test le plus simple — vérifier qu'une page s'affiche correctement :

> Ouvre http://localhost:3000 et vérifie que :
> - Le titre h1 contient "Bienvenue"
> - Le bouton "Commencer" est visible et cliquable
> - Prends un screenshot du résultat

Claude Code navigue vers l'URL, inspecte les éléments et te confirme (ou infirme) chaque point avec un screenshot à l'appui.

Test de parcours utilisateur complet

Pour un scénario plus réaliste — un parcours d'inscription :

> Teste le parcours d'inscription sur http://localhost:3000 :
> 1. Clique sur "S'inscrire" dans la navbar
> 2. Remplis le formulaire : nom "Test User", email "test@example.com", mot de passe "SecurePass123!"
> 3. Clique sur "Créer mon compte"
> 4. Vérifie que la page de confirmation s'affiche avec le message "Compte créé"
> 5. Prends un screenshot à chaque étape

Claude Code exécute chaque étape séquentiellement, prend des captures et te signale immédiatement si quelque chose ne fonctionne pas comme prévu.

Test avec assertions précises

Tu peux demander des vérifications très spécifiques :

> Sur http://localhost:3000/pricing, vérifie que :
> - Il y a exactement 3 cartes de pricing
> - La carte "Pro" affiche "49€/mois"
> - Le bouton CTA de chaque carte redirige vers /checkout
> - Les prix sont alignés horizontalement sur desktop
> - Sur mobile (375px), les cartes sont empilées verticalement

Le MCP Playwright permet de tester le responsive en redimensionnant le viewport. Claude Code capture la version desktop et mobile pour comparaison visuelle.

Générer un fichier de test réutilisable

Une fois que tu as validé un parcours manuellement, demande à Claude Code de le figer en test automatisé :

> Génère un fichier Playwright test (.spec.ts) pour le parcours d'inscription
> qu'on vient de tester. Inclus les assertions, les waits explicites
> et les data-testid pour les sélecteurs.

Claude Code produit un fichier tests/signup.spec.ts prêt à intégrer dans ta CI/CD. Il utilise les bonnes pratiques de Claude Code pour générer du code propre et maintenable.

Comment debugger les tests Playwright avec Claude Code ?

Le debugging est là où le MCP Playwright brille vraiment. Au lieu de lire des stack traces abstraites, tu as une IA qui voit ce qui se passe dans le navigateur.

Debugging visuel en temps réel

Quand un test échoue, demande à Claude Code de le rejouer avec une analyse visuelle :

> Mon test d'inscription échoue à l'étape 3 (clic sur "Créer mon compte").
> Rejoue le parcours, prends un screenshot à chaque étape,
> et dis-moi ce qui bloque.

Claude Code exécute le parcours pas à pas. Il peut détecter :

Un bouton désactivé : le formulaire n'est pas valide, un champ requis est manquant.
Un overlay qui bloque le clic : une modale, un cookie banner, un loader non dismissé.
Un élément déplacé : le bouton existe mais il est hors de l'écran ou masqué par du CSS.
Une erreur réseau : l'API backend ne répond pas, un 500 silencieux.

Comparer avant/après un déploiement

Le MCP Playwright est parfait pour détecter les régressions visuelles :

> Compare visuellement ces deux versions de ma page d'accueil :
> 1. Ouvre https://staging.monapp.com et prends un screenshot
> 2. Ouvre https://monapp.com et prends un screenshot
> 3. Signale les différences visuelles entre les deux

Claude Code identifie les changements : un padding modifié, une couleur différente, un élément manquant, une police qui a changé. C'est du visual regression testing piloté par l'IA.

Inspecter les erreurs console et réseau

Au-delà du visuel, Claude Code peut analyser ce qui se passe sous le capot :

> Ouvre http://localhost:3000 et vérifie :
> - Y a-t-il des erreurs dans la console JavaScript ?
> - Y a-t-il des requêtes réseau en erreur (4xx, 5xx) ?
> - Y a-t-il des ressources qui ne chargent pas (images, CSS, JS) ?

Cette approche remplace des heures de debugging manuel. Tu obtiens un diagnostic complet en une seule commande.

Pour aller plus loin sur le debugging, consulte le guide des fonctionnalités avancées de Claude Code.

YouTube

Tutos Vibe Coding & IA chaque semaine

Rejoins +28 000 abonnés pour des tutoriels pratiques gratuits.

S'abonner sur YouTube →

Quels sont les cas d'usage avancés du MCP Playwright ?

Au-delà des tests E2E classiques, le MCP Playwright ouvre des possibilités que tu n'as probablement pas envisagées.

Cas 1 : Tests de régression automatisés

Après chaque déploiement, lance une batterie de tests visuels sur tes pages critiques :

> Ouvre les pages suivantes et vérifie qu'elles s'affichent correctement :
> - /          (homepage : hero + 3 sections + footer)
> - /pricing   (3 cartes pricing visibles)
> - /login     (formulaire de connexion fonctionnel)
> - /dashboard (après login avec test@example.com)
> Prends un screenshot de chaque page et signale toute anomalie.

Tu peux intégrer ce workflow dans tes pipelines CI/CD avec Claude Code en mode headless. Chaque push déclenche une vérification visuelle automatique.

Cas 2 : Scraping visuel et extraction de données

Le MCP Playwright n'est pas limité aux tests. Tu peux l'utiliser pour extraire des données de sites web :

> Ouvre https://competitor.com/pricing et extrais :
> - Les noms des plans
> - Les prix de chaque plan
> - Les features incluses dans chaque plan
> Formate le résultat en tableau Markdown.

Claude Code navigue sur le site, lit le contenu de la page et structure les données. Pas besoin d'écrire un scraper custom — l'IA s'adapte à n'importe quelle structure HTML.

Cas 3 : Monitoring de disponibilité

Utilise le MCP Playwright comme sonde de monitoring :

> Vérifie que https://monapp.com :
> - Répond en moins de 3 secondes
> - Affiche le logo et le titre correctement
> - N'a aucune erreur console
> - Le bouton "Connexion" est cliquable

Combiné avec les hooks d'automatisation de Claude Code, tu peux créer un monitoring qui se déclenche automatiquement et t'alerte en cas de problème.

Cas 4 : Tests d'accessibilité

Claude Code peut vérifier des critères d'accessibilité via le navigateur :

> Ouvre http://localhost:3000 et vérifie l'accessibilité :
> - Toutes les images ont un attribut alt
> - Les contrastes de couleurs sont suffisants (WCAG AA)
> - La navigation au clavier fonctionne (Tab/Enter)
> - Les formulaires ont des labels associés

Ce n'est pas un audit WCAG complet, mais c'est un premier filtre efficace qui attrape les problèmes les plus courants avant qu'ils n'arrivent en production.

Cas 5 : Génération de documentation visuelle

Besoin de documenter ton application ? Le MCP Playwright peut capturer automatiquement des screenshots annotés :

> Parcours les pages principales de http://localhost:3000 et génère
> un screenshot pour chaque page. Nomme les fichiers de manière descriptive.
> Liste chaque page avec son URL et une description d'une ligne.

Parfait pour maintenir une documentation visuelle à jour sans effort manuel. Tu peux aussi utiliser les intégrations Figma MCP en complément pour boucler la boucle design-code-documentation.

Bonnes pratiques pour le MCP Playwright

Quelques conseils pour tirer le maximum du MCP Playwright :

Utilise des data-testid : ajoute des attributs data-testid sur tes éléments clés. Claude Code les utilise en priorité pour des sélecteurs stables.
Teste sur ton serveur local : localhost est plus rapide et plus fiable qu'un serveur distant pour le développement.
Décris le résultat attendu : "Vérifie que le bouton est vert" est plus utile que "Clique sur le bouton".
Combine avec d'autres MCP : utilise le MCP Filesystem pour lire les fichiers de configuration et le MCP Playwright pour tester le résultat.
Génère des tests réutilisables : chaque session exploratoire devrait produire un fichier .spec.ts pour ta CI.

Maîtrise Playwright + Claude Code

Le programme LE LABO IA inclut des modules pratiques sur l'automatisation des tests avec Claude Code, les MCP Servers et l'intégration CI/CD.

Découvrir le Programme

Questions fréquentes

Faut-il installer Playwright séparément avant d'utiliser le MCP Playwright avec Claude Code ?

Non. Le MCP Server Playwright embarque sa propre instance de Playwright. Quand tu lances la commande claude mcp add playwright -- npx @anthropic-ai/mcp-playwright, tout est installé automatiquement. Tu n'as pas besoin d'un projet Playwright existant ni d'installer les navigateurs manuellement — le MCP s'en charge.

Le MCP Playwright fonctionne-t-il avec des sites protégés par authentification ?

Oui. Tu peux demander à Claude Code de naviguer vers une page de login, remplir les champs email/mot de passe, cliquer sur le bouton de connexion, puis continuer les tests sur les pages protégées. Le MCP maintient la session du navigateur entre les actions, donc les cookies et tokens d'authentification sont conservés.

Quelle est la différence entre le MCP Playwright et écrire des tests Playwright classiques ?

Avec des tests Playwright classiques, tu écris du code TypeScript/JavaScript qui s'exécute de manière autonome via la CLI Playwright. Avec le MCP Playwright, Claude Code contrôle directement un navigateur en temps réel : il peut naviguer, cliquer, prendre des screenshots et analyser visuellement les résultats. C'est plus interactif et idéal pour l'exploration, le debugging visuel et la génération de tests.

Le MCP Playwright peut-il tester des applications mobiles ou responsive ?

Oui. Tu peux demander à Claude Code d'émuler un appareil mobile (iPhone, Pixel, iPad) via le MCP Playwright. Il ajuste la taille du viewport, le user-agent et les paramètres tactiles. C'est parfait pour vérifier visuellement le rendu responsive de ton application sans basculer manuellement entre les tailles d'écran.

Combien de temps prend un test E2E via le MCP Playwright ?

Un test simple (navigation + vérification d'un élément) prend 5 à 15 secondes. Un parcours complet (login + navigation + formulaire + vérification) peut prendre 30 à 60 secondes. C'est plus lent qu'un test Playwright headless classique, mais le gain est dans l'intelligence : Claude Code interprète visuellement les résultats et adapte ses actions en temps réel.

Meydeey — Architecte IA & Automatisation

+110 entrepreneurs formés au Vibe Coding et à l'automatisation IA. Fondateur du Labo IA, +28K abonnés YouTube.

YouTube LinkedIn Communauté