🌷

【Cursor × Playwright MCP】AIでブラウザ操作を自動化する方法｜開発効率化・E2Eテスト活用法

に公開
E2E テスト
Playwright
Model Context Protocol
Cursor
テスト自動化
tech

はじめに

Webアプリのテストやデバッグでは、画面表示の確認やスクリーンショット取得に意外と手間がかかります。

Playwright MCP を使用すると、AIに指示するだけで画面操作やスクリーンショット取得を自動化でき、AIがブラウザを直接操作できるようになります。

本記事では、Playwright MCP サーバーを Cursor に統合し、Webスクレイピングやテストを自動化する方法を紹介します。

MCP とは？

MCP（Model Context Protocol）とは、外部のツールやデータベースと安全かつ効率的に連携するための共通の通信規格（プロトコル)です。

Cursor では MCP を通して、

  • ファイル操作
  • コマンド実行
  • ブラウザ操作（Playwright MCP）

などを AI が直接実行できます。

Playwright MCP でできること

  • Web ページの遷移
  • ボタンのクリック
  • フォーム入力・送信
  • スクリーンショット取得
  • ページ内容の抽出
  • JavaScript 実行

人間がブラウザで行う操作を、AI が代行するイメージです。

【公式ドキュメント】
https://playwright.dev/

1. 事前準備

※ Node.jsが未インストールの場合は公式サイトからインストールしてください。
(インストールされているかは下記のコマンドで確認できます。)

node --version
npm --version

【公式ドキュメント】
https://nodejs.org/ja

2. Cursor で Playwright MCP を設定する

①Cursor Settings を開く

②サイドバーのTools&MCPを選択して、Add Custom MCPを選択

cursorの画面
CursorのSettings画面

③mcp.jsonファイルに以下の記載を追加

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

左側のドットが緑色になれば成功

playwright mcpの導入
MCPサーバーが緑色になった状態

https://cursor.com/ja

使い方

基本的な操作フロー

  1. Cursorを開く
  2. Agentモードを起動（Cmd + Shift + I）
  3. ブラウザ操作の指示を自然言語で入力
  4. AIが自動的にPlaywright MCPを使って操作を実行

実践例1: Webページの翻訳

プロンプト例:

該当のURLを添付する
1. What is Active Record?のセクションのみ日本語訳してください

実行結果(途中のログなどは省略しています)
Railsガイドの翻訳
翻訳の例

実践例2: Webページのスクレイピング

プロンプト例:

該当のURLを添付する
最新の記事3件のタイトルとURLを取得してください

実行結果(途中のログなどは省略しています)
playwright MCPの実行結果
データ取得の例

実践例3: フォーム入力と送信

プロンプト:

http://localhost:8081/loginにアクセスして、
メールフィールドに「user1@example.com」を入力、
パスワードフィールドに「Password0!」を入力し、
送信ボタンをクリックしてください
その後、送信後の画面のスクリーンショットを撮影してください

実行結果(途中のログなどは省略しています)
CursorのPraywright MCP実行時のログ
フォーム入力と送信の例

実践的なユースケース

1. 競合サイトの価格監視

プロンプト例:

https://example.com/products にアクセスして、全商品の価格情報を取得してください

2. 複数ページからのデータ収集

プロンプト例:

https://example.com/page1 から https://example.com/page10 まで、
各ページの見出しとリンクを全て取得してください

3. パソコン画面とスマホ画面のスクリーンショットの取得

プロンプト例:

https://myapp.comにアクセスして、トップページのスクリーンショットを
デスクトップ（1920x1080）とモバイル（390×844）で撮影してください

4. フォームのE2Eテスト

プロンプト例:

https://myapp.com/signup にアクセスして、会員登録フローをテストしてください。
各ステップでスクリーンショットを撮影し、エラーがないか確認してください

5. 複数サイトの情報比較

プロンプト例:

以下の3つのサイトにアクセスして、同じ商品の価格を比較してください：
・https://site1.com/product
・https://site2.com/product
・https://site3.com/product

トラブルシューティング

MCPサーバーが認識されない（ドットが緑にならない）

問題:
設定画面でMCPサーバーのドットが緑色にならない

解決策:

  1. JSONの記法が正しいか確認（コンマ、括弧など）
  2. Node.jsとnpmがインストールされているか確認
node --version
npm --version
  1. Cursorを完全に再起動する
  2. 設定を保存してから数秒待機する

タイムアウトエラー

問題:
ページ読み込みでタイムアウトする

解決策:
プロンプトでタイムアウト時間を指定する

https://example.com に30秒のタイムアウトでアクセスしてください

要素が見つからない

問題:
クリックや入力したい要素が見つからない

解決策:
段階的に操作を指示、指示内容を詳細に設定する

1. まず https://example.com のスクリーンショットを撮影してください
2. スクリーンショットを確認してから、赤い「送信」ボタンをクリックしてください

セキュリティと注意事項

  1. 認証情報の扱い

    • パスワードなどの機密情報は直接プロンプトに書かない

  2. 利用規約の確認

    • スクレイピング対象サイトの利用規約を確認する

  3. レート制限

    • 連続アクセスは控える
    • 適切な待機時間を設ける

  4. 個人情報の取り扱い

    • スクレイピングした情報を適切に管理する

まとめ

Playwright MCP は設定も簡単で、思っていた以上に便利でした。
画面サイズを切り替えながらスクリーンショットを撮り、そのまま Cursor 上で AI に質問でき、開発がかなり快適になります。
実際に、デザイン調整や UI 確認のスピードは体感でとても上がりました。

また、画面操作をそのままテストとして使えるので、簡単な自動テストや動作確認に活用できる点も効率化に繋がります。

AI の発展スピードにはなかなか追いつけていませんが、便利な機能は積極的に取り入れていきたいですね。

Discussion