Selenium MCP Server

🚀 Selenium MCP Server

Seleniumを使用してWebDriverインスタンスとやり取りするMCPサーバーです。MCP-Server-Starterテンプレートを使用して構築されています。

🚀 クイックスタート

このサーバーを使用するには、以下の手順に従ってください。

1. リポジトリをクローンする：

   git clone <your-repo-url> selenium-mcp-server
   cd selenium-mcp-server
   

2. 依存関係をインストールする：

   npm install
   

3. WebDriverを設定する：
   • WebDriver（例：chromedriver）がインストールされ、システムのPATHに含まれていることを確認してください。
   • 必要に応じて、src/seleniumService.ts（このファイルを作成する必要があります）を変更して、ブラウザオプションやWebDriverのパスを指定してください。
4. サーバーをビルドする：

   npm run build
   

5. サーバーを起動する：

   npm start
   

   あるいは、CursorやClaude DesktopなどのMCPホストと統合することもできます（以下の「MCPホストとの統合」セクションを参照）。

✨ 主な機能

このサーバーは、AIエージェントがSelenium WebDriverを介してウェブブラウザセッションを制御できるようにし、モデルコンテキストプロトコルを通じてウェブスクレイピング、自動テスト、フォーム入力などのタスクを実行できます。

コアコンポーネント

• MCPサーバー：Selenium WebDriverのアクションをMCPツールとして公開します。
• Selenium WebDriver：ブラウザとやり取りします。
• MCPクライアント：公開されたツールを利用できるAIホスト（Cursor、Claude Desktopなど）です。

📦 インストール

前提条件

• Node.js（v18以降）
• npm（v7以降）
• WebDriver実行ファイル（例：ChromeDriver、GeckoDriver）がインストールされ、システムのPATHに含まれていること。
• 互換性のあるウェブブラウザ（例：Chrome、Firefox）

💻 使用例

基本的な使用法

このサーバーは、以下のようなツールを提供します。

• selenium_navigate：ブラウザを特定のURLに移動します。
• selenium_findElement：CSSセレクタを使用してページ上の要素を検索します。
• selenium_click：要素をクリックします。
• selenium_sendKeys：要素にキー入力を送信します。
• selenium_getPageSource：現在のページソースHTMLを取得します。
• （必要に応じて、他のツールを追加できます）

高度な使用法

以下は、TypeScriptを使用したサーバーの実装例です。

import { Server } from "@modelcontextprotocol/sdk/server/index.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { Builder, By, Key, until, WebDriver } from 'selenium-webdriver';

// 基本的なサーバーセットアップ（詳細はsrc/index.tsを参照）
const server = new Server({
  name: "selenium-mcp-server",
  version: "0.1.0",
  capabilities: {
    tools: {}, // ツール機能を有効にする
  }
});

// Selenium WebDriverのセットアップ（詳細はsrc/seleniumService.tsを参照）
let driver: WebDriver;

async function initializeWebDriver() {
  driver = await new Builder().forBrowser('chrome').build(); // または 'firefox' など
}

// ツールの実装例（詳細はsrc/tools/を参照）
server.registerTool('selenium_navigate', {
  description: 'Navigates the browser to a specific URL.',
  inputSchema: { /* ... zod schema ... */ },
  outputSchema: { /* ... zod schema ... */ },
  handler: async (params) => {
    await driver.get(params.url);
    return { success: true };
  }
});

// トランスポートを接続する
async function startServer() {
  await initializeWebDriver();
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.log("Selenium MCP Server connected via stdio.");

  // グレースフルシャットダウン
  process.on('SIGINT', async () => {
    console.log("Shutting down WebDriver...");
    if (driver) {
      await driver.quit();
    }
    process.exit(0);
  });
}

startServer();

📚 ドキュメント

開発

• ビルド：npm run build
• 実行：npm start（node build/index.jsを実行します）
• リント：npm run lint
• フォーマット：npm run format

デバッグ

MCPインスペクタまたは標準のNode.jsデバッグ手法を使用してください。

MCPホストとの統合

Cursorとの統合

1. サーバーをビルドする：npm run build
2. Cursorで：Settings > Features > MCP：新しいMCPサーバーを追加します。
3. サーバーを登録する：
   • トランスポートタイプとしてstdioを選択します。
   • 名前：Selenium Server（または類似の名前）。
   • コマンド：node /path/to/selenium-mcp-server/build/index.js。
4. 保存

Claude Desktopとの統合

1. サーバーをビルドする：npm run build
2. claude_desktop_config.jsonを変更する：

   {
     "mcpServers": {
       "selenium-mcp-server": {
         "command": "node",
         "args": [
           "/path/to/selenium-mcp-server/build/index.js"
         ]
       }
     }
   }
   

3. Claude Desktopを再起動する

ベストプラクティス

• TypeScriptとZodを使用して、型安全と検証を行います。
• ツールをモジュール化します（例：src/tools/に1ファイルにつき1つのツールを配置します）。
• WebDriverのエラーを適切に処理します（例：要素が見つからない、ナビゲーションエラーなど）。
• 適切にWebDriverをシャットダウンします（例：サーバー終了時にdriver.quit()を呼び出します）。
• MCPのベストプラクティスに従って、スキーマ、エラーハンドリング、コンテンツタイプを設定します。

詳細情報

• Model Context Protocol Documentation
• Selenium WebDriver JS Documentation
• MCP TypeScript SDK Documentation

📄 ライセンス

このプロジェクトは、Seth Roseによって作成されたテンプレートに基づいています。

• ウェブサイト：https://www.sethrose.dev
• 𝕏 (Twitter)：https://x.com/TheSethRose
• 🦋 (Bluesky)：https://bsky.app/profile/sethrose.dev