Playwright MCPサーバーで自然言語でブラウザ操作！Cursor/KIROでの実践ガイド

Playwright MCP って何？

Playwright MCP は、自然言語でブラウザを操作できるようにするツールです。

通常、Web サイトのテストや自動化を行うには、Playwright のコードを書く必要があります。しかし、Playwright MCP サーバーを使えば、AI エディタ（Cursor や KIRO）から日本語で指示するだけでブラウザ操作が可能になります。

MCP とは？

MCP（Model Context Protocol）は、AI アシスタントが外部ツールと連携するための標準プロトコルです。Anthropic 社が開発し、AI が様々なサービスやツールを使えるようにする仕組みです。

Playwright MCP でできること

• 🌐 自然言語でのブラウザ操作: 「Google を開いて」「ログインボタンをクリックして」など
• 📸 スクリーンショット取得: サイトのデザインを確認
• 🧪 自動テスト実施: 手動テストを自動化
• 🎨 UI デザインの参考: 他サイトの UI を分析して自分のプロジェクトに反映

前提条件

始める前に、以下をインストールしておく必要があります：

• Node.js (v18 以上推奨)

  • 公式サイトからダウンロード
  • インストール確認: node --version

• Playwright MCPサーバー:をインストール ターミナルを開いて、次のコマンドを実行します

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

Cursor での設定方法

1. MCP 設定ファイルを開く

2. Playwright MCP サーバーを追加

設定ファイル（mcp.json）に以下を追加：

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

3. Cursor を再起動

設定を保存して Cursor を再起動すれば、Playwright MCP が使えるようになります。

KIRO での設定方法

1. .kiro/settings/mcp.jsonにMCPの設定を入れる

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

2. MCP 接続を確認

KIRO の MCP Server ビューから、playwright サーバーが接続されているか確認できます。

実践例 1: 自然言語でのテスト実施

基本的なブラウザ操作

チャットで以下のように指示するだけ：

Googleを開いて、「Playwright MCP」で検索してください

AI が自動的に以下の操作を実行します：

1. ブラウザを起動
2. Google にアクセス
3. 検索ボックスに入力
4. 検索を実行

ログインフローのテスト

https://example.com/login を開いて、
メールアドレスに [e-mail] を入力、
パスワードに password123 を入力して、
ログインボタンをクリックしてください

フォーム入力のテスト

お問い合わせフォームに以下を入力してテストしてください：
- 名前: 山田太郎
- メール: [e-mail]
- メッセージ: テストメッセージです

入力後、送信ボタンをクリックして、
成功メッセージが表示されるか確認してください

実践例 2: サイトの UI を理解して自分のプロジェクトに反映

ステップ 1: 参考サイトのスクリーンショット取得

https://vercel.com のトップページを開いて、
フルページのスクリーンショットを撮ってください

ステップ 2: UI の分析

このページのヘッダーのデザインを分析して、
以下の情報を教えてください：
- レイアウト構造
- 使用されている色
- フォントサイズ
- ボタンのスタイル

ステップ 3: HTML を取得して構造を理解

このページのヘッダー部分のHTMLを取得して、
どのような構造になっているか説明してください

ステップ 4: 自分のプロジェクトに実装

今分析したデザインを参考に、
Next.jsのヘッダーコンポーネントを作成してください。
Tailwind CSSを使って実装してください。

AI が自動的に：

1. サイトの構造を分析
2. 色やレイアウトを抽出
3. あなたのプロジェクトに合わせたコードを生成

実践例 3: レスポンシブデザインの確認

https://example.com を開いて、
以下の画面サイズでスクリーンショットを撮ってください：
1. デスクトップ (1920x1080)
2. タブレット (768x1024)
3. モバイル (375x667)

これで、レスポンシブデザインの動作確認が簡単にできます。

実践例 4: E2E テストの自動生成

以下のユーザーフローをテストするPlaywrightのテストコードを生成してください：

1. トップページにアクセス
2. 「新規登録」ボタンをクリック
3. フォームに情報を入力
4. 利用規約にチェック
5. 登録ボタンをクリック
6. 確認メールが送信されたメッセージを確認

実際にブラウザで動作を確認しながら、
テストコードを生成してください。

よくある使い方のパターン

パターン 1: デザインの参考収集

以下のサイトのランディングページを分析してください：
- https://stripe.com
- https://vercel.com
- https://linear.app

各サイトの特徴的なデザイン要素を抽出して、
自分のプロジェクトに使えそうなアイデアをまとめてください

パターン 2: 競合サイトの機能調査

https://competitor.com を開いて、
以下の機能がどのように実装されているか調査してください：
- ユーザー登録フロー
- 検索機能
- フィルタリング機能

パターン 3: アクセシビリティチェック

自分のサイト http://localhost:3000 を開いて、
キーボードだけで全ての操作ができるか確認してください。
Tabキーで移動しながら、各要素にフォーカスが当たるかテストしてください。

トラブルシューティング

ブラウザが起動しない

npx playwright install

を実行して、Playwright のブラウザをインストールしてください。

MCP サーバーが接続されない

1. mcp.json の記述が正しいか確認
2. Node.js がインストールされているか確認（node --version）
3. エディタを再起動

操作が失敗する

• セレクタが見つからない場合は、より具体的な指示を出す
• ページの読み込みを待つ時間が必要な場合がある
• スクリーンショットを撮って状態を確認

まとめ

Playwright MCP サーバーを使えば：

✅ コードを書かずにブラウザ操作が可能
✅ 自然言語でテストを実施できる
✅ 他サイトの UI を分析して自分のプロジェクトに活用
✅ 開発効率が大幅に向上

特に、デザインの参考収集や E2E テストの作成において、大きな時間短縮になります。

Cursor や KIRO を使っている方は、ぜひ Playwright MCP を試してみてください！

参考リンク

• Playwright 公式ドキュメント
• MCP 公式サイト
• Playwright MCP Server (GitHub)