# Connecter Playwright MCP > Donner à ton IA un vrai navigateur pour naviguer, cliquer, remplir un formulaire et prendre des captures. ## Pourquoi Playwright ? Playwright MCP permet à OpenCode de piloter un navigateur réel. Il est utile pour : - ouvrir une application avec login ; - naviguer dans une application JavaScript ; - cliquer et remplir des formulaires ; - prendre des captures d'écran ; - tester un site en cours de développement. ### Firecrawl ou Playwright ? <div class="system-comparison"> <section class="system-comparison__panel system-comparison__panel--green"> <p class="system-comparison__title">Firecrawl</p> <ul class="system-comparison__list"> <li>Lire une page publique</li> <li>Rechercher sur le web</li> <li>Extraire du contenu</li> <li>Crawler un site</li> </ul> </section> <section class="system-comparison__panel system-comparison__panel--blue"> <p class="system-comparison__title">Playwright MCP</p> <ul class="system-comparison__list"> <li>Naviguer dans une interface</li> <li>Se connecter à une application autorisée</li> <li>Cliquer, remplir, télécharger</li> <li>Tester visuellement un site</li> </ul> </section> </div> Installe les deux. Firecrawl est orienté lecture et extraction. Playwright est orienté navigation et interaction. <div class="practical-consequence practical-consequence--alert"> <p class="practical-consequence__kicker">À savoir</p> <p class="practical-consequence__body">Playwright MCP est gratuit, open source et exécuté localement. Le navigateur peut toutefois accéder aux données visibles dans une session connectée, et le contenu lu peut être transmis à la route LLM active.</p> </div> ## Regarde la vidéo La vidéo montre l'installation, les premiers tests et les règles de sécurité. ## Installer avec `Connect Tool` Dans OpenCode, lance : ```text /connect-tool playwright ``` Il n'y a pas de clé API à créer. Au premier lancement, le package et les composants du navigateur peuvent être téléchargés automatiquement. ## Tester Demande à ton IA : ```text Avec Playwright, ouvre https://example.com. Prends un screenshot et donne-moi le titre de la page. Ne modifie aucun fichier et n'effectue aucune action externe. ``` Puis : ```text Avec Playwright, ouvre https://news.ycombinator.com. Lis les cinq premiers titres et résume-les. Ne clique sur aucun lien et ne soumets aucun formulaire. ``` Le test est réussi si le navigateur s'ouvre, si l'IA lit correctement la page et si le screenshot est produit. ## Cas d'usage concrets ### Application avec login ```text Ouvre l'application autorisée, va dans la section Rapports et lis le rapport du mois dernier. Ne modifie rien et demande ma validation avant toute action externe. ``` ### Documenter un process ```text Ouvre notre application de test. Parcours le process d'inscription avec des données fictives. Prends une capture de chaque étape sans valider la dernière étape. ``` ### Tester un site ```text Ouvre http://localhost:3000. Parcours le menu principal sur ordinateur et sur mobile. Signale les liens cassés, les erreurs visibles et les problèmes de lisibilité. ``` ## Checklist - [ ] J'ai lancé `/connect-tool playwright`. - [ ] J'ai testé une page publique. - [ ] J'ai produit un screenshot. - [ ] Je sais quand utiliser Firecrawl et quand utiliser Playwright. ## Ressources - [Playwright MCP officiel](https://github.com/microsoft/playwright-mcp) - [Package npm officiel `@playwright/mcp`](https://www.npmjs.com/package/@playwright/mcp) - [[00 - Cours - Gestionnaire de secrets et connexion sécurisée|Connecter 1Password]] - [[Connect Tool]]