背景と目的
- 背景： 脆弱性対応後、プロセス確認と顧客向けレポート作成のためE2Eテストが必要。
- 課題： 純粋なPlaywrightテストコード作成は時間がかかる一方、締切が迫っている。
-
解決策： playwright-mcpとCursorを組み合わせて：
- 明確なMarkdownガイドでテストを記述。
- ブラウザの自動起動、操作、スクリーンショット取得。
- レポート生成とステップごとの結果保存。
- 再利用性の向上。
Playwright-MCPを発見しました。非常に有用だと感じたので紹介します。
https://github.com/microsoft/playwright-mcp
クイック比較：Playwright-MCP + Cursor
E2Eテストは以前から純粋なPlaywrightを使用していましたが、実行するためにコードを書く必要がありました。今回MCPがあるので、自然言語で実行できます。
| 基準 | 純粋なPlaywright | Playwright-MCP + Cursor |
|---|---|---|
| アプローチ | 各ステップのTS/JSコード記述 | ステップを説明するMarkdownコマンド記述 |
| 初期速度 | 遅い（セットアップ、コード、デバッグ） | 高速（ステップ作成 + 即実行） |
| 再現性 | 高いが、コードが必要 | 高い、コード少量、調整容易 |
| 結果記録 | ログ/スクリーンショットを自作 | 自動撮影・保存、構造化 |
| レポート | 手動集約が必要 | Markdownからレポート生成 |
| ガイドの詳細度 | コード内 |
.mdファイルで明示的
|
| 信頼性 | コードが良ければ非常に高い | ガイドの品質に依存 |
注意： MCP + Cursorでは、モデルが正しく動作するよう各ステップの明確な指示が必須。その代わり、コード記述時間の削減と保守性の向上が得られる。
構造（Markdown優先）
e2e-test/
├── .cursor/
│ └── commands/
│ ├── download.md
│ ├── variables.md
├── result/
│ ├── 1-download/
│ │ ├── 1-1-login-success.png
│ │ ├── 1-2-search.png
│ │ └── download-report.md
│ │
├── package.json
- 各機能フロー =
.cursor/commands/内の1つの.mdファイル（例：download.md）。それでCursorのチャットで"/{file_name}"をEnterすると実行ができます。 - 環境変数/共通変数は
variables.mdに配置。
E2E実行プロセス
-
共通変数の宣言（URL、テストアカウント、出力パス）を
variables.mdに記述。 -
各ステップのシナリオを
1-download.mdに記述（ログイン → 検索 ）。 - Cursorで実行（コマンドパレット → コマンド選択）
- シナリオで設定したチェックポイントに従って自動スクリーンショット取得。
- Markdownレポート作成：結果、説明画像、メモ。
- 顧客レポートに添付するため、すべてを
screen/に保存。
.cursor/commandsのサンプルコマンド
variables.md（パラメータ化）
# Variables
- BASE_URL: https://example.com
- USERNAME: xxx
- PASSWORD: {{env.TEST_PASSWORD}}
- TIMEOUT_MS: 15000
download-feature.md
<!-- Variables: variables.mdから読み込み、このテストシナリオに適用 -->
# テスト
## 概要
確認のテストを実施します。
「スクリーンショットを取得」という単位で、ブラウザのスクリーンショットを取得し、`screen`フォルダーに格納してください。
その後、`result/download-feature.md`に対して、以下フォーマットでテスト結果を纏めてください。
## フォーマット
# ${テストケースの見出し}
${テストケースの内容}
<img
src="${スクリーンショット}.png"
style="width: 50%; hight: 50%;"/>
# ${次のテストケースの見出し}
${次のテストケースの内容}
<img
src="${次のスクリーンショット}.png"
style="width: 50%; hight: 50%;"/>
## テストケース
### 1-1. ログイン確認
1. `{BASE_URL}`を開いてください。
2. 以下を入力して、ログインできることを確認してください。
- メールアドレス: {LOGIN_EMAIL}
- パスワード: {LOGIN_PASSWORD}
### 1-2 データダウンロード
1. 左側ナビゲーションから「検索データダウンロード」を開いてください。
2. キーワード検索欄に {SEARCH_XXX} を入力して検索してください。
4. 表示された結果のチェックボックスにチェックを入れ、「ダウンロード」ボタンを押してください。
5. その画面のスクリーンショットを取得してください。
6. ダウンロードされたファイルを保存してください。
ヒント： 短く・明確・目的のあるコマンドを記述（セレクタ、タイムアウト、待機条件）。「Screenshot to …」でチェックポイントを挿入し、証跡を残す。
メリット、制限
メリット
- 非常に高速な開始：多くのPlaywrightコードを書く必要がない。
- 業務記述に集中（Markdown）、読みやすく・レビューしやすい。
- レポート自動化：画像 + 結果が構造化されて保存。
- 再利用性：次回は変数/セレクタを変更するだけで実行可能。
制限
- 極めて明確な指示が必要（セレクタ、待機、条件）。
- 複雑なフローでは最適化されたコードより遅くなる可能性。
- UI安定性に依存（セレクタが変わるとステップが破綻）。
- AIのトークンがかなり消費。
- 長時間のタスクが良くない（途中にエラーなるとかMCPのエラーケースがある）ので、機能ごとに分割した方がいい。
結論と推奨事項
Playwright-MCP + Cursorは、顧客レポート作成のための高速E2Eが必要な状況で非常に便利：Markdownで記述、即実行、明確な画像とログ。すべての内部プロジェクト、特に時間が限られており、テストを何度も繰り返す必要がある場合に、上記のような.cursor/commandsとresult/ディレクトリの標準化を推奨します。
- 使用する場合： 軽量な回帰テスト。
- 使用しない場合： 極めて複雑/高性能なフロー → 純粋なPlaywrightコードを検討。