Playwright MCP : Service MCP d'automatisation des navigateurs de Microsoft

Introduction générale

Dramaturge MCP est un outil open source développé par Microsoft et hébergé sur GitHub. Il permet aux modèles d'IA de contrôler directement les navigateurs en ouvrant des pages web, en cliquant sur des éléments, en saisissant du texte, etc. grâce au protocole Model Context Protocol (MCP). L'outil est basé sur le cadre Playwright et prend en charge des navigateurs tels que Chromium, Firefox et WebKit. Playwright MCP est particulièrement bien adapté aux applications d'intelligence artificielle qui nécessitent une interaction avec les pages web, comme les tests automatisés ou l'extraction de données. La documentation officielle est mise à jour jusqu'en mars 2025, et le projet est actif et populaire auprès des développeurs.

Projet du même nom :MCP Playwright : un service MCP qui fournit des opérations d'automatisation du navigateur.

Liste des fonctions

• Prise en charge du contrôle du navigateur : possibilité d'ouvrir des pages web, de naviguer dans les pages, de cliquer sur des éléments, etc.
• Générer des données structurées : produire des données par le biais d'instantanés d'accessibilité, sans capture d'écran.
• Deux modes sont proposés : le mode instantané par défaut et le mode vision.
• Capture d'écran et enregistrement : vous pouvez effectuer une capture d'écran d'une page ou l'enregistrer au format PDF.
• Saisie et utilisation : prise en charge de la saisie de texte, de la frappe au clavier, du glisser-déposer et d'autres fonctions.
• Compatible avec le mode "headless" : permet d'exécuter le navigateur en arrière-plan sans afficher l'interface.

Utiliser l'aide

Le MCP Playwright est simple à installer et à utiliser. Vous trouverez ci-dessous une description détaillée de l'installation et de l'utilisation de cet outil, y compris les caractéristiques spécifiques des deux modes.

Processus d'installation

1. Préparation de l'environnement
   Installez d'abord Node.js (la dernière version LTS est recommandée, par exemple v22). Vérifiez la version avec :

node -v

Si vous ne l'avez pas, visitez le site officiel de Node.js pour le télécharger et l'installer.

2. Installation du MCP Playwright
   Exécutez la commande suivante dans le terminal :

npm install -g @playwright/mcp

Ou utilisez simplement la dernière version :

npx @playwright/mcp@latest

3. Démarrer le serveur
   Saisissez la commande de démarrage :

npx @playwright/mcp@latest

Le mode par défaut est le mode avec en-tête (affichage de la fenêtre du navigateur). Si vous souhaitez utiliser le mode sans en-tête, ajoutez le paramètre :

npx @playwright/mcp@latest --headless

4. Configuration du client AI
   Si votre outil d'IA prend en charge le MCP (par exemple, certains clients de grands modèles), vous devez modifier le fichier de configuration. Exemple de fichier de configuration :

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest", "--headless"]
}
}
}

Une fois enregistré, l'IA pourra appeler le navigateur par l'intermédiaire du MCP.

5. Configuration pour les environnements sans moniteur
   Dans un environnement Linux sans moniteur, vous pouvez utiliser le mode client-serveur. Commencez par l'exécuter sur une machine dotée d'un moniteur :

npx playwright run-server

La sortie affichera une adresse WebSocket, telle que ws://localhost:port/. et ensuite ajoutés dans la configuration MCP :

{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}

Comment utiliser les principales fonctionnalités

Playwright MCP dispose de deux modes : le mode instantané et le mode visuel. Ils sont décrits séparément ci-dessous.

Mode instantané (par défaut)

Ce mode fonctionne avec des instantanés accessibles, qui sont rapides et stables. Les outils couramment utilisés sont énumérés ci-dessous :

1. ouvrir une page web

• Instructions :browser_navigate "https://example.com"
• Action : Le navigateur ouvre l'URL spécifié.
• Résultat : renvoie l'état de chargement de la page.

2. cliquer sur un élément

• Instructions :browser_click "登录按钮" "ref123"
• Action : cliquez sur l'instantané marqué ref123 de l'élément (description de l'élément et citation requises).
• Note : Les références sont des données instantanées.

3. entrée

• Instructions :browser_type "用户名输入框" "ref456" "myuser" true
• Fonctionnement : dans le ref456 dans la zone de saisie, puis appuyez sur Entrée (true (indique la soumission).

4. Enregistrer en PDF

• Instructions :browser_save_as_pdf
• Action : Enregistre la page actuelle en tant que fichier PDF.

5. temps d'attente

• Instructions :browser_wait 5
• Fonctionnement : attendre 5 secondes (maximum 10 secondes).

modèle visuel

l'amorçage avec --vision Paramètres :

npx @playwright/mcp@latest --vision

Ce modèle fonctionne avec des captures d'écran et des coordonnées et convient aux modèles visuels. Outils couramment utilisés :

1. Page d'interception
   • Instructions :browser_screenshot
   • Action : générer une capture d'écran de la page en cours.
2. Cliquez sur les coordonnées
   • Instructions :browser_click 100 200
   • Action : Cliquez sur les coordonnées (100, 200).
3. opération de glisser-déposer
   • Instructions :browser_drag 50 50 150 150
   • Action : glisser de (50, 50) à (150, 150).
4. entrée
   • Instructions :browser_type "hello" true
   • Action : Tapez "hello" et appuyez sur Entrée.

Exemple de déroulement des opérations

Supposons que vous souhaitiez vous connecter au site web :

1. Démarrer le serveur :

npx @playwright/mcp@latest --headless

2. Ouvrez la page de connexion :

• Instructions :browser_navigate "https://example.com/login"

3. Saisir le nom d'utilisateur et le mot de passe (mode instantané) :

• Instructions :browser_type "用户名" "ref1" "myuser" false
• Instructions :browser_type "密码" "ref2" "mypassword" true

4. Cliquez sur Connexion (mode visuel) :

• Changement de mode : redémarrage du serveur plus --vision
• Instructions :browser_click 300 400

5. Résultats de l'inspection :

• Instructions :browser_snapshot(mode instantané) ou browser_screenshot(mode visuel).

mise en garde

• Le mode instantané est plus fiable que le mode visuel, mais il nécessite des références d'éléments.
• Le modèle visuel est adapté aux modèles d'IA avec coordonnées.
• Le mode sans en-tête convient aux tâches par lots, et le mode avec en-tête facilite le débogage.

scénario d'application

1. Navigation sur le web et remplissage de formulaires
   L'IA ouvre automatiquement les pages web, remplit les formulaires et les soumet, ce qui la rend adaptée à l'enregistrement en masse ou aux tests de connexion.
2. extraction de données
   Obtenez des données structurées à partir de pages web dynamiques, telles que des prix ou des avis.
3. test automatisé
   Vérifier que la page fonctionne correctement, par exemple en cas de clic sur un bouton ou de saut de page.
4. Interaction avec des agents intelligents
   Laissez l'IA piloter le navigateur pour effectuer des tâches complexes, telles que les achats en ligne.

QA

1. Quelle est la différence entre le mode instantané et le mode visuel ?
   Le mode instantané fonctionne avec des données structurées et est rapide et stable ; le mode visuel utilise des captures d'écran et des coordonnées et convient à l'IA visuelle.
2. Quels sont les navigateurs pris en charge ?
   Chromium, Firefox et WebKit sont pris en charge.
3. Besoin d'écrire du code ?
   Ce n'est pas nécessaire. Il suffit d'envoyer une simple commande pour que l'IA agisse.