Playwright MCPサーバーを自分のPC内に建てる方法について

第1章　Playwright MCPサーバについて

Playwrightはブラウザ操作の自動化フレームワークで、Chromium・Firefox・WebKitを単一APIで操作可能です。
Playwright MCPサーバーを使用することで、AIエージェントがWeb画面の操作を行いアプリケーションの実行を行うことができるようになります。

本ドキュメントでは、MCPサーバーをWindowsのローカル環境にセットアップする手順をお伝えします。

第２章　Node.jsのインストール

Microsoftが公開しているPlaywright MCPのgitページにNode.js 18 or newerと記載があるので、Node.jsをインストールする必要があります。
以下のNode.jsの公式ダウンロードページからダウンロードしてください。すでにNode.jsがインストールされている場合は２章を飛ばして構いません。

[公式ダウンロードページ]（https://nodejs.org/ja/download）

OSに合わせてLTS版のインストーラーをダウンロードしファイルを実行します。セットアップウィザードに従いインストールを完了させます。
完了後PCを再起動し、ターミナルで node -v と npm -v を実行し、バージョンが表示されれば正常にインストールされています

PlaywrightとPlaywrightMCPのインストール

npm install -g playwright @playwright/mcp

ターミナルで npx playwright --version と npx @playwright/mcp --version を実行し、バージョンが表示されれば正常にインストールされています。
※インストールタイミングによってはバージョンが異なる場合があります。

npx playwright --version
Version 1.52.0

npx @playwright/mcp --version  
Version 0.0.26

正しくインストールができていない場合、Need to install the following packages:と表示されるため再度インストールしてください。

npx playwright --version
Need to install the following packages:
playwright@1.52.0
Ok to proceed? (y) n
npm error canceled
npm error A complete log of this run can be found in: C:\Users\name\AppData\Local\npm-cache\_logs\2025-05-25T08_13_52_347Z-debug-0.log

npx @playwright/mcp --version
Need to install the following packages:
@playwright/mcp@0.0.26
Ok to proceed? (y) n
npm error canceled
npm error A complete log of this run can be found in: C:\Users\name\AppData\Local\npm-cache\_logs\2025-05-25T08_14_03_664Z-debug-0.log

次にPlaywrightでブラウザを立ち上げて操作を行う際に必要なブラウザバイナリをダウンロードします。

npx playwright install

インストールが完了することで、クローム等のWebブラウザをPlaywrightができるようになります。

第４章　Playwright MCPサーバーの起動

最後に、以下コマンドを入力することによりMCPサーバーを起動します。

npx @playwright/mcp --port 5001

実行が成功すると以下の内容が返ってくるので、これをMCP clientに伝えることでPlaywright MCPが使用できるようになります。

Listening on http://localhost:5001
Put this in your client config:
{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:5001/sse"
    }
  }
}