# Tests navigateur avec un agent IA : il vérifie votre app

URL: https://agentvera.dev/fr/blog/ai-agent-browser-testing/ · Publié: 2026-10-24

Tests navigateur par agent IA avec Playwright MCP : l’agent ouvre votre app web dans un vrai navigateur, clique, lit la console et corrige ce qui casse.

**En bref:**

- Avec Playwright MCP, un agent de code peut ouvrir des pages, cliquer, saisir du texte, faire des captures et lire la console : il vérifie sa propre modification dans un vrai navigateur.
- Vous pouvez ajouter Playwright MCP à Claude Code ou Codex à la main ; AgentVera lance pour cela un Chrome isolé et vous laisse suivre les onglets en direct.
- Le navigateur AgentVera a son propre profil, jamais vos cookies ni vos mots de passe, et les erreurs de console repartent vers un agent en un clic.

**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 :

1. L’agent modifie le code.
2. Il ouvre la page, parcourt le flux en cliquant et fait une capture d’écran.
3. Il lit les messages de la console.
4. 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 :

```bash
claude mcp add playwright npx @playwright/mcp@latest
```

Pour Codex, ajoutez-le dans `~/.codex/config.toml` :

```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 :

```text
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](/fr/blog/what-is-mcp-server/).

## Le navigateur AgentVera

[AgentVera](/fr/) 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](/fr/features/send-to-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 :

1. Créez l’agent avec **AgentVera browser** activé, idéalement dans son propre worktree git.
2. 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. »
3. 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.
4. Si la console affiche des erreurs, cliquez sur **Fix errors**.
5. 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.
6. 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](/fr/blog/build-website-with-ai/) montre tout le flux, et [comment faire du vibe coding](/fr/blog/how-to-vibe-code/) présente les habitudes qui gardent le cap.

[Téléchargez AgentVera](/fr/download/) pour donner à vos agents un navigateur que vous pouvez observer, ou lisez-en plus sur la page [navigateur d’agent](/fr/features/agent-browser/).

## Questions fréquentes

**Comment un agent IA utilise-t-il un navigateur ?** Via un serveur MCP comme Playwright MCP. Le serveur expose les actions du navigateur sous forme d’outils, par exemple naviguer, cliquer, saisir, faire une capture et lire les messages de la console, et l’agent les appelle comme n’importe quel autre outil.

**Est-ce la même chose que d’écrire des tests Playwright ?** Non. Avec Playwright MCP, l’agent pilote le navigateur en direct, comme vous vérifieriez une modification à la main. C’est idéal pour explorer et vérifier. Pour des contrôles exécutés à chaque commit, demandez à l’agent de transformer ce qu’il a trouvé en fichiers de test Playwright classiques.

**Le navigateur AgentVera voit-il mes données Chrome personnelles ?** Non. AgentVera lance un Chrome distinct avec son propre profil. Votre profil Chrome personnel, vos cookies et vos mots de passe ne l’atteignent jamais.

**Quels agents peuvent utiliser le navigateur AgentVera ?** Les agents qui acceptent des serveurs MCP : Claude Code, Codex, Gemini CLI, Copilot et la plupart des autres CLI pris en charge. Aider ne gère pas MCP. Les agents distants via SSH n’ont pas cette option.

**De quel navigateur AgentVera a-t-il besoin ?** D’un Chrome, Edge, Brave ou Chromium installé. AgentVera le lance avec son propre profil et y connecte Playwright MCP ; vous n’installez donc pas de navigateur séparé pour l’agent.

---

**À propos d’AgentVera.** AgentVera est une app de bureau pour macOS, Windows et Linux, développée par Solviera Teknoloji. Elle exécute 18 agents de code IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) côte à côte, par projet, dans de vrais terminaux avec les installations et connexions CLI de l’utilisateur. L’offre gratuite inclut des agents illimités. Télécharger: https://agentvera.dev/fr/download/ · Tarifs: https://agentvera.dev/fr/pricing/