はじめに

先日発表され注目を浴びている、Playwright MCP。

Playwright MCPを使うと、ブラウザの操作を外部から簡潔な指示で実行できるようになります。

さらに、Mastraと組み合わせることで、AIが自然言語の指示を解析し、Playwright MCPを介してブラウザを操作する流れを構築できます。

実際の動作の様子：
実際の動作イメージとしては、今回ご紹介する方法を使えば、以下のようにブラウザを自在に操作するAIエージェントを構築できます。

https://drive.google.com/file/d/1fzlNcVvPx0kVHjSLiuJ0M0Gi_EUG1o5x/view

今回の記事では、Playwright MCPとは何か、そして、今話題のMastraと連携する方法を解説します。

Playwright MCPとは

1. Playwrightとは

まず、Playwrightはブラウザを自動操作するためのツールです。

通常、何かのウェブ操作を自動化するには「Chromeを起動してページを開き、ボタンをクリックする」などの手順をすべてコードに書く必要があります。

Playwrightを使うと、主要ブラウザ（Chrome、Firefox、Safariなど）を共通の方法で操作できます。

どんな操作が可能か
・ページの読み込み
・リンクやボタンのクリック
・テキスト入力（検索ボックスやフォームへの文字入力）
・スクリーンショットの撮影
・PDFの保存 など

これらを組み合わせると、ログイン操作やデータ入力なども自動化でき、テストや情報収集の時間を短縮できます。

2. Playwright MCPとは

Playwright MCPは、「Playwrightのブラウザ操作」×「MCPの呼び出し規則」を組み合わせたものです。これにより、ウェブ操作を「ブラウザを立ち上げて操作するコード」ではなく、APIを呼ぶような形で実行できます。

リポジトリ；

https://github.com/microsoft/playwright-mcp

  1. サーバーとして起動
    Playwright MCPを起動するとサーバーが立ち上がります。外部から「どのページに行くか」「どこをクリックするか」などの指示を受け付けられる状態になります。

  2. 外部からのリクエスト
    AIや別のプログラムは、MCP形式で指示を送ります。例えば「browser_navigate」という機能名と「url」というパラメータを使い、ページ移動を依頼するイメージです。

  3. Playwrightによるブラウザ操作
    指示を受け取ったサーバー側で、Playwrightが実際にブラウザを動かします。URLへアクセスしたり、要素をクリックしたりします。

  4. 結果の返却
    操作完了後、成功メッセージやページの情報をMCP形式で返します。これにより、AIや他のシステムが続きの作業を進められます。

3. どんなときに使うか

  • 自動テストの強化
    フォーム入力やボタン操作をスクリプト化するとき、コードの代わりにAPI呼び出しだけで済ませたい場合に役立ちます。

  • スクレイピングや情報取得
    特定のページを開いてデータを取得したいとき、指示を書き換えるだけで異なるサイトに対応可能です。

  • AIとの連携
    大規模言語モデル（LLM）から「ボタンをクリックして検索を実行し、結果を返してほしい」という要望を送ると、Playwright MCPがその操作を代行します。

こうしたしくみを使うと、ウェブ操作がほかのアプリケーションと同じようにリクエスト形式で扱えるため、業務フローに合わせて自動化や拡張を行いやすくなります。

Playwright MCPの主要機能と特徴

1. 代表的なツール

  • browser_navigate:指定したURLに移動します。ウェブページを切り替えるときに使います。

  • browser_click:ページ上のボタンやリンクをクリックします。フォーム送信やリンクの移動などに利用します。

  • browser_type:入力フォームへ文字列を入力します。検索語の入力やログイン情報の入力などに使います。

  • browser_snapshot:ページ内の要素構造を取得します。アクセシビリティ情報を活用するため、要素の位置や役割を把握しやすいです。

  • browser_screenshot:ページのスクリーンショットを撮影します。画面の見た目を記録したい場合に使います。

  • browser_go_back / browser_go_forward:ブラウザの戻る・進む機能を呼び出します。多画面のページを操作する流れで使用することがあります。

  • browser_close:開いているブラウザを閉じます。必要な操作が終わったら終了させるために使います。

2. 操作モード

Playwright MCPには、ページの要素構造を使うSnapshotモードと、画面上の座標を指定するVisionモードの2つがあります。

3. サーバーとしての動作

Playwright MCPはサーバーとして起動し、外部からのリクエストを受け取りながらブラウザ操作を実行します。

たとえば「指定したURLに移動したあと、あるボタンをクリックする」といった手順を、指示できます。

4. 特徴と利点

  • 外部システムとの連携がしやすい
    MCPの形式を使うことで、AIモデルや他のプログラムからブラウザ操作を呼び出せます。

  • 実装の簡略化
    オペレーションごとにツールが用意されており、個別のコードを書かずに操作を組み立てやすいです。

  • 安全性と拡張性
    ツールの入力形式が決められているため、誤った命令による不具合を回避しやすいです。新たな操作が必要な場合はカスタムツールを追加するだけで拡張できます。

これらの機能を利用すると、ページ遷移やクリックのようなシンプルな作業だけでなく、フォームへの入力や複数ページをまたいだ操作まで幅広く自動化できます。