Connecter Playwright MCP

Les versions, les options et les interfaces évoluent. Ce cours présente le chemin de référence avec le serveur officiel @playwright/mcp de Microsoft. Vérifie la documentation officielle avant une installation client ou un usage sensible.

Pourquoi tu fais ça

Playwright MCP donne à ton IA un navigateur qu’elle peut piloter depuis OpenCode. Elle peut ouvrir une page, suivre des liens, cliquer, remplir des champs, lire une application dynamique et prendre des captures d’écran.

Cette capacité complète Firecrawl :

Besoin	Outil de référence	Pourquoi
Rechercher sur le web ou lire rapidement une page publique	Firecrawl	Il est orienté recherche, lecture et extraction structurée.
Naviguer dans une interface, cliquer ou remplir un formulaire	Playwright MCP	Il pilote un vrai navigateur et enchaîne plusieurs étapes.
Observer une application après connexion	Playwright MCP avec un profil dédié	Il peut conserver une session autorisée, avec les risques associés.
Tester un site en cours de développement	Playwright MCP	Il peut parcourir l’interface, prendre des captures et signaler des anomalies.

Playwright MCP s’appuie principalement sur l’arbre d’accessibilité de la page. L’IA reçoit une représentation structurée des boutons, liens, titres et champs au lieu de devoir interpréter chaque écran uniquement comme une image. Une capture d’écran reste utile pour juger l’apparence visuelle, mais elle ne remplace pas le snapshot d’accessibilité pour agir de façon fiable.

Le serveur Playwright MCP est open source, gratuit et exécuté sur ta machine. Il ne demande pas d’abonnement Playwright. Le navigateur et ses composants occupent toutefois de l’espace disque lors de leur première installation. Surtout, les informations extraites des pages sont envoyées à OpenCode puis peuvent être transmises à la route LLM active. Un navigateur local ne signifie donc pas que le traitement du contenu reste local.

Objectif

À la fin de ce cours, tu sais :

• expliquer quand utiliser Playwright plutôt que Firecrawl ;
• installer le MCP officiel dans OpenCode avec Connect Tool ;
• choisir entre une session isolée et un profil navigateur dédié ;
• réaliser un test de lecture, un test d’interaction non persistant et une capture d’écran ;
• reconnaître une action sensible et reprendre la main avant sa validation ;
• retirer la connexion et supprimer les données locales du profil si nécessaire.

Avant de commencer

• Le Core System local et OpenCode sont installés.
• Tu as terminé Gestionnaire de secrets et connexions sécurisées.
• Node.js 18 ou une version plus récente est disponible sur la machine.
• Tu effectues le premier test sur une page publique, sans donnée client, financière, RH ou stratégique.
• Tu fermes les autres sessions Playwright qui utiliseraient le même profil.

Playwright MCP ne nécessite pas de clé API pour fonctionner localement. Une application visitée peut en revanche demander un compte, un mot de passe, une validation SSO ou une double authentification. Ces accès restent soumis aux règles de l’entreprise et ne doivent jamais être collés dans une conversation ou dans le vault.

1. Le modèle mental : lire, agir, engager

Un navigateur connecté peut produire trois niveaux d’effet :

Niveau	Exemple	Règle
Lire	Ouvrir une page, lire un tableau de bord, inspecter un menu	Autorisé sur une source publique ou explicitement approuvée.
Agir sans effet persistant	Ouvrir un menu, saisir une valeur fictive sans soumettre, prendre une capture	Autorisé pour le test si aucune donnée sensible n’est utilisée.
Engager l’entreprise	Envoyer un formulaire, publier, acheter, supprimer, inviter ou modifier une donnée	Exiger une validation humaine juste avant l’action finale.

Se connecter à un compte augmente aussi le périmètre des données accessibles. Une session authentifiée peut exposer des informations que tu vois dans ton navigateur. Le fait que Playwright tourne localement ne rend pas ces données non sensibles et ne transforme pas le navigateur en frontière de sécurité.

2. Choisir la bonne session

Session isolée : le choix du premier test

L’option --isolated crée une session sans persistance. Lorsque le navigateur est fermé, son état de stockage est supprimé. C’est le choix recommandé pour découvrir l’outil, lire des pages publiques et effectuer l’exercice de ce cours.

