AIモデル「Claude」を中心に、異なるシステムやサービスとAIエージェントが円滑に通信できるようにする「MCP」と呼ばれる標準規格が2024年後半から話題となり、「MCPを使って××する」というような記事やWebサイトなどを目にしたことがある方も多いのではないでしょうか。
今回は、オープンソースのブラウザテスト自動化ツール「Playwright」を使って、従来のE2Eテストとの違い、「動作確認がすべて自然言語のプロンプトだけで完結させることができる」という点について説明を行い、MCPを使ってClaude DesktopでPlaywrightの設定をした後、操作確認をしていければと思います。
AIと外部ツールとの連携については、標準の規格となる「MCP（Model Context Protocol）」の機能を利用することで、AIが人間に代わって様々なツールを操作し、作業を自動化することができるようです。
作業準備として、「Node.js」「Claude Desktop」のインストールを行なった後、Claude DesktopでMCPの設定をしていきます。
Node.js のインストール
Node.jsのサイトにアクセスし、自身の環境のインストーラをダウンロードします。
https://nodejs.org/ja/
コマンドプロンプトから、「node – v」を入力し、バージョンが表示されれば、node.jsのインストール作業は完了です。
Claude Desktopのインストール
以下のサイトから自身の環境に合わせてClaude Desktopのインストーラをダウンロードします。
https://claude.com/download
Gmailアドレスを入力し、Claudeのアカウントを作成していきます。
途中、Free/ Pro/Maxとプランを選択する必要があります。
MCPはFreeプランでも使用できますので、まずは動きを確認してみたいという方は「Free」プランで試してみるのがお勧めです。
Claude DesktopでのMCPの設定
Claude Desktopで、[設定]>>[開発者] >>[設定を編集]より、「claude_desktop_config.json」を開きます。
以下のGitHubソースから、Playwrightの設定内容を調べることができますが、設定ファイルにPlaywrightとの連携ソースを追加していきます。
https://github.com/modelcontextprotocol/servers
claude_desktop_config.json
“mcpServers”: {
“playwright”: {
“command”: “npx”,
“args”: [
“@playwright/mcp@latest”
]
}
}
Claude Desktopを再起動すると、「Playwright」のコネクタが登録されていることがわかると思います。
実際に、Playwrightを使ってTodoリストの動作確認をしてみましょう。
Claude DesktopにMCPの設定をした後、プロンプトを入力すると動作確認できると思います。
今回の内容はいかがだったでしょうか。実際にClaude DesktopでPlaywright のMCP設定をすることで、Playwrightのテスト自動化を試すことが出来たと思います。こういった具合に設定するものなのかな、と自分にできる範囲のものから少しずつ挑戦してみようかなと思っていただければ幸いです。
以上となります。
参考：Udemy >>
・はじめてのMCP：専門知識ナシで実践できるAI×業務自動化【Claude Desktop】
