MCP VSCode GithubCopilot の組み合わせでplaywrightを動かしてみた（MAC環境）

Playwright MCP サーバーをMACにインストール

npm install -g @playwright/mcp

VSCodeでGithubCopilotのAgentモードを許可する

メニューバーの Code > Preference > Settigs をクリックしてSettings画面を開く

chat.agent.enabled で検索して、
Chat > Agent:EnabledをクリックしてチェックをONにする

VSCodeでPlaywright MCP サーバーを起動する

Settings画面右上のファイルアイコンをクリックして、settings.jsonを開く

settings.jsonに下記のmcpの項目を追加する

"mcp": {
        "servers": {
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp"
                ]
            }
        }
    }

Startをクリックして、Runningになれば、Playwright MCP サーバーが起動しています。

Github Copilot Agent モードが Playwright MCP サーバーに接続しているか確認する

Agentを選択して、レンチのアイコンをクリック

MCP Server: playwrightのチェックボックスがONになっているポップアップがでてくればOKです

Github Copilot Agent モードでplaywrightを動かしてみる

「playwright で https://github.com/microsoft/playwright-mcp のサイトを開いてください」と入力して送信

先ほどのMCP Server: playwrightポップアップのbrowser_navigateの機能を使うか訪ねてくるので「Continue」をクリック

「I have successfully opened the GitHub page for the Playwright MCP project.」と表示され、https://github.com/microsoft/playwright-mcp のサイトがplaywrightで表示することができました。