npx @playwright/mcp@latest --isolated

Profil dédié : pour un usage connecté validé

Un profil persistant conserve notamment les sessions et cookies entre deux utilisations. Il est pratique pour un outil métier consulté régulièrement, mais augmente l’impact d’une mauvaise instruction ou d’un accès trop large.

Si le besoin est validé, utilise un profil réservé à Playwright MCP. Ne pointe pas le MCP vers ton profil Chrome personnel principal.

npx @playwright/mcp@latest --user-data-dir=<CHEMIN_DU_PROFIL_DEDIE>

Un même profil ne peut être utilisé que par une instance Playwright à la fois. Crée des profils séparés si plusieurs environnements doivent fonctionner en parallèle.

Fenêtre visible ou mode headless

Par défaut, Playwright MCP ouvre un navigateur visible. Ce mode est préférable pendant la formation : tu vois les pages ouvertes et tu peux arrêter l’action.

L’option --headless masque la fenêtre. Elle est utile plus tard pour des tests techniques maîtrisés, pas pour ton premier usage.

3. Installer avec Connect Tool

Dans OpenCode, lance :

/connect-tool playwright

Connect Tool recherche la méthode actuelle, te présente sa recommandation et demande si la connexion est personnelle ou partagée à l’échelle de l’entreprise avant de modifier une configuration.

Pour le parcours de formation, demande explicitement une session isolée et un test en lecture seule :

Connecte le serveur MCP officiel Playwright de Microsoft à OpenCode.
Utilise le package @playwright/mcp@latest en session isolée.
Cette connexion est uniquement pour moi.
Ne connecte aucun compte et ne réutilise pas mon profil Chrome personnel.
Lis la configuration existante avant de la modifier.
Teste-la sur https://example.com sans effectuer d'action externe.

La logique attendue dans la configuration OpenCode est la suivante :

{
  "mcp": {
    "playwright": {
      "type": "local",
      "command": [
        "npx",
        "-y",
        "@playwright/mcp@latest",
        "--isolated"
      ],
      "enabled": true
    }
  }
}

Le fichier peut déjà contenir d’autres réglages ou MCP. Connect Tool doit ajouter ou corriger uniquement l’entrée Playwright, sans écraser le reste. La configuration exacte dépend de la version d’OpenCode installée.

Au premier lancement, npx télécharge le package nécessaire. Selon la machine et le navigateur disponible, une installation complémentaire peut être demandée. Suis le message d’erreur ou la documentation officielle au lieu d’installer un package trouvé au hasard.

Relance OpenCode après la modification si Playwright n’apparaît pas immédiatement dans la liste des outils MCP.

4. Tester la connexion

Test 1 : lire une page publique

Demande :

Avec Playwright, ouvre https://example.com.
Donne-moi le titre principal et l'URL finale.
N'effectue aucune autre action et ne modifie aucun fichier.

Le résultat attendu est le titre de la page et son URL. Tu dois voir le navigateur s’ouvrir pendant l’opération.

Test 2 : naviguer sans effet persistant

Demande :

Avec Playwright, ouvre https://news.ycombinator.com.
Lis les cinq premiers titres visibles et ouvre le premier lien dans un nouvel onglet.
Reviens ensuite à la liste. Ne télécharge rien et ne soumets aucun formulaire.

Ce test vérifie la lecture d’une page, le clic, la gestion de navigation et le retour à l’état initial. Il n’utilise aucun compte et n’écrit aucune donnée métier.

Test 3 : prendre une capture

Demande :

Ouvre https://example.com avec Playwright.
Prends une capture de la page entière et enregistre-la dans 0 Inbox/Tests Playwright/.
Dis-moi le chemin exact du fichier créé.

La capture sert de preuve visuelle. Pour cliquer ou remplir un champ, l’IA doit continuer à s’appuyer sur le snapshot de la page plutôt que sur la capture seule.

5. Passer à une application avec login

Ne commence cette étape qu’après avoir validé les trois tests publics et identifié un besoin métier réel.

