PlaywrightMCPをVSCode + Copilotで使う[初期設定〜ざっくり使い方まで]

会社負担でCopilotがVSCodeで使える環境の人も多いと思うので、その環境下でPlaywrightMCPを使う方法をここに残しておこうと思います。

インストール

npx @playwright/mcp@latest

vscodeのsetting.jsonに追加

コマンドパレットでsetting.jsonを検索するなどして開いて、以下を書き込みました。

setting.json

{
//他の設定の後に・・・

    "mcpServers": {
        "playwright": {
            "command": "npx",
            "args": ["@playwright/mcp@latest"]
        }
    },
    "chat.agent.enabled": true
}

私は毎回@playwright/mcpとvscodeのターミナルに打ち込みたくないので、ここで常にMCPサーバを起動する設定にしましたが重いのが嫌な人はchat.agent.enabledをfalseにするといいかもしれないです。
また、setting.jsonでグレーアウトされているので不安になりますが気にしなくてOKです。

この後、copilotのchatで@mcpをつけて質問すると、MCPサーバ経由で回答してくれます。
copilotのchat画面でAgentに切り替えるように書いてある記事が多かったんですが、仕様の変更なのか、そんなことをしなくても接頭語に@mcpをつけて質問するだけで、見ているファイルへのPlaywrightを使ったテスト方法を教えてくれました。

以下参考にした記事です。