CursorとPlaywright MCPでE2Eの仕組みを作ったが、活用には至らなかった理由

はじめに

初めまして。私は現在都内のスタートアップでプロダクト開発をしております。

私が所属するチームでは現在十数人程度のフルサイクル・フルスタックエンジニアがプロダクト開発を行なっていますが、専属のQAメンバーがいないためプロダクトの品質保証が課題になっていました。

加えて開発チームとしてはAIを積極活用することで生産性やプロダクトの品質の向上を積極的にしていこうということになっていました。

AutifyなどのE2Eツールの導入も検討しましたが、費用や保守面でのコスト負担が大きく、難しい状況でした。

そんな状況のなか、先日Playwright MCPが公開されたのでこれをうまく使えば簡易E2Eをの仕組みを整えて、
必要最低限のシステムのE2Eチェックを低コスト、低負担でできるのでは？となり、調査と実際に仕組みを構築してみました。

前提条件

• Cursorエディタがインストール済み
• Node.js (v14以上)がインストール済み
• npmがインストール済み

インストール手順

1. Playwright MCPのインストール

ターミナルで以下のコマンドを実行します：

# package.jsonとnode_modulesがあるプロジェクトルートに移動
cd /path/to/your/project

# プロジェクトのpackage.jsonに@playwright/mcpを追加
npm install @playwright/mcp

# 必要なブラウザをインストール
npx playwright install chromium

2. CursorへのPlaywright MCP設定

Cursorでは、MCPサーバーを設定することで、AIがブラウザを制御できるようになります。設定方法は以下の通りです：

1. Cursorのメニューバーから「ファイル > ユーザー設定 > Cursor Settings」を選択
2. 左側のメニューから「MCP」を選択
3. 「+ Add new global MCP server」ボタンをクリック

表示されたJSON設定ファイルに以下のコードを追加します：

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

設定後、Cursorを再起動して、MCPタブにPlaywrightサーバーが表示されることを確認してください。サーバー名の左側に緑色のドットが表示されていれば、設定は完了です。

3. テストシナリオの作成

新しいファイル e2e-test-prompts.md を作成し、テストしたいシナリオを記述します：

# Web E2Eテストシナリオ

## ログインテスト
1. https://example.com にアクセス
2. ユーザー名「testuser」とパスワード「password123」を入力
3. ログインボタンをクリック
4. ダッシュボードページが表示されることを確認
5. 各ステップでスクリーンショットを取得

## 検索機能テスト
1. https://example.com/search にアクセス
2. 検索ボックスに「テスト商品」と入力
3. 検索ボタンをクリック
4. 検索結果が表示されることを確認
5. 少なくとも1つの結果が表示されていることを確認
6. 各ステップでスクリーンショットを取得

4. テスト実行

1. Cursorの「AI」パネルを開き、Agentモードを選択します
2. 以下のようなプロンプトを入力します：

以下のテストシナリオを実行してください：
1. https://example.com にアクセス
2. ユーザー名入力欄を見つけて「testuser」と入力
3. パスワード入力欄を見つけて「password123」と入力
4. ログインボタンをクリック
5. ログイン成功後、ダッシュボードページが表示されることを確認

1. 実行ボタンをクリックすると、AIがPlaywright MCPを通じてブラウザを操作し、指定されたテストを実行します
2. AIが各ステップを実行する際に「Run tool」ボタンをクリックして許可します

Playwright MCPの仕組み

Playwright MCPは2つの主要なモードで動作します：

1. スナップショットモード（デフォルト）：

   • ブラウザのアクセシビリティツリーを利用
   • テキストベースで高速かつ効率的
   • 主に構造化されたWebページに最適

2. ビジョンモード：

   • スクリーンショットと座標を使用
   • 視覚的な要素や複雑なUIに対応
   • --visionフラグで有効化

活用例

• UI自動テスト：ユーザージャーニーの自動検証
• データ収集：Webサイトからの情報抽出
• フォーム入力の自動化：複雑なフォーム入力を自然言語で指示
• クロスブラウザテスト：異なるブラウザ環境での動作確認

感想

実際にPlaywright MCPを使用してみた結果の所管は下記のようになります。

1. 実用性の限界

• Playwright MCPは内部的にはPlaywrightのAPIを利用しているだけであり、本格的なE2Eテストツールとしては機能が限定的
• 自然言語によるシンプルな操作は便利ですが、複雑なテストシナリオには対応しきれない場面が多い(ログインできない、ダイアログを閉じれない等)
• 細かい設定やカスタマイズが必要な場合は、従来のPlaywrightスクリプトの方が柔軟性がある

2. 効率性の問題

• テストケースや仕様を非常に詳細に記述しないと、AIが意図通りに動作しない場合がある
• ブラウザの動作を自然言語で指示する際の曖昧さが、テスト実行時間の増加につながる

3. 実務での適切な使い分け

• 明確なE2Eテストストーリーがある場合は、直接Playwrightのテストスクリプトを書いた方が効率的に思える
• スクリプトを使えば、並列実行やヘッドレスモードなどの高速化オプションも活用できる
• Playwright MCPは、簡易的なWebサイト調査や単発のタスク自動化には適していますが、本格的なテスト自動化には向いていなさそう

4. 適した用途

• プロトタイピングや概念実証（PoC）段階での簡易的なテスト検証
• テスト仕様の初期検討や動作確認
• 非エンジニアがシンプルなブラウザ操作を自動化したい場合
• 探索的テストの補助ツールとして

参考資料

• Playwright MCP 公式リポジトリ
• Playwright 公式サイト

---