1. Choisis une application autorisée par l’entreprise.
2. Définis précisément les pages que l’IA peut consulter et les actions interdites.
3. Crée un profil Playwright dédié à cette application.
4. Ouvre le navigateur visible et connecte-toi toi-même, y compris pour le SSO ou la double authentification.
5. Demande ensuite une première lecture sans écriture.
6. Vérifie le résultat avant d’autoriser une interaction supplémentaire.

Exemple de consigne :

Utilise le profil Playwright dédié au service métier autorisé.
Ouvre la page Rapports et lis uniquement le résumé du mois dernier.
Ne télécharge rien, ne modifie aucun filtre enregistré et ne soumets aucun formulaire.
Arrête-toi et demande ma validation si une reconnexion ou une action d'écriture est nécessaire.

Un profil dédié peut conserver une session authentifiée. Protège le compte avec les permissions minimales, une double authentification et, lorsque le service le permet, un rôle en lecture seule.

Cas d’usage

Préparer une réunion à partir d’un tableau de bord

Ouvre le tableau de bord commercial autorisé.
Relève les indicateurs visibles du mois en cours et les écarts signalés.
Prépare une note factuelle dans 0 Inbox/ sans modifier le tableau de bord.

Documenter un process visuel

Ouvre l'environnement de démonstration de notre application.
Parcours le process d'inscription avec des données fictives, sans valider l'étape finale.
Prends une capture de chaque étape et prépare une note de procédure dans 0 Inbox/.

Réaliser une veille visuelle

Ouvre la page publique du concurrent analysé.
Prends une capture datée de la page d'accueil.
Compare sa structure et ses messages avec la capture précédente disponible dans le projet de veille.
Sépare les constats visibles de tes interprétations.

Tester un site en développement

Le site de test tourne sur http://localhost:3000.
Parcours le menu principal sur ordinateur puis sur une largeur mobile.
Signale les erreurs visibles, les liens cassés et les problèmes de lisibilité.
Ne modifie aucune donnée et ne teste aucun paiement réel.

Limites à connaître

• Un site peut changer son interface et rendre une séquence moins fiable.
• Un CAPTCHA, une double authentification ou une politique anti-automatisation peut exiger une intervention humaine.
• Un snapshot d’accessibilité ne garantit pas une compréhension visuelle parfaite.
• Une capture d’écran aide à vérifier l’apparence, mais ne prouve pas qu’un parcours fonctionne.
• Une liste de domaines autorisés ou bloqués dans Playwright constitue un garde-fou, pas une frontière de sécurité complète.
• Playwright ne doit pas contourner les conditions d’utilisation, les droits d’accès ou les règles internes d’un service.
• Un profil connecté donne accès aux données visibles par ce compte. Réduis les permissions à la source.

Exercice guidé

1. Lance /connect-tool playwright dans OpenCode.
2. Choisis une connexion personnelle et le mode --isolated.
3. Vérifie que la configuration utilise le package officiel @playwright/mcp@latest.
4. Relance OpenCode si nécessaire.
5. Effectue le test de lecture sur https://example.com.
6. Effectue le test de navigation sur Hacker News.
7. Enregistre une capture dans 0 Inbox/Tests Playwright/.
8. Demande à l’IA d’expliquer la différence entre lire, agir sans effet persistant et engager l’entreprise.
9. Ferme le navigateur et vérifie qu’aucun compte métier n’a été connecté.

Output attendu

Tu disposes de :

• une entrée Playwright active dans la configuration OpenCode ;
• une configuration en session isolée pour le premier usage ;
• une preuve de lecture réussie sur une page publique ;
• une preuve de navigation sans effet persistant ;
• une capture d’écran enregistrée dans le Business Brain ;
• une règle claire de validation humaine avant toute action externe sensible.

Validation

Le cours est validé si tu peux montrer :

• le package officiel utilisé dans la configuration ;
• le navigateur piloté depuis OpenCode sur une page publique ;
• le titre et l’URL lus correctement ;
• le fichier de capture et son chemin ;
• la différence entre Firecrawl et Playwright ;
• la différence entre une session isolée et un profil persistant ;
• le moment où l’IA doit s’arrêter pour demander une validation.

La preuve transmise au formateur ne contient ni cookie, ni token, ni mot de passe, ni capture d’une application métier réelle.

Permissions, données et support

