Retour au programme

Installer Playwright pour utiliser le navigateur

Ajouter un navigateur que l’agent peut ouvrir et manipuler.

Objectif

Installer Playwright MCP avec l’agent et distinguer une lecture web d’une action dans un navigateur.

Durée

25 minutes.

Résultat attendu

Playwright MCP est disponible et l’agent sait ouvrir une page et décrire ce qu’il voit.

Prompt à copier

Installe ou vérifie le MCP officiel Playwright dans OpenCode.

Prends en charge les commandes nécessaires, installe les éléments locaux demandés par Playwright et préserve les autres MCP. Ne me demande pas d’utiliser le terminal.

Quand c’est prêt, ouvre https://example.com, prends une capture et décris la page en quelques phrases.

Ce que l’agent doit faire

  1. Détecter le système et les outils déjà installés.
  2. Configurer @playwright/mcp dans OpenCode.
  3. Télécharger les éléments du navigateur au premier lancement si nécessaire.
  4. Ouvrir une page publique, lire son arbre d’accessibilité et fournir une capture.

Contrôle visuel

Une fenêtre ou une session Playwright s’ouvre sur example.com et l’agent restitue le titre de la page avec une capture.

Configurer Playwright MCP (contrôle du navigateur)

Playwright MCP donne à ton IA un vrai navigateur web. Contrairement à Firecrawl qui lit le HTML d'une page, Playwright peut naviguer, cliquer, remplir des formulaires, se connecter avec ton login, prendre des screenshots — exactement comme toi devant ton écran.

C'est le standard de fait pour le contrôle navigateur via MCP en 2026 : maintenu par Microsoft (qui maintient aussi Playwright depuis des années), local, sécurisé, et il « voit » les pages via l'arbre d'accessibilité plutôt que via screenshots — ce qui est beaucoup plus économe en tokens (3 à 4x moins cher qu'une approche screenshot-only).

---

Pourquoi en plus de Firecrawl ?

Firecrawl est excellent pour lire des pages publiques. Mais certains usages nécessitent un vrai navigateur :

En pratique : installe les deux. L'IA choisit automatiquement le bon outil selon ta demande.

Firecrawl

✓ Lire le contenu d'une page

✓ Rechercher sur le web

✓ Extraire des données structurées

✓ Crawler un site entier

Rapide, orienté lecture/extraction

Playwright MCP

✓ Naviguer comme un humain

✓ Se connecter avec login

✓ Cliquer, remplir des formulaires

✓ Screenshots + accessibility tree

Interactif, orienté actions

---

Installation via /connect-mcp

Le plus simple : utiliser le skill /connect-mcp fourni dans ton vault. Lance-le dans OpenCode (ou Claude Code) :

/connect-mcp playwright

Le skill détecte tes outils installés (OpenCode, Claude Code, Claude Desktop), patche le bon fichier de config (opencode.json ou ~/.claude.json), et configure Playwright MCP via npx (rien à installer manuellement).

Le package officiel utilisé est @playwright/mcp (Microsoft).

Coût : Gratuit. Open-source, tourne 100 % en local sur ta machine.

Si /connect-mcp n'est pas dispo chez toi, demande à OpenCode :

Installe le MCP officiel Playwright (@playwright/mcp). Patche mon

opencode.json (ou ~/.claude.json) pour l'activer. Pas besoin de clé API.

Copier

---

Tester

Demande à ton IA :

Ouvre le site https://example.com dans le navigateur,
prends un screenshot, et décris-moi ce que tu vois.

Tu peux aussi tester des interactions plus avancées :

Va sur https://news.ycombinator.com, lis les 5 premiers titres,
et résume-les.

Sur ton tout premier lancement, Playwright va télécharger les binaires du navigateur (~150 Mo) en arrière-plan. C'est normal et ça ne se reproduira plus.

---

Cas d'usage concrets

Extraire des données d'une app avec login

Connecte-toi à mon compte [service] avec l'email xxx et le mot de passe xxx
(que tu peux récupérer via `bw get password "service"`).
Va dans la section "Rapports".
Télécharge le rapport du mois dernier et range-le dans 0 INBOX/.

Astuce sécurité : plutôt que de coller tes credentials, branche le CLI Bitwarden (cf. la leçon Zoom sur la sécurité). L'IA récupère le mot de passe à la volée, sans qu'il transite dans ton prompt.

Documenter un process visuel

Ouvre [url de mon app].
Prends un screenshot de chaque étape du process d'inscription.
Crée une note dans mon vault avec les screenshots et un descriptif.

Veille visuelle / concurrentielle

Ouvre la page d'accueil de [concurrent].
Prends un screenshot et range-le dans 3 RESSOURCES/Veille/.
Compare avec le dernier screenshot que tu as de ce site.
Dis-moi ce qui a changé.

Tester un site qu'on développe

Le site que je suis en train de coder tourne sur http://localhost:3000.
Va dessus, navigue dans le menu principal, signale-moi tout ce qui
semble cassé ou bizarre visuellement.

---

Alternatives à connaître

Playwright MCP couvre 95 % des cas. Si tu as un besoin spécifique :

Browserbase MCP

Cloud hosted (pas besoin d'install locale), stealth mode, proxies, session persistante. Payant. Utile si tu veux exécuter du scraping depuis ton serveur sans installer Chromium dessus.

Chrome DevTools MCP

Pour debug / performance audits / inspection réseau d'un site existant. Pas du tout pour piloter un navigateur — c'est l'inverse, ça inspecte l'état.

Stagehand

Surcouche au-dessus de Playwright avec des instructions en langage naturel. Intéressant pour des automations longues et stables où tu veux mixer scripting et IA.

mcp-chrome

Se connecte à TON Chrome déjà ouvert (avec tes sessions et cookies). Pratique pour bosser sur des apps SSO/2FA où relogin à chaque session est lourd.

Migré depuis l'ancien Browser MCP ? L'ancien projet browser-mcp (basé sur Puppeteer) est moins maintenu et plus coûteux en tokens. Bascule sur @playwright/mcp — la migration prend 30 secondes via /connect-mcp.

---

Sécurité

Playwright MCP tourne en local sur ta machine. Tes identifiants ne sont pas envoyés à un serveur tiers. Le navigateur se ferme après chaque session. Tu peux le lancer en mode --headless (sans fenêtre visible) ou avec fenêtre pour suivre ce que l'IA fait en temps réel.

Pour les workflows sensibles, combine avec Bitwarden CLI (cf. Zoom sur la sécurité) : l'IA pioche les credentials au moment d'exécuter, jamais en clair dans ton prompt.

---

Critère de validation

Tu sais quand demander à Firecrawl de lire une page et quand demander à Playwright d’agir dans un navigateur.