WSL2 + devcontainer + playwright mcpで動かす際の備忘録

前提

• WSL2上のdevcontainerをcursorで開いていて、playwright mcpを使いたかった
• playwrightはheadlessではなくwebUIを使いたかった
• devcontainerはrootlessで動いているので、devcontainer内にはplaywrightを入れるのは大変

方針

上記の条件があったので、WSL2上でplaywright mcpを動かし、devcontainerの中からアクセスをする形にしました

手順

1. WSL2上でplaywrightを動かす

   npx @playwright/mcp@latest --host 0.0.0.0 --port 8931
   

2. devcontainerで動かすdocker-compose.yamlにextra_hostsを追加

   services:
     verification_strategy:
       build:
         context: .
         dockerfile: Dockerfile
       tty: true
       volumes:
         - .:/home/${USERNAME}/app:delegated
       environment:
         TZ: Asia/Tokyo
       extra_hosts:
         - "host.docker.internal:host-gateway" 
       ports:
         - "8501:8501"
   

3. mcp.jsonに以下を追加

   {
      "mcpServers": {
        "playwright": {
          "url": "http://host.docker.internal:8931/sse"
        }
      }
    }
   

以上でdevcontainerの中からwebuiのplaywrightを使うことができる
まだcursorはmcpのauto実行が対応していないみたいなので使い勝手はわるい、、（残念）