Élément	Règle
Permissions demandées	Exécution locale de npx, ouverture d’un navigateur, accès réseau aux sites visités et écriture uniquement dans le dossier de captures autorisé.
Données accessibles	Contenu des pages ouvertes, données visibles dans les sessions connectées et fichiers explicitement autorisés par le client MCP.
Test de lecture	https://example.com, sans compte.
Test d’action	Navigation et capture sur une page publique, sans soumission ni effet métier.
Écriture sensible	Toujours soumise à une validation humaine au dernier moment.
Propriétaire du support	Le responsable technique du projet.

Retirer Playwright MCP

Pour suspendre la capacité sans perdre la configuration, passe enabled à false dans l’entrée mcp.playwright, puis relance OpenCode.

Pour retirer complètement la connexion :

1. demande à OpenCode de lire la configuration actuelle ;
2. supprime uniquement l’entrée mcp.playwright ;
3. relance OpenCode et vérifie que les outils Playwright ne sont plus disponibles ;
4. si un profil dédié a été créé, ferme toutes les instances Playwright puis supprime son dossier après avoir vérifié qu’il ne contient rien à conserver ;
5. révoque les sessions actives depuis l’application métier si ce profil avait été connecté à un compte.

La suppression de l’entrée MCP ne supprime pas automatiquement un profil persistant ni les sessions enregistrées dans celui-ci.

Si ça bloque

La commande npx est introuvable

Installe ou mets à jour Node.js avec le responsable technique, puis vérifie node --version et npx --version. La version de Node doit être 18 ou plus récente.

Le MCP n’apparaît pas dans OpenCode

Vérifie que l’entrée est sous mcp, que type vaut local, que command est un tableau et que enabled vaut true. Relance ensuite OpenCode.

Le navigateur ne démarre pas

Lis le message d’erreur complet. Vérifie la version de Node, ferme une autre instance qui utiliserait le même profil et suis uniquement l’instruction d’installation du navigateur donnée par le package officiel.

Une page ne peut pas être contrôlée

Actualise le snapshot, vérifie que l’élément est visible et essaie une étape plus simple. Si la page demande un CAPTCHA, un SSO ou une double authentification, reprends la main. Ne cherche pas à contourner cette protection.

Le site a été modifié alors que ce n’était pas prévu

Arrête la session. Documente l’action réalisée, vérifie l’historique du service et annule-la manuellement si l’interface le permet. Pour la suite, réduis les droits du compte et impose un arrêt avant l’action finale.

Fallback manuel

Si Playwright ne peut pas être installé ou si une application bloque l’automatisation :

1. utilise Firecrawl pour lire les pages publiques compatibles ;
2. réalise toi-même la navigation ou la connexion dans ton navigateur habituel ;
3. exporte uniquement le document ou la capture nécessaire dans 0 Inbox/ ;
4. demande ensuite à l’IA de traiter ce fichier local, sans lui donner accès au compte.

Ce fallback conserve la valeur du workflow : l’IA analyse et structure l’information, tandis que tu gardes la main sur la navigation sensible.

Ressources

• Playwright MCP officiel
• Package npm officiel @playwright/mcp
• Gestionnaire de secrets et connexions sécurisées
• Connect Tool

Ce qu’il faut retenir

• Firecrawl lit et recherche ; Playwright pilote un vrai navigateur pour naviguer, cliquer et remplir des champs.
• Session isolée (--isolated) par défaut pour tout premier test ; jamais le profil Chrome personnel.
• Trois niveaux d’effet à distinguer : lire, agir sans effet persistant, engager l’entreprise ; seul le dernier exige une validation juste avant l’action.
• Le snapshot d’accessibilité guide l’action de l’IA ; la capture d’écran ne sert que de preuve visuelle.
• Désactiver l’entrée MCP, fermer le profil dédié et révoquer les sessions actives sont trois actions distinctes pour une coupure complète.

À faire

• Lance /connect-tool playwright et choisis une connexion personnelle en mode --isolated.
• Vérifie que la configuration utilise le package officiel @playwright/mcp@latest.
• Réalise les trois tests de l’exercice guidé (lecture, navigation, capture).
• Vérifie qu’aucun compte métier n’a été connecté au profil isolé.

Suivant : Connecter Google Workspace