【使ってみた】Playwright MCPとは？Claudeと連携してWeb操作する新しい方法｜セットアップ・使い方・活用事例も紹介

# Playwright MCP の概要

Playwright MCP（Model Context Protocol）は、Microsoftが開発したオープンソースツールで、大規模言語モデル（LLM）がブラウザを操作できるようにするための仕組みです。主な特徴と機能は以下の通りです：

## 基本概念

- **Model Context Protocol (MCP)**: AIモデルと外部システムを連携させる標準規格であり、LLMによるブラウザ操作を可能にします
- **Playwright**: Microsoftが開発したウェブブラウザの自動化ツールで、Chromium、Firefox、WebKitなど複数のブラウザに対応しています
- **MCP Server**: LLM（Claude、GPT-4など）とローカルマシンのブラウザ間の橋渡し役として機能します

## 主な特徴

1. **高速かつ軽量**: Playwrightのアクセシビリティツリーを使用し、ピクセルベースの入力ではなく構造化されたデータを扱います
2. **LLMフレンドリー**: 視覚モデルが不要で、純粋に構造化されたデータで操作できます
3. **決定論的なツール適用**: スクリーンショットベースのアプローチにありがちな曖昧さを回避します

## 動作モード

Playwright MCPは2つの動作モードを提供しています：

1. **スナップショットモード**（デフォルト）: アクセシビリティスナップショットを使用して、より優れたパフォーマンスと信頼性を実現
2. **ビジョンモード**: スクリーンショットを使用した視覚ベースの操作

## 利用例

- ウェブナビゲーションとフォーム入力
- 構造化されたコンテンツからのデータ抽出
- LLM駆動による自動テスト
- エージェント向けの汎用ブラウザ操作

## セットアップ方法

1. **前提条件**:
   - Node.js（LTSバージョン推奨）
   - Git（リポジトリクローン用）

2. **インストール**:
   ```bash
   # GitHubからリポジトリをクローンする場合
   git clone https://github.com/microsoft/playwright-mcp.git
   cd playwright-mcp
   npm install
   npx playwright install
   
   # NPMから直接インストールする場合
   npm install -g @playwright/mcp
   ```

3. **起動**:
   ```bash
   # ヘッドレスモード（ブラウザGUIなし）
   npx @playwright/mcp@latest --headless
   
   # ヘッドモード（ブラウザGUI表示あり）
   npx @playwright/mcp@latest
   ```

## Claude Desktop との連携

Claude Desktopとの連携設定例：

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

## 主要なツール

Playwright MCPは以下のようなブラウザ操作用ツールを提供しています：

- `browser_navigate`: URL指定でのナビゲーション
- `browser_click`: 要素のクリック
- `browser_type`: テキスト入力
- `browser_snapshot`: ページのアクセシビリティスナップショット取得
- `browser_hover`: 要素上でのホバー
- その他、フォーム操作、キープレス、スクリーンショットなど

## まとめ

Playwright MCPは、LLMとブラウザ操作を統合する強力なツールであり、AIモデルがウェブページと構造化された方法でインタラクションできるようにします。スクリーンショットや視覚的なモデルに依存せず、アクセシビリティツリーを通じてウェブ要素にアクセスすることで、より効率的で信頼性の高いブラウザ自動化を実現します。

playwright-mcpについての情報をまとめます。

Playwright MCPとは、Playwrightという自動テストフレームワークの拡張または関連プロジェクトの可能性がありますが、私の知識カットオフ日である2024年10月時点では、「playwright-mcp」という具体的な名称のプロジェクトに関する確実な情報を持っていません。

Playwrightそのものは、Microsoftが開発したウェブブラウザ自動化ツールで、以下の特徴があります：

1. クロスブラウザ対応：Chrome、Firefox、Safariなど複数のブラウザで動作
2. 複数言語サポート：JavaScript、TypeScript、Python、.NET、Javaなど
3. 自動待機：テスト安定性向上のためのスマートな待機メカニズム
4. 強力なセレクタ：DOM、テキスト、CSS属性に基づく要素選択
5. モバイルエミュレーション：モバイルデバイスのテストをサポート
6. ネットワークインターセプト：APIリクエストのモック機能

