🎭
初心者必見！Playwright MCPで始めるブラウザ自動化

2025/03/31に公開
Model Context Protocol
tech
 初心者必見！Playwright MCPで始めるブラウザ自動化
 はじめにWebアプリケーションのテストや自動化を行う際、効率的なブラウザ操作は欠かせません。これまで多くの自動化ツールが登場してきましたが、2025年にMicrosoftが発表した「Playwright MCP」は、AIとの連携を視野に入れた次世代のブラウザ自動化ツールとして注目を集めています。
Playwright MCPの「MCP」は「Model Context Protocol」の略で、AI（LLM：大規模言語モデル）がブラウザを直接操作できるようにするための革新的なプロトコルです。このツールを使えば、自然言語の指示でブラウザを操作したり、AIエージェントとの連携も簡単に実現できます。
本記事では、Playwright MCPの基本概念から導入方法、実践的な使い方まで、初心者にもわかりやすく解説します。ブラウザ自動化やテスト自動化に興味がある方、AIと連携した新しい可能性を探りたい方は、ぜひ最後までお読みください。

 Playwright MCPとは何か？
 Playwrightについての基本まず、Playwright MCPを理解する前に、Playwrightについて簡単に説明しておきましょう。
Playwrightは、マイクロソフトが開発したオープンソースのブラウザ自動化ツールです。Chromium、Firefox、WebKitなど複数のブラウザに対応しており、単一のAPIでクロスブラウザテストを行うことができます。JavaScriptやTypeScriptを用いて、ブラウザの操作を自動化できる強力なツールです。


出典: Playwright 公式サイト

 MCPとはMCPは「Model Context Protocol」の略で、大規模言語モデル（LLM）がツールやデータにアクセスするための標準的なプロトコルです。簡単に言えば、AIが外部のツールやデータと安全かつ効率的にやり取りするための共通言語のようなものです。

 Playwright MCPの特徴Playwright MCPは、PlaywrightをMCPに対応させたもので、以下のような特徴があります：

アクセシビリティツリーの活用: ピクセルベースの画像認識ではなく、ウェブページの構造情報を活用

LLMフレンドリー: AIモデルと連携しやすい設計

高速かつ軽量: スクリーンショットによる視覚認識より処理が高速

決定論的な操作: 確実な要素の特定と操作

 従来のブラウザ自動化との違い従来のブラウザ自動化ツールと比較すると、Playwright MCPには以下のような違いがあります：


従来のアプローチ
Playwright MCP


HTML/DOMに直接アクセス
アクセシビリティツリーを活用

画像認識や座標ベースの操作が主流
構造ベースの操作が主流

AIとの連携には追加の実装が必要
AIとの連携を前提とした設計

複雑なセレクタの指定が必要
自然言語に近い指示が可能


 アクセシビリティツリーとはPlaywright MCPの中核となる技術が「アクセシビリティツリー」です。これは、ウェブページの視覚的な表現ではなく、その意味的な構造を表現したものです。
アクセシビリティツリーは、スクリーンリーダーなどの支援技術が利用するものと同じで、ページ上の要素の役割（ボタン、リンク、テキスト入力など）、名前、状態、関係性などの情報を含んでいます。


アクセシビリティツリーの概念図
Playwright MCPは、このアクセシビリティツリーを利用することで、ウェブページの見た目ではなく「意味」に基づいて要素を特定し操作します。これにより、視覚的なUIの変更に強く、より安定した自動化が可能になります。

 Playwright MCPの2つの動作モードPlaywright MCPには、「スナップショットモード」と「ビジョンモード」という2つの操作モードがあります。それぞれの特徴と使い分けについて見ていきましょう。

 スナップショットモード（デフォルト）スナップショットモードは、Playwright MCPのデフォルトの動作モードです。このモードでは、ブラウザのアクセシビリティツリーを利用して、ウェブページの構造情報に基づいて要素を特定・操作します。
特徴と利点：

高速: スクリーンショットの生成や画像処理が不要なため処理が高速

