Les tests navigateur par agent IA consistent à laisser un agent de code ouvrir votre app web dans un vrai navigateur, cliquer dans l’interface et lire la console, afin qu’il vérifie sa propre modification au lieu de deviner. Pour donner un navigateur à un agent, on utilise en général Playwright MCP, un serveur MCP qui transforme les actions du navigateur en outils. Vous pouvez l’ajouter vous-même à Claude Code ou Codex, ou utiliser AgentVera, qui lance un Chrome isolé pour vos agents et vous laisse suivre chaque onglet en direct.
Ce guide présente ce qu’un agent peut faire dans un navigateur, la configuration manuelle, le navigateur AgentVera et un workflow pour tester une modification de bout en bout.
Pourquoi donner un navigateur à l’agent
Sans navigateur, un agent qui modifie votre interface ne peut que lire le code et espérer. Il ne voit pas que le bouton est caché derrière l’en-tête, que le formulaire plante à l’envoi ou qu’une erreur apparaît dans la console au chargement. Vous devenez les yeux de l’agent : ouvrir la page, décrire le problème, coller l’erreur.
Avec un navigateur, la boucle se referme :
- L’agent modifie le code.
- Il ouvre la page, parcourt le flux en cliquant et fait une capture d’écran.
- Il lit les messages de la console.
- Il corrige ce qu’il a trouvé et vérifie à nouveau.
Vous relisez toujours le résultat, mais les casses évidentes sont attrapées avant que vous ne regardiez.
Ce que l’agent peut faire avec Playwright MCP
Playwright MCP expose le navigateur sous forme d’outils. Les plus courants :
| Outil | Ce que l’agent en fait |
|---|---|
browser_navigate | Ouvre une URL, par exemple votre serveur de développement |
browser_snapshot | Lit la structure de la page (l’arbre d’accessibilité) pour trouver les éléments |
browser_click | Clique sur un bouton, un lien ou un champ |
browser_type | Saisit du texte dans un champ |
browser_take_screenshot | Capture l’aspect de la page |
browser_console_messages | Lit les logs et les erreurs de la console |
Le snapshot est l’élément clé. Au lieu de deviner des positions en pixels, l’agent lit une vue structurée de la page et clique sur les éléments par référence, ce qui est bien plus fiable.
Configurer Playwright MCP à la main
Pour Claude Code, ajoutez le serveur depuis votre projet :
claude mcp add playwright npx @playwright/mcp@latestPour Codex, ajoutez-le dans ~/.codex/config.toml :
[mcp_servers.playwright]
command = "npx"
args = ["@playwright/mcp@latest"]Lancez ensuite votre serveur de développement et donnez à l’agent une consigne concrète :
Open http://localhost:3000/signup, fill the form with a test email,
submit it, and tell me what happens. Check the console for errors.Cela fonctionne, mais vous ne voyez pas ce que voit l’agent, sauf si vous demandez des captures, et selon la façon dont vous lancez le serveur, le navigateur peut partager son état avec celui que vous utilisez au quotidien. Pour les bases de MCP, voir ce qu’est un serveur MCP.
Le navigateur AgentVera
AgentVera est une application de bureau pour macOS, Windows et Linux qui exécute des CLI d’agents de code côte à côte. Elle dispose de son propre navigateur d’agent, construit sur le même Playwright MCP.
L’activer pour un agent
Dans la boîte de dialogue de l’agent, le champ Browser propose trois choix :
| Option | Effet |
|---|---|
| Off | L’agent n’utilise pas de navigateur |
| AgentVera browser | Via Playwright MCP ; vous suivez les onglets en direct sur la page Browser de l’app |
| Claude in Chrome | Claude Code uniquement : votre propre Chrome avec l’extension Claude (--chrome) |
Choisissez AgentVera browser et démarrez l’agent. AgentVera lance un Chrome headless distinct avec son propre profil et y connecte le Playwright MCP de l’agent. Il utilise un Chrome, Edge, Brave ou Chromium déjà installé sur votre machine. Votre profil Chrome personnel, vos cookies et vos mots de passe n’atteignent jamais ce navigateur.
L’option est disponible pour les agents qui acceptent des serveurs MCP : Claude Code, Codex, Gemini CLI, Copilot et la plupart des autres CLI pris en charge. Les agents distants via SSH ne l’ont pas.
Suivre les onglets en direct et reprendre la main
La page Browser de l’app affiche les onglets que l’agent ouvre pendant son travail. C’est une vue de navigateur normale, pas un enregistrement : vous pouvez cliquer et saisir du texte pour reprendre la main à tout moment, par exemple pour vous connecter ou fermer un bandeau de cookies, puis rendre la main à l’agent.
La barre d’outils contient ce qu’on attend : une barre d’adresse, précédent, suivant et actualiser, la recherche dans la page, le zoom, les favoris et l’historique, ainsi que Screenshot, qui enregistre dans votre dossier Téléchargements. Le menu contextuel propose Inspect pour les DevTools, et vous pouvez ouvrir le navigateur dans une fenêtre séparée. La page affiche aussi le point de terminaison auquel les agents se connectent.
Renvoyer les erreurs de console à un agent
La page Browser dispose d’un panneau de console pour chaque onglet. Deux raccourcis ferment la boucle sans copier-coller :
- Fix errors envoie les dernières erreurs de console à un agent avec la consigne de les corriger.
- Chaque ligne a Fix et Send to agent, pour choisir une seule erreur.
C’est le même flux « envoyer à l’agent » que dans le reste de l’app ; voir envoyer à l’agent.
Y ouvrir votre serveur de développement
Lorsqu’un agent lance un serveur de développement, le port apparaît dans l’onglet Ports du panneau de droite avec Open in the AgentVera browser et Open in the system browser. Les liens affichés par les agents s’ouvrent aussi dans le navigateur intégré ; maintenez ⌥ en cliquant pour utiliser votre navigateur système à la place.
Le navigateur AgentVera fait partie de l’offre gratuite.
Un workflow pour tester une modification de bout en bout
Voici une configuration qui fonctionne bien pour une modification de l’interface :
- Créez l’agent avec AgentVera browser activé, idéalement dans son propre worktree git.
- Demandez la modification et la vérification ensemble, par exemple : « Ajoute une indication de robustesse du mot de passe au formulaire d’inscription. Ouvre ensuite la page d’inscription, essaie un mot de passe faible et un mot de passe fort, fais une capture de chacun et vérifie la console. »
- Surveillez la page Browser pendant qu’il travaille. S’il bloque sur une connexion, reprenez la main, connectez-vous et dites à l’agent de continuer.
- Si la console affiche des erreurs, cliquez sur Fix errors.
- Quand le flux fonctionne, demandez à l’agent de le consigner dans un fichier de test Playwright, pour que la vérification tourne désormais en CI.
- Relisez le diff et les captures avant de fusionner.
L’étape 5 compte. Naviguer via MCP est excellent pour trouver et vérifier des problèmes, mais ce n’est pas une suite de tests. Un fichier de test classique est ce qui garde le flux fonctionnel le mois prochain.
Des prompts qui fonctionnent bien
- « Ouvre la page, fais un snapshot et liste chaque bouton qui ne fait rien quand on clique dessus. »
- « Passe à une largeur de téléphone, fais une capture et corrige tout ce qui déborde. »
- « Parcours le paiement avec la carte de test, puis signale chaque erreur de console et chaque requête échouée que tu as vue. »
Soyez précis sur l’URL et sur ce que signifie le succès. « Teste l’app » laisse trop de latitude à l’agent ; « inscris-toi, puis vérifie que le tableau de bord affiche le nom du nouvel utilisateur » lui donne un objectif vérifiable.
Points à garder en tête
- L’agent peut cliquer sur tout. Pointez-le vers un environnement local ou de staging, pas vers la production avec de vraies données.
- Connexions. Le navigateur AgentVera a son propre profil : vous vous y connectez une seule fois. Utilisez des comptes de test.
- Les captures coûtent du contexte. Demandez-les quand elles servent, pas à chaque étape.
- Choisissez la bonne option de navigateur. Claude in Chrome utilise votre vrai Chrome et ses sessions ; le navigateur AgentVera les garde séparées.
Si vous construisez un site avec un agent à partir de zéro, créer un site web avec l’IA montre tout le flux, et comment faire du vibe coding présente les habitudes qui gardent le cap.
Téléchargez AgentVera pour donner à vos agents un navigateur que vous pouvez observer, ou lisez-en plus sur la page navigateur d’agent.