playwright-mcpをWindows11で試した件
私は、Claudeのサブスクリプションを利用していないので、Claude Desktopで、MCPを使えないようです。
それで、cursorのMCPの設定を使いました。
Windows11で、試しています。
C:\Users\ユーザー名\.cursor\mcp.json
に、こちらを設定しました。
{
"mcpServers": {
"playwright-mcp": {
"command": "node",
"args": [
"D:/MCP/playwright-mcp/cli.js"
]
}
}
}
そして、この画面になりました。
このlaywright-mcpを有効しているときは、cursorを起動すると、ターミナルも一緒に起動します。
何も表示されないターミナルですが、MCPサーバーが起動している証拠のようです。
今回cursorのagentモードを使って、Googleのウェブサイトにアクセスして、トップページのスクリーンショットを撮影する動作ができました。
今回は、外付けのDドライブに のクローンを作り、ビルドまで行いました。
npx @playwright/mcp@latest
このように起動コマンドを実行しても、ターミナルには、何も表示されないです。
ビルドなどのことは、この記事の後半を読んでください。
Claude Desktop 無料ユーザーもMCPを利用できた
laywright-mcp以外のMCPサーバーがcursorで上手く行かないので、思い切ってClaude Desktopで、試してみました。
設定ファイルのパスは、Windows11の場合は、この場所の場合もあります。
C:\Users\ユーザー名\AppData\Roaming\Claude\claude_desktop_config.json
最終的に、このように書きました。
Jsonの項目のコマンドは、使っているパソコンで、npxが動くパスを設定することが必要でした。
{
"mcpServers": {
"mcp-installer": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
"args": [
"@anaisbetts/mcp-installer"
],
"env": {
"APPDATA": "C:\\Users\\ユーザー名\\AppData\\Roaming"
}
},
"brave-search": {
"command": "C:\\Program Files\\nodejs\\npx.cmd",
"args": [
"-y",
"@modelcontextprotocol/server-brave-search"
],
"env": {
"BRAVE_API_KEY": "************",
"APPDATA": "C:\\Users\\ユーザー名\\AppData\\Roaming"
}
},
"playwright-mcp-wsl": {
"command": "wsl",
"args": ["bash", "-ic", "cd ~/mcp/playwright-mcp && node cli.js"],
"env": {}
}
}
}
上記の内容で、下記のMCPサーバーが使えます。
mcp-installer
AIと会話しながら、MCPサーバーを利用できるように、設定できます。
brave-search
ブラウザで有名なBraveのAPIを利用して、AIから検索できます。
API KEYが色々ありますので、間違えないでください。
Free AIで、使えます。
Microsoftのplaywright-mcp
AIがブラウザの操作するためのツールです。
ローカルにリポジトリのクローンを作り、ビルドして起動できるようにしました。
起動しても、ターミナルに何も表示されないです。
Microsoftのplaywright-mcpを起動するまでの手順
私は、外付けドライブを使いました。
まず、リポジトリのクローンを作ります。
D:\MCP\playwright-mcp> git clone https://github.com/microsoft/playwright-mcp.git
ディレクトリを移動します。
そして依存関係を、インストールします。
cd playwright-mcp
npm install
ビルドします。
npm run build
サーバー起動
node cli.js
起動してもターミナルに、何も表示されません。
Claude Desktopで、runningが表示されまた。
接続できました。
ハンマーのアイコン増えました
無料ユーザーでも、ハンマーのアイコンが増えてMCPサーバーが使えました。
でもうまく動かないです。
ネットの記事で、MCPサーバーの起動コマンドが書かれていますが、これを試しても上手く行かないです。
npx @playwright/mcp@latest
このコマンドを試しても、何も反応が無いです。
cursorのMCPに登録して試したときは、何も表示されないコマンドのターミナルが表示されます。
GPT-4oに質問したら、MCPサーバーが起動した証拠だと言っていました。
今回MCPサーバーが起動しても、メッセージが表示されるようにコードが書かれていないことが分かりました。
Windows11で上手く行かないけどXのポストなどで成功事例があることから、WSLで使う方法に変更しました。
WSLを活用してClaude DesktopでMCPサーバーとして使うことができました
下記の手順でWSLで、インストールしました。
git clone https://github.com/microsoft/playwright-mcp.git
cd playwright-mcp
npm install
npx playwright install
npm run build
この後Windows11にインストールしているClaude DesktopのMCPのJsonの設定を、このように書きました。
{
"mcpServers": {
"playwright-mcp-wsl": {
"command": "wsl",
"args": ["bash", "-ic", "node /home/<your-username>/mcp/playwright-mcp/cli.js"]
}
}
}
このあとClaude Desktopのチャットで、playwright-mcpを使いウェブサイトのトップページをPDFに保存できました。
保存したPDFは、下記のコマンドで、Windows11で使えるドライブにコピーできました。
cp /tmp/page-....pdf /mnt/d/
参考にした記事は、こちらです。
cursorは、Windows11のドライブで起動しているMCPサーバーで使う
cursorのMCPサーバー設定のjsonに、WSLのパスを書くなどして試しまたが、機能しませんでした。
そのためcursorでplaywright-mcpを使うときは、リポジトリをインストールする場所に気を付けてください。
Discussion