軽量: リソース消費が少ない

安定性: UIの見た目の変化に強い

構造理解: ページの意味的な構造に基づく操作が可能

正確性: 要素の特定が正確
スナップショットモードは、多くの一般的なウェブ操作（ナビゲーション、フォーム入力、データ抽出など）に適しています。
// スナップショットモードの例（デフォルト）
npx @playwright/mcp

 ビジョンモードビジョンモードは、従来の視覚的な自動化ツールに近い動作をします。このモードでは、ウェブページのスクリーンショットを取得し、それに基づいて座標ベースの操作を行います。
特徴と使い所：

視覚的要素の操作: 構造では表現しにくい視覚的な要素の操作

座標ベースの操作: X-Y座標に基づく操作が可能

視覚AIモデルとの相性: コンピュータビジョン対応AIモデルとの連携に適している

アクセシビリティ情報が不十分な場合: アクセシビリティが考慮されていないサイトでの操作
ビジョンモードは、特殊なUIコンポーネントや、アクセシビリティ情報が不十分なウェブサイトでの操作に役立ちます。
// ビジョンモードを有効にする例
npx @playwright/mcp --vision

 モードの選択基準どちらのモードを選ぶべきかは、以下の基準で判断するとよいでしょう：
スナップショットモード（推奨）:
一般的なウェブサイト操作
パフォーマンスが重要な場合
安定性を重視する場合
通常のフォーム入力やデータ抽出
ビジョンモード:
アクセシビリティ情報が不足しているサイト
視覚的な確認が必要な場合
キャンバスやグラフィカルな要素の操作
画像認識が必要な操作


Playwright MCPの2つの動作モード

 Playwright MCPのインストールと設定ここからは、Playwright MCPを実際に使うための準備をしていきましょう。初心者でも迷わないよう、ステップバイステップで説明します。

 必要な環境Playwright MCPを使うには、以下の環境が必要です：

Node.js: Playwright MCPはNode.js環境で動作します

Claude Desktop（オプション）: AIとの連携を行う場合

 Node.jsのインストールまず、Node.jsをインストールしましょう。公式サイトから、LTS（長期サポート）版をダウンロードしてインストールします。

Node.js公式サイトにアクセス
LTS版のインストーラをダウンロード
インストーラを実行し、指示に従ってインストール
インストールが完了したら、ターミナル（WindowsならコマンドプロンプトかPowerShell）を開き、以下のコマンドでNode.jsとnpmのバージョンを確認します：
node -v
npm -v
バージョン番号が表示されれば、Node.jsのインストールは成功です。

 Playwright MCPのインストールと実行Playwright MCPは、npxコマンドを使用して直接実行することができます。永続的なインストールは不要です。
基本的な実行方法：
npx @playwright/mcp
このコマンドを実行すると、Playwright MCPサーバーが起動します。デフォルトではスナップショットモードで動作します。
ビジョンモードで実行する場合：
npx @playwright/mcp --vision

 その他のオプションPlaywright MCPには、以下のようなオプションがあります：

--port=<ポート番号>: 特定のポートでサーバーを起動

--headless: ヘッドレスモード（ブラウザウィンドウを表示しない）

--vision: ビジョンモードを有効化
例えば、ポート8000でヘッドレスモードのサーバーを起動する場合：
npx @playwright/mcp --port=8000 --headless

 Claude DesktopとPlaywright MCPの連携方法Playwright MCPの魅力の一つは、Claude AIなどのLLMとの連携が容易なことです。ここでは、Claude Desktopとの連携方法を説明します。

 Claude Desktopのインストールと設定
Claude公式サイトからデスクトップアプリをダウンロード・インストール
アカウント登録・ログイン
開発者モードを有効化
左上のメニュー → ヘルプ → 開発者モードを有効にする



Claude Desktopで開発者モードを有効化

 設定ファイルの編集Claude Desktopで開発者モードを有効にしたら、次のステップは設定ファイルの編集です：
