MCP Playwright : un service MCP qui fournit des opérations d'automatisation du navigateur.

Introduction générale

MCP-Playwright est un outil open source développé par ExecuteAutomation et hébergé sur GitHub. Il est basé sur Playwright et Modèle Contexte Protocole (MCP), dans le but de permettre aux utilisateurs de mettre en œuvre l'automatisation du navigateur et les tests d'API par le biais de commandes en langage naturel. Cet outil convient à la fois aux développeurs et aux testeurs et permet de connecter les éléments suivants Claude et d'autres grands modèles de langage (LLM) pour contrôler les actions du navigateur telles que l'ouverture d'une page web, le clic sur un bouton, le remplissage d'un formulaire, la réalisation d'une capture d'écran ou l'envoi d'une demande d'API au moyen d'un texte simple. Les utilisateurs n'ont pas besoin d'écrire un code complexe, ce qui abaisse le seuil d'utilisation. Le projet est actuellement en phase de développement, la fonction est progressivement améliorée et la communauté est invitée à contribuer au code.

Liste des fonctions

• Automatisation du navigateurLes services d'aide à la navigation : ils permettent de naviguer vers une page web spécifique, de cliquer sur un élément, de remplir un champ de saisie, de sélectionner une option dans une liste déroulante, etc.
• Test de l'APIIl peut envoyer des requêtes GET, POST, PUT, PATCH, DELETE et inspecter la réponse.
• fonction de capture d'écranLa page web entière ou une zone spécifique peut être interceptée et sauvegardée en tant qu'image.
• Exécuter JavaScriptLa possibilité d'exécuter un code JavaScript personnalisé dans le navigateur.
• Obtenir le journal de la console: extrait les informations d'erreur, d'avertissement ou de débogage du navigateur.
• contrôle du langage naturelLe système d'information sur la santé : Il se connecte à des modèles tels que Claude via le protocole MCP et fonctionne avec des commandes textuelles.

Utiliser l'aide

MCP-Playwright nécessite une installation et une configuration simples pour fonctionner. Vous trouverez ci-dessous les étapes détaillées qui vous aideront à démarrer rapidement.

Processus d'installation

Pour utiliser cet outil, vous devez préparer l'environnement et installer les composants nécessaires. Vous trouverez ci-dessous les détails de la procédure à suivre :

1. Vérification de l'environnement
   • Assurez-vous que Node.js est installé sur votre ordinateur (la dernière version stable est recommandée).
   • Un client compatible MCP, tel que Claude Desktop Client, est nécessaire.
   • Installer Git pour télécharger le code (facultatif).
2. Télécharger le projet (installation manuelle optionnelle)
   • Ouvrez un terminal et exécutez le programme :

     git clone https://github.com/executeautomation/mcp-playwright.git
     

   • Accédez au catalogue de projets :

     cd mcp-playwright
     

3. Installation des dépendances
   • Exécuter dans le répertoire du projet :

     npm install
     

   • Cela installera Playwright et les autres composants nécessaires.
4. Installer directement via npm (recommandé)
   • Si vous ne souhaitez pas le télécharger manuellement, vous pouvez simplement l'exécuter :

     npm install -g @executeautomation/playwright-mcp-server
     

   • Cette opération permet d'installer globalement le serveur.
5. Installation via Smithery (pour Claude Desktop)
   • Exécutez la commande suivante pour l'installer et le configurer automatiquement :

     npx -y @smithery/cli install @executeautomation/playwright-mcp-server --client claude
     

6. Configuration de Claude Desktop
   • Localisez le fichier de configuration de Claude Desktop (généralement dans le dossier Claude du répertoire utilisateur sous le nom de fichier claude-desktop-config.json).
   • Ajouter ce qui suit :

     {
     "mcpServers": {
     "playwright": {
     "command": "npx",
     "args": ["-y", "@executeautomation/playwright-mcp-server"]
     }
     }
     }
     

   • Après avoir sauvegardé et redémarré Claude Desktop, le bouton "Attach from MCP" apparaît sur l'interface, indiquant que la configuration est réussie.

Comment l'utiliser

Une fois installé, vous pouvez utiliser des commandes en langage naturel pour contrôler le navigateur ou tester l'API.

Automatisation du navigateur

• ouvrir une page web
  Entrer à Claude Desktop :

打开网页 https://example.com

L'outil lance le navigateur et charge la page.

• cliquer sur un élément
  Entrée :

点击页面上的登录按钮，使用选择器 #loginBtn

Il trouvera l'ID loginBtn et cliquez dessus.

• Remplir le formulaire
  Entrée :

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "123456"，使用选择器 #password

L'outil remplit le contenu automatiquement.

• capture d'écran (informatique)
  Entrée :

截取整个网页，保存为 "page.png"

La capture d'écran est enregistrée dans le répertoire actuel.

• Exécution de JavaScript
  Entrée :

在浏览器中执行 JavaScript 代码 "document.title"

Renvoie le titre de la page.

• Obtenir des journaux
  Entrée :

获取浏览器控制台日志，只显示错误信息

L'outil renvoie un journal d'erreurs.

Test de l'API

• Envoyer une requête GET
  Entrée :

对 https://api.example.com/data 发送 GET 请求

Renvoie le code d'état et les données.

• Envoyer une requête POST
  Entrée :

对 https://api.example.com/users 发送 POST 请求，数据为 {"name": "TestUser"}
检查响应中包含 "id"

L'outil validera les résultats.

• Données actualisées
  Entrée :

对 https://api.example.com/users/1 发送 PUT 请求，数据为 {"name": "NewUser"}

Les données seront mises à jour.

exemple de fonctionnement

Supposons que vous souhaitiez tester un processus de connexion :

1. Entrée :

打开网页 http://eaapp.somee.com

2. Entrée :

点击页面上的登录链接，使用选择器 #loginLink

3. Entrée :

在用户名输入框填写 "admin"，使用选择器 #username
在密码输入框填写 "password"，使用选择器 #password
点击登录按钮，使用选择器 #loginBtn

4. Entrée :

截取整个网页，保存为 "login_result.png"

5. Entrée :

关闭浏览器

L'ensemble du processus s'effectue en langage naturel et est simple et intuitif.

Outils de test

Le projet utilise Jest pour les tests. Si vous souhaitez vérifier une fonctionnalité, vous pouvez exécuter des tests :

• Saisissez-le dans le terminal :

npm test

• Rapport sur la couverture de la bande :

  npm run test:coverage
  

Le rapport de test est généré dans le coverage Catalogue.

mise en garde

• Les demandes d'authentification complexes (telles que OAuth) ne sont actuellement pas prises en charge par l'outil.
• Si vous rencontrez des problèmes, consultez la documentation officielle à l'adresse https://executeautomation.github.io/mcp-playwright/.
• Le projet est open source, vous pouvez le forker et soumettre des suggestions d'amélioration.