#Claude Code #Playwright MCP #MCP

Playwright MCP を使ってログイン済み状態でサイトを開く

Cluade Code を Windows にインストールし、Playwright MCP を使ってログイン済み状態の Chrome でサイトを開く方法を調べた。

環境

  • Windows 11

作業内容

1. Node.js を Windows 11 にインストールする

最終的に Node.js が必要になるようだったし、Claude Code のインストールも Node.js が入っていれば話は早いので、まず Node.js をインストールする。

私は Chocolatey を利用しているため、Chocolatey で nvm をインストールする。

https://community.chocolatey.org/packages/nvm

choco install nvm

nvm をインストールしたら一度ターミナルを開き直し、

nvm list available

で利用できるバージョンを確認後

nvm install 22.18.0
nvm use 22.18.0

で Node.js v22.18.0 をインストールした。

2. Claude Code を Windows 11 にインストールする

https://docs.anthropic.com/en/docs/claude-code/setup

Node.js をインストール済みなので、普通に npm install で問題ない。

npm install -g @anthropic-ai/claude-code

あとは適当なディレクトリに行って

claude

の初回実行を行い、認証等を済ませる。

3. Playwright MCP の導入

https://github.com/microsoft/playwright-mcp

MCP はグローバルインストール的な設定ではなくてディレクトリごとの設定になっているので、まずプロジェクトディレクトリに遷移する。
単に MCP を試したいだけなら適当にディレクトリ切って入っておけばいい。別に package.json を置いたりする必要はない。

ディレクトリに入ったら Playwright MCP を追加する。

claude mcp add playwright npx @playwright/mcp@latest

これでホームディレクトリの .claude.json に設定が書き込まれる。
Windows の場合は C:\\Users\\<USERNAME>\\.claude.json である。<USERNAME> 部分は自分のユーザー名になる。

起動設定を追加するので、該当ファイルを開き、“playwright” で検索する。

"mcpServers": {
    "playwright": {
        "type": "stdio",
        "command": "npx",
        "args": [
            "@playwright/mcp@latest"
        ],
        "env": {}
    }
},

という記述が見つかるので、下記のように書き換える。

"mcpServers": {
    "playwright": {
        "type": "stdio",
        "command": "npx",
        "args": [
            "@playwright/mcp@latest",
            "--config",
            "C:\\Users\\<USERNAME>\\claude-playwright-config.json"
        ],
        "env": {}
    }
},

次に C:\\Users\\<USERNAME>\\claude-playwright-config.json を作成し、以下の内容を書き込む。

{
  "browser": {
    "browserName": "chromium",
    "isolated": false,
    "userDataDir": "C:\\Users\\<USERNAME>\\AppData\\Local\\PlaywrightChrome",
    "launchOptions": {
      "channel": "chrome",
      "headless": false,
      "args": [
        "--no-first-run",
        "--no-default-browser-check"
      ]
    },
    "contextOptions": {
      "locale": "ja-JP",
      "timezoneId": "Asia/Tokyo"
    }
  }
}

この設定ファイルでは、主に以下のことを実現している。

  • Windows にインストール済みの Chrome を使うようにする
  • 常に同じプロファイルで開く
  • 開いている画面を目視可能にする（"headless": false）

ここまでできたら、claude のセッションを開いている場合は一度閉じて開き直す。
そして claude mcp list というコマンドを打つ。

Checking MCP server health...

playwright: npx @playwright/mcp@latest --config C:\Users\<USERNAME>\claude-playwright-config.json - ✓ Connected

というように ✓ Connected と表示されていたら問題ない。

もし Connected ではなかった場合、ファイルのパス間違いなどをチェックする。

4. Chrome で Zenn を開いてログインする

ここまで設定できたら、claude に「Chrome で Zenn を開いて」と指示すると Chrome で Zenn を開いてくれると思う。
新規プロファイルであるため Zenn にはログインしていない。そのため、そのまま手動操作して Zenn にログインする。

プロファイルを固定しているため、一度ログインすれば、次回以降は claude のセッションが新しくなってもログイン状態で Zenn を開けるようになる。

感想

最初から Zenn にログイン状態で開きたかったので既存のプロファイルを指定しようとしたが、ブラウザを開くことはできるもののページ遷移などが行えず失敗した。
指定したパスが悪かったのかもしれないが、Claude 自身は「設定が競合している」みたいなことを言っていた。

またログイン状態でサイトを開きたかったのは「今見ている画面の情報を読み取って整形してほしい」という動機からなのだが、「ページの中身を html で読み取って」と言ってもトークンが溢れて失敗することが多かった。
それなら私が手動でページを html で保存した上で Claude に読み取らせて整形させるほうがいいかもしれないと思った。

以上