LLM + Playwright MCPでブラウザ操作を自動化する全ステップ
📘 この記事を読んで分かること
- LLM（GPT-4 など）と Playwright MCP を組み合わせたブラウザ自動操作の全体像
- ユーザーの自然言語指示がどのように実行可能なブラウザ操作に変換されるか
- 各ステップで何が起きているのか（設計・実行・解析・意思決定の流れ）
- Web テストや業務自動化への応用のヒント
👤 この記事の対象の読者
- ChatGPT や LLM を実際の自動化タスクに使いたい開発者
- Playwright MCP の構造や LLM 連携について学びたい人
- Web テストやデータ取得業務を効率化したい QA エンジニアや
- Mastra や MCP などのツールを使って AI エージェントを構築してみたい方
🧭 全体の流れ
この仕組みは、以下の 6 ステップで構成されます：
- ユーザー入力フェーズ
- LLM プランニングフェーズ
- ブラウザナビゲーション
- DOM 解析フェーズ
- 意思決定フェーズ（追加操作）
- 最終出力フェーズ
それぞれのステップで何が起こっているのかを詳しく見ていきましょう。
① ユーザー入力フェーズ
ユーザーは自然言語で操作指示を入力します。
例：「https://yahoo.co.jp にアクセスして、『スポーツ』タブのニュース記事数を数えてください」
このプロンプトを TypeScript のスクリプトが受け取ります。
② LLM プランニングフェーズ
TypeScript スクリプトは、ユーザーからのプロンプトを LLM（GPT-4o など）に送信します。LLM はそのプロンプトを解析し、必要なブラウザ操作を Playwright MCP ツールのコマンド形で記述します。
例としては以下のようなコマンドが生成されます：
navigate_browser(url: "https://yahoo.co.jp")query_selector_all(selector: "text=スポーツ")
LLM は順序も含めて、実行フロー全体を構成します。
③ ブラウザナビゲーション
LLM が作成したコマンドが Playwright MCP に送られると、Playwright はブラウザを立ち上げ、指定の URL にアクセスします。ページの読み込みが完了すると、Playwright MCP はそのページの HTML や DOM 構造の情報を返します。
これにより、次の解析ステップに進むための材料が揃います。
④ DOM 解析フェーズ
LLM は Playwright MCP から取得した HTML や DOM の情報を解析します。
このステップでは、ページ上の目的の要素を見つけ出し、その数や内容を判断します。
たとえば、.main-news-item というセレクターで記事要素をすべて取得し、それが 8 個なら「ニュース記事は 8 件あります」と出力できるようになります。
⑤ 意思決定フェーズ（追加操作）
目的の情報が一度の DOM 解析で取得できなかった場合、LLM は次に必要なアクションを判断します。
たとえば「『スポーツ』タブが非表示だったためクリック操作が必要」と判断されれば、次のような追加操作が発行されます：
click_element(selector: "text=スポーツ")
MCP は再度 Playwright でブラウザを操作し、変更後の状態を再取得します。
⑥ 最終出力フェーズ
すべての処理が完了したら、LLM は最終的な出力結果を生成します。
TypeScript スクリプトを通じて、ユーザーに自然な言葉でフィードバックが返されます。
例：「スポーツタブ内に 8 件のニュース記事が見つかりました」
🏁 おわりに
LLM と Playwright MCP を組み合わせることで、これまでスクリプトを手で書いていたようなブラウザ操作を、自然言語だけで自動化できる時代が到来しています。本記事では、その流れをステップごとに追いながら、「なぜそれが動くのか」「どこで LLM が判断して、MCP が操作しているのか」といった中身まで丁寧に解説しました。
この仕組みは、単なる E2E テストだけにとどまらず、以下のような幅広い応用が可能です：
- 管理画面や Web ツールの自動操作
- Web サイトのスクレイピング
- サポート業務や営業リサーチの自動化
- ノーコードでエンドユーザー操作の代行
👨💻 著者について
東京とアムステルダムを拠点に活動中。
東欧・南アジアのエンジニアと連携しながら、QA コンサル・テスト自動化・フルスタック開発・PM 業務まで幅広く担当しています。
Cucumber・Playwright・ChatGPT などを活かした効率的なテスト運用や開発基盤づくりのご相談も歓迎です！
Discussion