Donner un navigateur à Claude, en une commande

Colle cette commande

Cette commande se colle dans le terminal (la fenêtre où tu tapes claude pour le lancer), pas dans une conversation avec Claude. S'il est ouvert, tape d'abord /exit pour en sortir. Fais-le depuis le dossier où tu travailles avec lui. Tu as déjà ajouté Playwright ? Passe à l'étape 2.

claude mcp add playwright -- npx @playwright/mcp@latest

Pour comprendre, rien à faire. Le mot mcp de la commande désigne une prise : un petit programme qui donne un outil à Claude. Ici, l'outil est un navigateur. La commande ne télécharge rien tout de suite, elle note où trouver Playwright. À chaque lancement, Claude Code le démarre. Quand il lui sert, il lit le plan de la page, pas une image : c'est ce qui rend ses clics fiables. Chercher sur internet est autre chose : ici, il ouvre une page précise et agit dessus.

Cette ligne vérifie que c'est branché :

claude mcp list

Dans ce qu'elle affiche, la ligne de playwright doit finir par ✔ Connected (« branché ») :

playwright: npx @playwright/mcp@latest - ✔ Connected

Relance claude dans le même dossier : il ne voit un outil ajouté qu'au lancement. Si le terminal répond que npx est introuvable, il te manque Node, un programme gratuit : installe-le depuis nodejs.org (la version marquée LTS), ferme le terminal, rouvre-le puis recolle la commande.

Ce qu'il voit, puis la demande qui paie

Il lit les titres, les liens, les champs, les boutons, avec leur texte. Voici un extrait réel, relevé sur une page d'accueil le 03/09. Il vise « le bouton Accès anticipé », pas un point à l'écran : un décalage de mise en page ne casse rien. Ce plan, c'est Claude qui le reçoit. Toi, tu vois sa réponse en français.

- banner :
  - link "Build"
  - navigation :
    - link "Les guides"  -> /guides
- main :
  - heading "Apprends à confier ton travail à Claude Code" [niveau 1]
  - textbox "Ton adresse e-mail"  (placeholder : ton@adresse.fr)
  - button "Accès anticipé"

L'usage qui rentabilise l'installation : après chaque changement sur ton site, une demande et il va vérifier ce que voit un visiteur, au lieu de te dire que le programme a l'air correct.

Tu veux qu'il te demande avant d'écrire ? Si tu lis ⏵⏵ auto mode on tout en bas de la fenêtre, appuie une fois sur Shift + Tab (dans l'application de bureau : Manuel, à côté du bouton d'envoi).

Ouvre l'adresse de ton site, prends une capture en 390 px de large
et une en 1200 puis dis-moi ce qui ne va pas sur chacune. Ne modifie
rien pour l'instant, montre-moi d'abord.

Remplace le surligné par l'adresse complète, par exemple https://www.ton-site.fr. Pas encore de site ? Mets celle d'un site que tu connais bien : l'essai marche pareil. 390 pixels, c'est la largeur d'un écran de téléphone. 1200, celle d'un ordinateur. Si Claude ne trouve pas un de tes boutons, c'est souvent qu'il n'a pas de texte lisible : les lecteurs d'écran des personnes aveugles ne le trouvent pas non plus.

claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest

Construis ta page, puis ouvre-la avec chrome-devtools en largeur
de téléphone (390 px), lis les erreurs de la console et corrige tout
ce qui dépasse. Recommence jusqu'à ce que tout tienne, puis dis-moi
ce que tu as changé.

Ce qui se passe ensuite

En mode manuel, quand tu envoies la demande, il te demande la permission de se servir de l'outil playwright : il affiche des choix numérotés, lis-les puis tape 1 (oui). Au premier usage il télécharge le navigateur, une fois. Une fenêtre s'ouvre sur ta machine, tu le vois cliquer, puis il revient avec ce qu'il a lu et ce qu'il n'a pas trouvé. Tu corriges, il rouvre, il revérifie : c'est la boucle. S'il réclame Chrome, installe Google Chrome ou demande à Claude d'installer le navigateur dont playwright a besoin.

À garder sous la main : « ouvre-le en 390 pixels de large et dis-moi si tout tient », « remplis ce formulaire avec le fichier, arrête-toi avant d'envoyer ».