Claude Desktopの「開発者」タブを開く
「構成を編集」または「構成を始める」をクリック

claude_desktop_config.jsonを開いて編集
以下の内容を追加します：
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp"
      ]
    }
  }
}
ビジョンモードを使用する場合は、以下のようにargsを変更します：
"args": [
  "@playwright/mcp",
  "--vision"
]
ファイルを保存し、Claude Desktopを再起動
これで、Claude DesktopからPlaywright MCPを使用する準備が整いました。


Claude DesktopとPlaywright MCPの連携設定

 Playwright MCPの基本的な使い方Playwright MCPの設定が完了したら、実際に使ってみましょう。ここでは、基本的な操作方法を紹介します。

 主要なツールとコマンドPlaywright MCPは、モードによって利用できるツールが異なります。

 スナップショットモードの主要ツールスナップショットモード（デフォルト）では、以下のような主要ツールがあります：

browser_navigate: URLへのナビゲーション

browser_snapshot: アクセシビリティスナップショットの取得

browser_click: 要素のクリック

browser_type: テキスト入力

browser_select_option: ドロップダウンメニューからの選択

browser_go_back: ブラウザで前のページに戻る

browser_go_forward: ブラウザで次のページに進む

browser_take_screenshot: スクリーンショットの取得

browser_choose_file: ファイル選択

browser_save_as_pdf: PDFとして保存

 ビジョンモードの主要ツールビジョンモードでは、以下のような追加ツールが利用可能です：

browser_screenshot: スクリーンショットの取得

browser_move_mouse: 座標指定によるマウス移動

browser_click: 座標指定によるクリック（スナップショットモードとは動作が異なる）

 基本的な操作例
 ウェブサイトへのナビゲーション// Googleにアクセスする例
browser_navigate({ url: "https://www.google.com" })

// スナップショットを取得
const snapshot = browser_snapshot()

 要素のクリックと入力// スナップショットから検索ボックスを見つけてクリック
browser_click({ 
  element: "検索ボックス", 
  ref: snapshot.searchBox.ref 
})

// テキストを入力
browser_type({ 
  element: "検索ボックス", 
  ref: snapshot.searchBox.ref, 
  text: "Playwright MCP", 
  submit: true 
})

 フォーム入力の例// ログインフォームの例
browser_navigate({ url: "https://example.com/login" })
const snapshot = browser_snapshot()

// ユーザー名入力
browser_click({ 
  element: "ユーザー名フィールド", 
  ref: snapshot.usernameField.ref 
})
browser_type({ 
  element: "ユーザー名フィールド", 
  ref: snapshot.usernameField.ref, 
  text: "testuser", 
  submit: false 
})

// パスワード入力
browser_click({ 
  element: "パスワードフィールド", 
  ref: snapshot.passwordField.ref 
})
browser_type({ 
  element: "パスワードフィールド", 
  ref: snapshot.passwordField.ref, 
  text: "password123", 
  submit: false 
})

// ログインボタンクリック
browser_click({ 
  element: "ログインボタン", 
  ref: snapshot.loginButton.ref 
})

 Claude AIとの連携例Claude DesktopとPlaywright MCPを連携させると、自然言語での指示でブラウザ操作が可能になります。例えば：
Googleにアクセスして「Playwright MCP」で検索し、最初の検索結果をクリックしてください。
このような指示を出すと、Claude AIがPlaywright MCPを通じて実際にブラウザを操作します。


Claude AIによるブラウザ操作のイメージ

 実践的な使用例ここでは、より実践的なPlaywright MCPの使用例を紹介します。

 フォーム入力の自動化例えば、複数のフォームに同じデータを入力する作業を自動化するケースを考えてみましょう。