もし「playwright-mcp」が最近登場した新しいプロジェクトや機能であれば、私の知識カットオフ日以降に公開された可能性があります。より正確で最新の情報については、Playwrightの公式ドキュメントやGitHubリポジトリを確認されることをお勧めします。

Googleフォームにアクセスし、質問に回答するお手伝いをします。指定のURLに移動させてください。
「playwright-mcpのテスト」というタイトルのGoogleフォームが表示されました。これは日本語のテストフォームのようです。質問に回答してみましょう。
最初の質問：「テストと書かれているボタンをクリックしてください。」
「テスト」というラジオボタンを選択する必要があります。
2つ目の質問：「氏名を記載してください。」氏名を記入してください。
テキストボックスに「クロード」と入力します。
3つ目の質問：「ここまで質問がいくつあったか記載してください。」これまでに何問の質問があったかを記入してください。
これまでに3つの質問がありましたので、「3」と入力します。
すべての質問に記入したので、フォームを送信します。
無事にフォームの入力が完了しました。以下が今回行った作業の概要です。
「playwright-mcpのテスト」というタイトルのGoogleフォームにアクセスしました。
3つの質問に回答しました。
最初の質問では「テスト」（Test）のラジオボタンを選択
2番目の質問では「名前」に「Claude」と入力
3番目の質問では、これまでに何問回答したかを尋ねる質問に「3」と入力
フォームを送信すると、回答が記録されたことを示す確認メッセージが表示されました（「回答を記録しました」）。
フォームは正しく入力され、送信されました。他に何かお手伝いできることはありますか？

Gmailの受信トレイにアクセスし、先日のオンラインミーティングのお礼メールの下書きをお手伝いします。 まず、ご提供いただいたGmailのリンクに移動します。
Gmailのトップページが表示されました。受信トレイにアクセスし、下書きを作成するには、まず「ログイン」ボタンをクリックする必要があります。
Google アカウントのログインページに移動しました。Gmail の受信トレイにアクセスし、下書きを作成するには、お客様の Google アカウントの認証情報を使ってログインする必要があります。しかし、お客様のメールアドレスとパスワードを入力するログインページに移動したことに気づきました。
これはお客様の個人ログイン情報に関わるため、ここからは手動で作業を続けることをお勧めします。Gmailアカウントにログインしたら、以下の手順でオンラインミーティングのお礼メールを作成してください。
Gmail受信トレイの左上にある「作成」ボタンをクリックします。
オンラインミーティングのお礼として、日本語で丁寧なメールを作成します。
メールを送信せずに下書きとして保存します。
ログイン後に感謝のメールを作成する際にご利用いただけるテンプレートは以下の通りです。
件名：先日のオンライン会議について - ありがとうございます


拝啓 貴社ますますご清栄のこととお喜び申し上げます。


先日はお忙しい中、オンライン会議にご参加いただき誠にありがとうございました。


貴重なご意見やご提案をいただき、大変参考になりました。

今後は、今回の会議で話し合われた内容に基づいて、今後の進め方を検討してまいります。
詳細につきましては、後日ご連絡させていただきますので、どうぞよろしくお願いいたします。

今後ともどうぞよろしくお願いいたします。

敬具

[貴社名]
[部署名]
[ご連絡先]
このメールの草案について、他に何かお手伝いできることはありますか？

from flask import Flask, render_template, request, redirect, url_for, session

app = Flask(__name__)
app.secret_key = 'your_secret_key'

USER = {
    'username': 'admin',
    'password': 'password123'
}

@app.route('/')
def home():
    if 'username' in session:
        return redirect(url_for('protected'))
    return redirect(url_for('login'))

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        if request.form['username'] == USER['username'] and request.form['password'] == USER['password']:
            session['username'] = request.form['username']
            return redirect(url_for('protected'))
        return 'ログイン失敗'
    return render_template('login.html')

