Configurer et vérifier Playwright MCP dans Codex CLI

Enregistrez Playwright MCP comme serveur stdio dans Codex. Vérifiez ensuite trois résultats. codex mcp get playwright montre la commande de lancement. /mcp, dans une nouvelle session, affiche les outils chargés. Une navigation confirme que le navigateur ouvre une page. Si un résultat manque, vous savez à quel niveau commencer le diagnostic.

Une personne sur r/OpenAI avait installé l’extension Playwright de VS Code et ne voyait toujours pas de serveur dans Codex. L’extension de test de l’éditeur et le serveur MCP se configurent séparément. Le guide commence avec un navigateur isolé. Plus loin, Tabbit Browser illustre le cas d’un onglet où le compte est déjà connecté. Discussion Reddit

À retenir

• Déclarez le serveur dans mcp_servers ou utilisez codex mcp add.

• Fixez la version pour que l’équipe reproduise le même lancement. Le test utilise Codex CLI 0.166.0 et Playwright MCP 0.0.84.

• L’entrée de configuration, la liste d’outils et le résultat de navigation se vérifient séparément.

• --headless masque la fenêtre. --isolated donne à la session un état temporaire.

• Pour agir sur un onglet existant, choisissez une connexion explicite et confirmez le compte avant toute écriture.

Trois vérifications

Playwright MCP rend les opérations de navigateur accessibles via le protocole MCP. Une capture structurée indique les rôles, les textes et des références d’éléments. Elle aide l’agent à repérer un bouton ou un champ. Si le travail consiste à trouver des sources publiques, la recherche web peut suffire. Documentation Playwright

Enregistrer le serveur local

Installez Codex CLI et Node.js. Le guide Playwright indique Node.js 20 ou plus récent. Vérifiez que le terminal où vous lancez Codex trouve également npx. Avec un gestionnaire de versions, l’éditeur et le terminal peuvent charger des PATH différents.

codex --version
node --version
npx --version
codex mcp add playwright -- npx -y @playwright/mcp@0.0.84 --headless --isolated
codex mcp get playwright

Après --, Codex lit l’exécutable du serveur et ses arguments. Il lance npx. -y évite la confirmation interactive de npm. Les options suivantes règlent le navigateur. Le numéro fixe est celui du test de ce guide. Commandes officielles de Codex

Vérifier le fichier TOML

Vous pouvez aussi modifier ~/.codex/config.toml. Si le nom playwright existe déjà, regardez à quoi sert cette entrée avant de la modifier ou choisissez un autre nom. Une même table TOML ne peut être déclarée deux fois.

[mcp_servers.playwright]
command = "npx"
args = ["-y", "@playwright/mcp@0.0.84", "--headless", "--isolated"]

Les exemples pour d’autres clients peuvent être en JSON. Dans Codex, gardez la syntaxe TOML et reprenez les valeurs de la commande. Les règles d’entreprise, la configuration du projet et le contexte de lancement de l’éditeur peuvent modifier la configuration effective. Vérifiez-la dans l’environnement où vous comptez utiliser Codex. Guide MCP de Codex

Ouvrir la démo et examiner la trace

Démarrez une nouvelle session dans un espace de confiance. Saisissez /mcp, puis repérez Playwright. Donnez à Codex une consigne dont le résultat est observable.

Utilise Playwright MCP pour ouvrir https://demo.playwright.dev/todomvc/.
Donne l’URL finale, le titre de la page et son premier en-tête visible
d’après la sortie de l’outil. Arrête-toi après la lecture.

Dans la trace, recherchez browser_navigate et vérifiez l’URL et le titre. Demandez ensuite browser_snapshot pour vérifier l’en-tête todos. Une réponse textuelle peut être correcte sans visite de la page. La trace vous donne un moyen de vérifier l’observation. Le guide des navigateurs agentiques explique comment celle-ci guide l’action.

Le test a utilisé un dossier temporaire, un alias de serveur propre au processus et un navigateur isolé. Codex app-server a trouvé les deux outils, ouvert la démo et lu l’en-tête todos. L’URL finale se terminait par /#/ et le titre était React • TodoMVC. Le test a fermé le navigateur. Le favicon de la démo a renvoyé 404, tandis que le contenu demandé s’affichait.

Diagnostiquer la première étape qui échoue

Si l’entrée manque, vérifiez l’exécutable Codex et le fichier qu’il lit. Le paquet et chaque option constituent des arguments séparés. codex mcp get playwright --json permet de vérifier les valeurs sur votre machine. Retirez les secrets et chemins privés avant de transmettre la sortie.

Si l’entrée existe mais que les outils manquent, regardez le message de démarrage. Ajoutez --help au lanceur pour vérifier que npx trouve le paquet. Cela laisse le lancement du navigateur à vérifier. Dans un autre fil, une personne sur Windows disait avoir suivi un tutoriel sans parvenir à charger le serveur dans Codex. Ce retour aide à cibler le diagnostic sur la configuration effective et son contexte de lancement. Discussion r/ChatGPTCoding

Si les outils répondent mais que la navigation échoue, cherchez le nom du navigateur et le chemin attendu dans l’erreur. Suivez la procédure d’installation ou de sélection de canal de la version utilisée. Une page vide peut aussi signaler un souci de réseau. Inspectez son URL avant de relancer. Comparez les autres outils de navigation automatisée après avoir identifié le niveau qui échoue.

Quel navigateur et quel profil s’ouvrent ?

La version 0.0.84 choisit Chromium avec le canal Chrome si aucun navigateur ni canal n’est défini. Le choix de l’exécutable, l’affichage de la fenêtre et la conservation de l’état restent indépendants. Vous pouvez donc lancer Chrome sans fenêtre ou ouvrir une fenêtre visible avec un état isolé. Configuration Playwright MCP

Le serveur gère normalement un profil distinct de votre profil personnel. Le mode isolé utilise un état temporaire. La même adresse peut demander une connexion dans un autre profil. Les profils, espaces et groupes d’onglets organisent cet état différemment.

Pour relier un onglet existant, suivez les instructions de l’extension de la version utilisée. Le titre permet de vérifier la page. L’étiquette du compte ou de l’espace confirme le contexte. Le guide de connexion à un navigateur existant montre comment commencer en lecture seule.

Quand relier une session déjà connectée

Un profil isolé convient au QA, à une vérification publique ou à une reproduction de bug. Pour un tableau de bord ouvert dans votre navigateur, donnez à l’agent un onglet et une demande de lecture précise. Contrôlez le compte avant une action qui écrit des données.

Le guide Tabbit documente une autre connexion entre un agent compatible et Tabbit Browser. Le cas de saisie de produits avec Codex et Tabbit montre un formulaire réel, puis un contrôle dans la liste de produits. Ce cas utilise une intégration distincte de Playwright MCP. Démarrage de Tabbit

Commencez par la démo publique isolée. Quand la trace, l’URL et l’en-tête concordent, essayez une seule page de votre environnement de test. Si une tâche demande l’accès à votre navigateur habituel, passez par une connexion prévue pour ce contexte. Ces vérifications restent utiles pour la suite de votre automatisation de navigateur.

Secholar.L

Croissance et contenu chez Tabbit

Secholar.L rédige des guides pratiques sur les navigateurs IA et les workflows agentiques, en comparant les outils sur la base de recherches réelles et de sources vérifiables.