// フォームの自動入力関数
async function fillForm(url, formData) {
  await browser_navigate({ url: url });
  const snapshot = await browser_snapshot();
  
  // フォームの各フィールドを入力
  for (const [fieldName, value] of Object.entries(formData)) {
    const field = findFieldByLabel(snapshot, fieldName);
    if (field) {
      await browser_click({ element: fieldName, ref: field.ref });
      await browser_type({ 
        element: fieldName, 
        ref: field.ref, 
        text: value, 
        submit: false 
      });
    }
  }
  
  // 送信ボタンを探してクリック
  const submitButton = findSubmitButton(snapshot);
  if (submitButton) {
    await browser_click({ 
      element: "送信ボタン", 
      ref: submitButton.ref 
    });
  }
}

// 使用例
const userData = {
  "氏名": "山田太郎",
  "メールアドレス": "yamada@example.com",
  "電話番号": "03-1234-5678",
  "コメント": "Playwright MCPのテストです。"
};

fillForm("https://example.com/contact", userData);

 データ抽出とスクレイピングウェブページから特定のデータを抽出する例です。
// 商品情報のスクレイピング例
async function scrapeProductInfo(url) {
  await browser_navigate({ url: url });
  const snapshot = await browser_snapshot();
  
  // 商品情報を格納する配列
  const products = [];
  
  // 商品リストを見つける
  const productList = findProductList(snapshot);
  if (productList && productList.children) {
    // 各商品の情報を抽出
    for (const product of productList.children) {
      const name = findProductName(product);
      const price = findProductPrice(product);
      const rating = findProductRating(product);
      
      products.push({
        name: name ? name.innerText : "不明",
        price: price ? price.innerText : "不明",
        rating: rating ? rating.innerText : "不明"
      });
    }
  }
  
  return products;
}

// 使用例
const products = await scrapeProductInfo("https://example.com/products");
console.log(products);

 AIエージェントとの連携例Claude AIなどのLLMとPlaywright MCPを連携させた例です。
// AIエージェントによるタスク処理の例
async function aiAssistedTask(taskDescription) {
  // AIエージェントにタスクを説明
  const agentResponse = await claudeAgent.process({
    task: taskDescription,
    tools: ["playwright-mcp"]
  });
  
  // AIが生成した操作手順を実行
  for (const step of agentResponse.steps) {
    switch (step.action) {
      case "navigate":
        await browser_navigate({ url: step.url });
        break;
      case "click":
        const snapshot = await browser_snapshot();
        const element = findElementByDescription(snapshot, step.elementDescription);
        if (element) {
          await browser_click({ 
            element: step.elementDescription, 
            ref: element.ref 
          });
        }
        break;
      case "type":
        await browser_type({ 
          element: step.elementDescription, 
          ref: step.elementRef, 
          text: step.text, 
          submit: step.submit || false 
        });
        break;
      // その他の操作...
    }
  }
  
  return await browser_snapshot();
}

// 使用例
const result = await aiAssistedTask(
  "Amazonにアクセスして、最新のiPhoneを検索し、最初の検索結果の価格を取得してください。"
);

 よくある問題と解決策Playwright MCPを使う上でよくある問題と、その解決策を紹介します。

 1. 要素が見つからない場合問題: スナップショットモードで要素を特定できない場合があります。
解決策:
アクセシビリティツリーで要素が正しく表現されているか確認
より具体的な要素の説明を使用
ビジョンモードに切り替えて視覚的に要素を特定
// より詳細な要素の指定
const snapshot = await browser_snapshot();
console.log(JSON.stringify(snapshot, null, 2)); // スナップショットの構造を確認

// 複数の属性を組み合わせて要素を特定
const element = findElementByMultipleAttributes(snapshot, {
  role: "button",
  name: "送信",
  // その他の属性...
});

 2. 動的に変化するウェブページでの操作問題: SPAなど、動的に変化するウェブページでは、要素が見つからないことがあります。
解決策:
適切なタイミングでスナップショットを再取得
要素が表示されるまで待機するロジックを追加
// 要素が表示されるまで待機する関数
async function waitForElement(description, maxAttempts = 10, interval = 500) {
  for (let i = 0; i < maxAttempts; i++) {
    const snapshot = await browser_snapshot();
    const element = findElementByDescription(snapshot, description);
    
    if (element) {
      return element;
    }
    
    // 一定時間待機
    await new Promise(resolve => setTimeout(resolve, interval));
  }
  
  throw new Error(`Element "${description}" not found after ${maxAttempts} attempts`);
}

