Donner un navigateur à Claude Code
Ouvrir des pages, remplir des formulaires, vérifier une interface. Sans noyer le contexte sous du HTML.
Tant que Claude ne voit pas le résultat, il code à l'aveugle. Il t'affirme que le bouton est bien centré, tu ouvres la page, il ne l'est pas. Donner un navigateur à Claude Code règle ça : il ouvre la page, prend une capture, et constate lui-même.
Le piège, c'est le contexte. Une page web brute représente des dizaines de milliers de tokens de HTML. Bien configuré, on n'en paie qu'une fraction.
Deux façons de faire
| Approche | Ce que Claude reçoit | Quand la choisir |
|---|---|---|
| Serveur MCP Playwright | Un arbre d'accessibilité, léger et structuré | Par défaut. Suffit à 90 % des cas |
| Pilotage direct via CDP | Ce que tu décides d'extraire | Sites complexes, sessions déjà connectées |
On installe la première. C'est celle qui demande le moins d'entretien.
Avant de commencer
- Node.js 20 ou plus récent
- Claude Code installé
- Une application locale à tester, ou juste un site public
1Brancher le serveur
claude mcp add playwright -- npx -y @playwright/mcp@latest
Relance Claude Code, puis vérifie :
claude mcp list
Au premier lancement, Playwright télécharge un navigateur. Compte une minute.
2Premier essai
Lance ton application, puis :
Ouvre http://localhost:3000, prends une capture, et decris-moi ce que tu vois
dans la moitie haute de la page.
Si tu obtiens une description fidèle, c'est branché. Sinon, le message d'erreur dit en général exactement ce qui manque.
3Faire vérifier au lieu de faire deviner
C'est là que ça devient utile. Au lieu de demander une correction dans le vide :
La grille de cartes deborde sur mobile. Passe en 390 px de large, mesure la
largeur de defilement du document et dis-moi quel element depasse, avec sa
classe. Ne corrige rien pour l'instant.
Claude mesure, te nomme le coupable, et tu décides ensuite. La séquence « mesurer, nommer, corriger, remesurer » évite les corrections au jugé qui en cassent une autre.
Toujours redemander une vérification après correction
« Corrige, puis reprends la mesure et confirme » vaut mieux que « corrige ». Sans la seconde mesure, tu n'as qu'une intention de correction.
4Garder le contexte au sec
Les trois réflexes qui font la différence :
- Demander une capture, pas le HTML. Une image se lit en un coup ; le DOM complet coûte cher et n'apporte rien pour juger une mise en page.
- Extraire au lieu de tout ramener. « Rends-moi seulement les textes des titres de niveau 2 » plutôt que « lis la page ».
- Fermer les onglets. Une session qui accumule vingt pages garde vingt états en mémoire.
Ouvre la page, prends une capture, et dis-moi seulement si le titre est
au-dessus de la ligne de flottaison. Ne me renvoie pas le HTML.
5Les sites qui demandent une connexion
Là, il faut être clair sur la limite : ne donne jamais tes identifiants dans un prompt. Deux options propres :
- Un compte de test dédié, avec des données sans valeur.
- Réutiliser ta session : Playwright peut se rattacher à un profil de navigateur déjà connecté, ce qui évite de manipuler le moindre mot de passe.
Ce qui est à l'écran finit dans le contexte
Une capture d'une page connectée contient ce que la page affiche, e-mails et données personnelles compris. Sur des données sensibles, préfère une extraction ciblée à une capture pleine page.
Ce que ça débloque vraiment
- Recette visuelle. « Compare cette page à la maquette et liste les écarts d'espacement. »
- Parcours de bout en bout. « Inscris-toi avec un e-mail jetable, confirme, connecte-toi, et dis-moi à quelle étape ça casse. »
- Régression avant commit. « Prends une capture des trois pages principales en 1440 et en 390, et signale ce qui déborde. »
- Extraction ponctuelle. « Sur cette page de documentation, liste les noms de toutes les options et leur valeur par défaut. »
Quelques prompts pour aller plus loin
| Objectif | Prompt à adapter |
|---|---|
| Débordement horizontal | Passe en [LARGEUR] px, compare scrollWidth et clientWidth, et nomme les elements dont le bord droit depasse. |
| Vérifier un thème | Ouvre la page en clair puis en sombre, et liste les textes dont le contraste passe sous 4,5:1. |
| Tester un parcours | Fais le parcours [ETAPES] et arrete-toi a la premiere etape qui echoue, avec une capture. |
| Extraire proprement | Sur [URL], rends-moi un tableau [COLONNES]. Rien d'autre, pas de HTML. |
Tu as d’autres ressources comme ça ?
Ce que tu viens de lire est entièrement gratuit. Une nouvelle ressource part chaque semaine dans la newsletter : guides, modèles à copier et liens triés, sans compte à créer.
Me contacter
Une question, un projet, une envie de collaborer ? Écris-moi.
Cette page est en accès libre, n’hésite pas à la partager.