【Windows】WSL環境でのClaudeCode＋Playwright

はじめに

ClaudeCodeはWindowsOS環境には対応していません。しかし、WSLを利用して環境を構築することは可能です。ClaudeCodeを利用しているWindowsユーザーの皆さんはWSLの仕組みを利用してUbuntu上に環境を構築されているのではないでしょうか？

PlaywrightMCPをClaudeCodeと連携させて使う記事はたくさんあるのですが、具体的な内容が足りていなかったり、環境に対する記述がなかったりなどして、 Windows環境で構築するのには少し苦労しました。ClaudeDesktopと連携させる方法とも違いますし...

ここではWindows wsl環境でPlaywrightMCPとClaudeCodeを連携させて使う方法を端的に紹介したいと思います。

読者の時短になればうれしいです。

想定する読者

• Windowsユーザー
• WSL環境インストール済み
• ClaudeCodeインストール済み

具体的な方法

さあ、はじめましょう。

Playwrightをインストールする

# 本体
npm install -g @playwright/test

# MCP
npm install -g @playwright/mcp

# ブラウザインストール
npx playwright install

MCPをClaudeCodeと連携させる

windows/wsl環境でのmcpサーバー用のplaywrightのコンフィグは環境によると思うので、ファイルにしちゃった方がいいと思います。

.mcp.json

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--config",
        "playwright.config.json"
      ]
    }
  }
}

playwright.config.json

{
  "browser": {
    "browserName": "chromium",
    "isolated": true,
    "launchOptions": {
      "headless": false,
      "args": [
        "--no-sandbox"
      ]
    }
  }
}

特に重要な設定が

• isolated
• no-sandbox
• headless
  です。

isolated

独立プロセスでPlaywrightを動かす設定です。複数のPlaywrightを動かす場合は必須。
ないとエラーが出ます。

＊ぼくはClaudeDesktopにもPlaywrightを入れてるので、プロセスがかぶってるのかな🤔

no-sandbox

wslだとroot権限になる関係か、chromiumにno-sandboxを設定しないと立ち上がりません。
以下のメッセージが出ます。
Running as root without --no-sandbox is not supported.

headless

テストするだけなら@playwright/testパッケージを利用すればいいので、どうせならClaudeといっしょにブラウザを眺めたいですよね。

headressをtrueに設定するとブラウザが立ち上がります。

最終的なディレクトリ構成

• root（プロジェクトのルート）
  • .mcp.json
  • playwright.config.json

テスト

では実際に動かしてテストしましょう。

# ClaudeCodeを呼ぶ
claude

指示をだしたところ

働いているClaudeCode

Playwright画面

音声入力で指示出来て楽しいです。

余談：webkit環境の構築

chromiumではなくwebkitでテストしてモバイル感を出したい！

.mcp.json

{
  "mcpServers": {
    "pw-pc": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--config",
        "playwright.config.json"
      ]
    },
    
    "pw-mobile": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--config",
        "playwright.config.mobile.json"
      ]
    }
  }
}

playwright.config.mobile.json

{
  "browser": {
    "browserName": "webkit",
    "isolated": true,
    "launchOptions": {
      "headless": false
    },
    "contextOptions": {
      "isMobile": true,
      "hasTouch": true,
      "viewport": { "width": 390, "height": 844 },
      "userAgent": "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1"
    }
  }
}

reCaptchaが突破できなかったや😅

まとめ

PlaywrightはMicrosoftが開発したWebブラウザの自動テスト環境です。Playwrightを利用することで、WebシステムのテストをClaudeCodeと対話しながら行うことができます。

• 一緒に画面を見ながらテストする
• ブラウザを見ながら指示を出す
• スクリーンショットを撮る

といったことができるようになります。
楽しいです😊

---

この記事は以上です。ありがとうございました。

kintoneのプラグイン開発や研修などを行っています。
お仕事のお話はこちらまで。