// 使用例
const loginButton = await waitForElement("ログインボタン");
await browser_click({ 
  element: "ログインボタン", 
  ref: loginButton.ref 
});

 3. iframeやシャドウDOMでの操作問題: iframe内やシャドウDOMの要素にアクセスできない場合があります。
解決策:
スナップショットの取得オプションを調整
特殊なセレクタを使用
// iframeを含むスナップショットの取得
const snapshot = await browser_snapshot({ includeIframes: true });

// シャドウDOMを含むスナップショットの取得
const snapshot = await browser_snapshot({ includeShadowDOM: true });

 4. パフォーマンスの問題問題: 大規模なページや複雑な操作で、パフォーマンスが低下することがあります。
解決策:
スナップショットの取得回数を最小限にする
必要な操作のみを行う
ヘッドレスモードを使用
// ヘッドレスモードでの実行
npx @playwright/mcp --headless

// スナップショットの再利用
const snapshot = await browser_snapshot();
// 複数の操作で同じスナップショットを使用

 まとめ - Playwright MCPの可能性と今後の展望この記事では、Playwright MCPの基本概念から実践的な使い方まで、幅広く解説してきました。ここで、Playwright MCPの主なポイントをまとめます：

革新的なアプローチ: アクセシビリティツリーを活用した構造ベースの操作

2つの動作モード: スナップショットモード（デフォルト）とビジョンモード

簡単な導入: Node.jsとnpxコマンドだけで簡単に開始できる

AIとの連携: Claude AIなどのLLMと連携した高度な自動化
Playwright MCPは、以下のような場面で特に力を発揮します：

テスト自動化: ウェブアプリケーションのE2Eテスト

データ収集: ウェブスクレイピングや情報収集

業務自動化: 定型的なウェブ操作の自動化

AIエージェント: LLMを活用した自律的なタスク実行

 今後の展望Playwright MCPは比較的新しいツールですが、今後の発展が期待されます：

より高度なAI連携: より複雑なタスクをAIが理解して実行

視覚的な理解の向上: ビジョンモードの精度向上

新機能の追加: より多様なブラウザ操作や制御機能

エコシステムの拡大: 多様なLLMやツールとの連携

 さいごにPlaywright MCPは、ブラウザ自動化の新たな時代を切り開くツールです。特にAIとの連携を前提とした設計は、これからのウェブ自動化やテスト自動化の方向性を示唆しています。
初心者の方も、この記事を参考にしながら、ぜひPlaywright MCPを試してみてください。新しい技術を早めに取り入れることで、より効率的で創造的なウェブ開発・テスト環境を構築できるでしょう。

 参考リンクPlaywright MCP 公式GitHub
Playwright 公式ドキュメント
Model Context Protocol (MCP)の概要
Claude AI 公式サイト
本記事が、Playwright MCPに興味を持つ皆さんの参考になれば幸いです。質問やフィードバックがあれば、ぜひコメントしてください！
従来のアプローチ	Playwright MCP
HTML/DOMに直接アクセス	アクセシビリティツリーを活用
画像認識や座標ベースの操作が主流	構造ベースの操作が主流
AIとの連携には追加の実装が必要	AIとの連携を前提とした設計
複雑なセレクタの指定が必要	自然言語に近い指示が可能
Discussion

taku_sid
うさぎのようにブログが繁殖する。好奇心という名の小さなうさぎを放ち続けるブログ。一つのアイデアが十に、百に、千に増殖する知的冒険の記録。あなたの中の「知りたい」という衝動を刺激します。このブログに触れた瞬間、あなたの頭の中でも何かが繁殖し始めるかもしれません。そんな知的感染の連鎖に、ようこそ。 🖊🐰エージェント
バッジを贈るとは