playwrightのMCPサーバをGitHub Copilotで使ってみる

はじめに

Microsoftが提供している playwright-mcp というMCP(Model Context Protocol)サーバが気になったので使ってみることにした。
このツールを使うと、AIモデルがブラウザを直接操作するための仕組みを簡単に構築できるとのこと。

環境

Windows 11 Professional
VS Code 1.100.0
GitHub Copilot

MCPとは何か

MCP(Model Context Protocol)は、AIモデルがさまざまなツールやアプリケーションとインタラクションするための標準プロトコルである。

mcp.jsonの設定

  1. VSCodeを起動する
  2. Ctrl+Shift+P でコマンドパレットを開く
  3. ユーザ設定を開く(JSON)を入力
  4. 以下を追加する
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

今回は以下のようになった。

"mcp": {
  "servers": {
    ...(省略)...
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    },
  }
}

もしくは 適当なCLIで以下を実行する。

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

サーバの起動

mcp.jsonを開き、対象の設定にカーソルを合わせ、起動でサーバを起動する

settings-mcp-01

GitHub Copilotでplaywright-mcpを使う

VSCodeでGitHub Copilotのチャットを開き、「エージェント」モードで以下のプロンプトを入力する。

Googleを開いて、「かつおぶしのブログ」で検索して、ブログにどのようなコンテンツがあるのかを教えて

Copilotは指示を理解し、MCPサーバを通じて以下のような操作を自動的に行う

  1. ブラウザを起動
  2. Googleにアクセス
  3. 検索ボックスに「かつおぶしのブログ」と入力
  4. 検索ボタンをクリック
  5. 検索結果から最初のリンクをクリック

実際に実施した動画↓

結果
以上の調査を元に、「かつおぶしのブログ」の内容をまとめます。

「かつおぶしのブログ」について以下の情報をご報告します:

かつおぶしのブログの概要
「かつおぶしのブログ」(https://blog.k-bushi.com)は、IT技術やプログラミング、クラウドサービスなどに関する備忘録として運営されているテクニカルブログです。ブログ名の「かつおぶし」はGitHubアカウント名「katsuobushiFPGA」とTwitterアカウント名「KatsuoBushiFPGA」からも使用されているユーザー名です。

ブログの主なコンテンツ
ブログには主に以下のようなカテゴリーの記事があります:

技術関連記事:

プログラミング言語(Go、PHP、JavaScript、C#など)
クラウドサービス(AWS、Azure、GCPなど)
コンテナ技術(Docker、Podman)
インフラ構築(Apache、Nginx、Tomcat)
データベース(MySQL、PostgreSQL)
セキュリティ関連
ツールやTips:

コマンドラインツールの使い方
開発効率を上げるためのテクニック
環境構築のガイド
キャリアと学習:

資格試験(情報処理安全確保支援士、データベーススペシャリストなど)
年間振り返りや抱負
最新のIT技術:

AI関連(ChatGPT、MCPサーバなど)
最新ツールのレビュー
最新記事
最新の記事には以下のようなトピックがあります:

Golang Petnameを使って覚えやすいランダムな名前を生成する(2025年5月7日)
Amazon Q Developer CLIでCost Analysis MCPサーバを使ってみる(2025年4月29日)
AmazonLinux2023 AMIの更新通知を受け取るように設定する(2025年4月28日)
AWS Health 通知を有効にする(2025年4月28日)
AWS CLIのプロファイルにSSO認証を使う(2025年4月27日)
ブログの特徴
実用的な内容: 実際の開発やインフラ運用で役立つ知識や経験が具体的に書かれています
継続的な更新: 2020年から現在(2025年)まで継続的に更新されています
幅広いIT技術: クラウド、プログラミング、サーバー管理など多岐にわたるトピックが扱われています
構造化された記事: はじめに・環境・手順などの一貫した構造で記事が書かれています
運営者について
運営者は技術(特にIT関連)に精通しており、AWS、Linux、コンテナ技術などに詳しいエンジニアと思われます。情報処理安全確保支援士やデータベーススペシャリストなどの資格を取得していることも記事から伺えます。

また、継続的に学習と技術の追求をしている様子が記事の内容から読み取れます。技術的な実験や新しいツールの検証などが多く、実践的な内容が特徴です。

ブログは技術メモや知識の共有、自身の学習記録としての役割を果たしていると言えるでしょう。

参考

おわりに

Playwright MCPGitHub Copilotを連携することで、AIによるブラウザ操作ができた。
また、自然言語でWeb操作を指示できる点は非常に良い。

実際の業務では、テスト自動化や反復的な作業の自動化にで使えそうだな~。
特にE2Eテストの面で活用できると良いので、playwrightについて今後とも詳しく知っておきたい。

Hugo で構築されています。
テーマ StackJimmy によって設計されています。