Mcpサーバー プレイライト

MCP-Server-Playwrightとは？

MCP-Server-Playwrightは、Playwrightを使用したブラウザ自動化のために設計された革新的なサーバーです。Playwrightは、開発者がさまざまなブラウザでWebアプリケーションを自動化できる強力なライブラリです。このプロジェクトは、ユーザーのインタラクションをシミュレートし、効率的にデータを収集できるため、テストやWebスクレイピングに特に役立ちます。

MCP-Server-Playwrightの特徴

• クロスブラウザサポート: MCP-Server-Playwrightは、Chrome、Firefox、Safariなど複数のブラウザをサポートしており、異なる環境で自動化スクリプトがシームレスに実行できるようにします。
• 簡単なセットアップ: サーバーは迅速なインストールと構成のために設計されており、すべてのスキルレベルの開発者がアクセスしやすくなっています。
• 強力なAPI: ブラウザのインタラクションに対する詳細な制御を可能にする包括的なAPIを提供し、ナビゲーション、要素選択、イベント処理などを含みます。
• ヘッドレスモード: ユーザーはヘッドレスモードでテストを実行でき、これはCI/CDパイプラインやグラフィカルインターフェースが利用できない環境に最適です。
• 豊富なドキュメント: プロジェクトには詳細なドキュメントが付属しており、開発者がすぐに始めてすべての機能を効果的に利用できるようにしています。

MCP-Server-Playwrightの使い方

1. インストール: GitHubからリポジトリをクローンすることから始めます:

   git clone https://github.com/Automata-Labs-team/MCP-Server-Playwright.git
   cd MCP-Server-Playwright
   

2. 依存関係: npmまたはyarnを使用して必要な依存関係をインストールします:

   npm install
   

3. サーバーの実行: 次のコマンドでサーバーを起動します:

   npm start
   

4. 自動化スクリプトの作成: 提供されたAPIを使用して自動化スクリプトを書きます。以下は、ウェブページに移動するためのシンプルな例です:

   const { chromium } = require('playwright');
   
   (async () => {
       const browser = await chromium.launch();
       const page = await browser.newPage();
       await page.goto('https://example.com');
       await browser.close();
   })();
   

5. テストとデバッグ: 内蔵のデバッグツールを利用してスクリプトをテストし、期待通りに動作することを確認します。

よくある質問

Playwrightとは？

Playwrightは、Microsoftによって開発されたオープンソースの自動化ライブラリで、開発者が異なるブラウザでWebアプリケーションを自動化できるようにします。最新のWebアプリ機能をサポートし、ブラウザインタラクションのための豊富なAPIを提供します。

MCP-Server-PlaywrightをWebスクレイピングに使用できますか？

はい、MCP-Server-PlaywrightはWebスクレイピングタスクに非常に適しています。ブラウザアクションを自動化する能力により、Webページからデータを抽出するのが容易です。

MCP-Server-Playwrightは無料で使用できますか？

もちろんです！MCP-Server-Playwrightはオープンソースで、誰でも使用、修正、配布できるMITライセンスの下で提供されています。

プロジェクトに貢献するにはどうすればよいですか？

貢献は大歓迎です！GitHubリポジトリで問題の提出、機能リクエスト、プルリクエストを送信することで貢献できます。詳細については、ドキュメントの貢献ガイドラインを参照してください。

ドキュメントはどこで見つけられますか？

MCP-Server-Playwrightのドキュメントはリポジトリにあります。直接こちらからアクセスできます。

<h1 align="center">MCP Server Playwright</h1> <p align="center"> <a href="https://www.automatalabs.io"><img alt="MCP Playwright" src="https://automatalabs.io/icon.svg" height="250"/></a> </p> <p align="center"> <b>A Model Context Protocol server that provides browser automation capabilities using Playwright</b></br> _{Enable LLMs to interact with web pages, take screenshots, and execute JavaScript in a real browser environment} </p> <p align="center"> <a href="https://www.npmjs.com/package/@automatalabs/mcp-server-playwright"><img alt="NPM Version" src="https://img.shields.io/npm/v/@automatalabs/mcp-server-playwright.svg" height="20"/></a> <a href="https://npmcharts.com/compare/@automatalabs/mcp-server-playwright?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@automatalabs/mcp-server-playwright.svg" height="20"/></a> <a href="https://github.com/Automata-Labs-team/MCP-Server-Playwright/blob/main/LICENSE"><img alt="License" src="https://img.shields.io/github/license/Automata-Labs-team/MCP-Server-Playwright.svg" height="20"/></a> <a href="https://smithery.ai/server/@automatalabs/mcp-server-playwright"><img alt="Smithery Installs" src="https://smithery.ai/badge/@automatalabs/mcp-server-playwright" height="20"/></a> </p>