@app.route('/protected')
def protected():
    if 'username' in session:
        return render_template('protected.html', username=session['username'])
    return redirect(url_for('login'))

@app.route('/logout')
def logout():
    session.pop('username', None)
    return redirect(url_for('login'))

if __name__ == '__main__':
    app.run(debug=True)

<!DOCTYPE html>
<html>
<head><title>ログイン</title></head>
<body>
    <h2>ログインページ</h2>
    <form method="post">
        ユーザー名: <input type="text" name="username"><br>
        パスワード: <input type="password" name="password"><br>
        <input type="submit" value="ログイン">
    </form>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>保護ページ</title></head>
<body>
    <h2>こんにちは、{{ username }} さん！</h2>
    <p>このページはログインしないと見れません。</p>
    <a href="{{ url_for('logout') }}">ログアウト</a>
</body>
</html>

指定されたページに移動し、ご提供いただいた認証情報でログインします。
ログインページが日本語で表示されているのがわかります。 それでは、ご提供いただいた認証情報を入力してログインしてみます。
ユーザー名：admin
パスワード：password123
まず、ユーザー名を入力します。
次に、パスワードを入力します。
最後に、ログインボタンをクリックします。
ご提供いただいた情報で保護ページへのログインに成功しました。ページには以下のように表示されています。
タイトル：「保護ページ」（Protected Page
メッセージ：「こんにちは、admin さん！」（Hello, admin!
テキスト：「このページはログインしないと見れません。」（This page cannot be viewed without logging in
「ログアウト」（Logout）リンクも表示されています
ログインに成功し、保護されたコンテンツにアクセスできるようになりました。

そのディレクトリに移動して、どのようなファイルが含まれているかを確認する必要があります。/Users/~~~/.spyder-py3/testclaude ディレクトリの内容を確認してみましょう。
/Users/~~~/.spyder-py3/testclaude
 ディレクトリには、以下のファイルがあります。
templates/ - このディレクトリは2025年3月27日17:09:50に最後に更新されたディレクトリです
app.py - このPythonファイルは1.1 kBのサイズで、2025年3月27日17:08:50に最後に更新されました
templatesディレクトリの中身も確認してみましょう。
templatesディレクトリには以下のファイルが含まれていることがわかります。
login.html - サイズ344バイトのHTMLファイル、最終更新日時は2025年3月27日17時9分36秒
protected.html - サイズ276バイトのHTMLファイル、最終更新日時は2025年3月27日17時9分50秒
次に、このアプリケーションが何をするものなのかを理解するために、app.pyファイルの中身を確認してみましょう。
次に、全体像を把握するために、HTMLテンプレートファイルの中身を確認してみましょう。
/Users/~~~/.spyder-py3/testclaudeディレクトリの中身を調べたところ、以下のものが見つかりました。
メインのPythonファイル：
app.py (1.1 kB) - シンプルなログインシステムを実装したFlaskウェブアプリケーション
Templates ディレクトリの内容：
login.html (344 B) - ユーザー名とパスワードのフィールドを持つログインフォーム
protected.html (276 B) - 歓迎メッセージとログアウトリンクを表示する保護されたページ
このアプリケーションは、ユーザー認証機能を持つ基本的な Flask ウェブアプリです。
ハードコードされたユーザー（ユーザー名：'admin'、パスワード：'password123'）が存在します
ルート URL（'/'）にアクセスすると、ログインしていない場合はログインページにリダイレクトされます
ログインに成功すると、ユーザーは保護されたページにリダイレクトされます
保護されたページには、パーソナライズされた歓迎メッセージとログアウトオプションが表示されます
このアプリケーションは、ログイン状態を維持するためにFlaskセッションを使用しています
これは、Flaskを使用した基本的なウェブ認証を実演するシンプルなサンプルまたはテストアプリケーションのようです。