<a href="https://glama.ai/mcp/servers/9q4zck8po5"><img width="380" height="200" src="https://glama.ai/mcp/servers/9q4zck8po5/badge" alt="MCP-Server-Playwright MCP server" /></a>

Table of Contents

• Features
• Installation
• Configuration
• Components
  • Tools
  • Resources
• License

Features

• 🌐 Full browser automation capabilities
• 📸 Screenshot capture of entire pages or specific elements
• 🖱️ Comprehensive web interaction (navigation, clicking, form filling)
• 📊 Console log monitoring
• 🔧 JavaScript execution in browser context

Installation

Installing via Smithery

To install MCP Server Playwright for Claude Desktop automatically via Smithery:

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

You can install the package using either npx or mcp-get:

Using npx:

npx @automatalabs/mcp-server-playwright install

This command will:

1. Check your operating system compatibility (Windows/macOS)
2. Create or update the Claude configuration file
3. Configure the Playwright server integration

The configuration file will be automatically created/updated at:

• Windows: %APPDATA%\Claude\claude_desktop_config.json
• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

Using mcp-get:

npx @michaellatman/mcp-get@latest install @automatalabs/mcp-server-playwright

Configuration

The installation process will automatically add the following configuration to your Claude config file:

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

Using with Cursor

You can also use MCP Server Playwright with Cursor, an AI-powered code editor. To enable browser automation in Cursor via MCP:

1. Install Playwright browsers (if not already):

   npx playwright install
   

2. Install MCP Server Playwright for Cursor using Smithery:

   npx -y @smithery/cli install @automatalabs/mcp-server-playwright --client cursor
   

3. Configuration file setup:
   If you do not use Claude, the configuration file (claude_desktop_config.json) may not be created automatically.

   • On Windows, create a folder named Claude in %APPDATA% (usually C:\Users\<YourName>\AppData\Roaming\Claude).
   • Inside that folder, create a file named claude_desktop_config.json with the following content:

   {
     "serverPort": 3456
   }
   

4. Follow the remaining steps in the Installation section above to complete the setup.

Now, you can use all the browser automation tools provided by MCP Server Playwright directly from Cursor’s AI features, such as web navigation, screenshot capture, and JavaScript execution.

Note: Make sure you have Node.js installed and npx available in your system PATH.

Components

Tools

browser_navigate

Navigate to any URL in the browser

{
  "url": "https://stealthbrowser.cloud"
}

browser_screenshot

Capture screenshots of the entire page or specific elements

{
  "name": "screenshot-name",     // required
  "selector": "#element-id",     // optional
  "fullPage": true              // optional, default: false
}

browser_click

Click elements on the page using CSS selector

{
  "selector": "#button-id"
}

browser_click_text

Click elements on the page by their text content

{
  "text": "Click me"
}

browser_hover

Hover over elements on the page using CSS selector

{
  "selector": "#menu-item"
}

browser_hover_text

Hover over elements on the page by their text content

{
  "text": "Hover me"
}

browser_fill

Fill out input fields

{
  "selector": "#input-field",
  "value": "Hello World"
}

browser_select

Select an option in a SELECT element using CSS selector

{
  "selector": "#dropdown",
  "value": "option-value"
}

browser_select_text

Select an option in a SELECT element by its text content

{
  "text": "Choose me",
  "value": "option-value"
}

browser_evaluate

Execute JavaScript in the browser console

{
  "script": "document.title"
}

Resources

1. Console Logs (console://logs)

   • Access browser console output in text format
   • Includes all console messages from the browser

2. Screenshots (screenshot://<n>)

   • Access PNG images of captured screenshots
   • Referenced by the name specified during capture

License

This project is licensed under the MIT License - see the LICENSE file for details.