Windows環境でのPlaywright & Claude MCP セットアップガイド

インストールからClaude連携まで!

Playwrightは、Microsoftが開発したWebアプリケーションの自動テストツールです。Chromium、Firefox、WebKitの3つのブラウザエンジンをサポートし、クロスブラウザテストを効率的に実行できます。本記事では、Windows環境でのPlaywrightのセットアップとClaude MCPとの連携方法について詳しく解説します。

1. Playwrightとは

Playwrightの主な特徴

クロスブラウザサポート: Chromium、Firefox、WebKitの3つのブラウザエンジンに対応
言語サポート: TypeScript、JavaScript、Python、Java、.NETをサポート
高速実行: 並列実行により高速なテスト実行が可能
信頼性の高い自動化: 要素が表示されるまで自動的に待機
デバッグサポート: 豊富なデバッグ機能とトレース機能
モバイルテスト: モバイルデバイスのエミュレーション機能

Playwrightを使うメリット

生産性の向上: 手動テストの自動化により開発効率が向上
品質向上: 継続的なテスト実行によりバグの早期発見が可能
コスト削減: 回帰テストの自動化により長期的なコスト削減
信頼性: フレーキーテストが少なく、安定したテスト実行
包括的なテスト: 複数ブラウザでの動作確認が容易

Claude MCPとの連携メリット

自然言語でのブラウザ操作: 「ログインして商品を検索する」などの指示が可能
迅速なプロトタイピング: テストシナリオの素早い作成・検証
学習コストの削減: Playwright APIを覚える前から使用開始可能
デバッグ支援: 問題発生時のスクリーンショットや詳細情報取得

2. Windows環境でのセットアップ

2.1 前提条件の確認

Windows環境でPlaywrightを使用するための前提条件：

OS: Windows 10 以降
Node.js: Version 18 以降（推奨: v22.x LTS）
RAM: 最低4GB（推奨8GB以上）
ディスク容量: 最低2GB（ブラウザバイナリ用）

2.2 現在の環境確認

まず、既存のNode.js環境を確認しましょう：

# Node.jsのバージョン確認
node --version

# npmのバージョン確認  
npm --version

# 既存のグローバルパッケージ確認
npm list -g --depth=0

期待される出力例:

v22.14.0
10.9.2

2.3 Node.js環境の判定

✅ Node.js v18以降がインストール済みの場合（推奨）

現在の環境をそのまま活用してPlaywrightをセットアップできます。特にv22.x系の場合はLTS版なので最適です。

❌ Node.jsがインストールされていない、またはv18未満の場合

以下の方法でNode.js LTS版をインストールしてください：

方法1: 公式サイトからダウンロード（推奨）

Node.js公式サイトにアクセス
LTS版（Long Term Support）をダウンロード
Windows Installer (.msi) - 64-bit を選択
インストーラーを実行し、指示に従ってインストール

方法2: wingetを使用（Windows 10/11）

# PowerShellを管理者権限で実行
winget install OpenJS.NodeJS

方法3: Chocolateyを使用

# Chocolateyがインストールされている場合
choco install nodejs-lts

3. Claude MCPとの連携

3.1 MCP Playwrightサーバーの確認

Claude MCPでPlaywrightを使用します。インストールは不要で、npxを使用して直接実行できます：

# Microsoft公式のPlaywright MCPサーバーの動作確認
npx @playwright/mcp@latest --help

注意: npmでグローバルインストールする方法（npm install -g @executeautomation/playwright-mcp-server）もありますが、npxを使用する方が推奨されます。npxを使用することで、常に最新版が実行され、グローバル環境に影響を与えません。

3.2 Claude Desktopの設定

Claude Desktopの設定ファイルを編集します。設定ファイルの場所：

%APPDATA%\Claude\claude_desktop_config.json

設定ファイルの構造：

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

3.3 Claude Code(Windows環境)の設定

claude mcp add playwright -s user  -- cmd /c npx -y @playwright/mcp@latest

重要: Claude Desktopではcmd /cが自動で処理されるため不要ですが、Windows環境のClaude Codeでは、内部コマンド等を使う際は手動で「cmd /c」の指定が必要になります。

3.4 Cursorでの設定

Cursorでは設定方法が異なります：

Cursor → Settings → Tools & Integrations
"New MCP Server" をクリック
以下の設定を入力：

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

重要: CursorとClaude Desktopでは設定インターフェースが異なりますが、設定内容は同じです。Claude Desktopでは設定ファイルを直接編集し、Cursorでは設定画面から入力します。

3.5 Playwrightブラウザのインストール

Playwright MCPサーバーは初回実行時に必要なブラウザを自動的にインストールします。通常は追加の作業は不要ですが、以下のような場合は手動インストールが必要です。

手動インストールが必要な場合：

Claude Desktopで「ブラウザが見つかりません」というエラーが出た場合
プロキシ環境で自動ダウンロードが失敗した場合

# Playwrightブラウザバイナリをインストール
npx playwright install

# システム依存関係のインストール（Windows 11では通常不要）
npx playwright install-deps

4. 基本動作の確認

4.1 Claude DesktopでのMCP確認

Claude Desktopを再起動後、以下で動作確認：

ブラウザでhttps://example.comにアクセスしてください

成功すると、ブラウザでページが開かれ、スクリーンショットが返されます。

4.2 Claudeでの使用方法

# 使用例
ブラウザでhttps://playwright.devにアクセスしてください
"Get started"ボタンをクリックしてください
検索ボックスに"Playwright tutorial"と入力してください
スクリーンショットを撮影してください
ページの情報を取得してください

4.3 動作確認テスト

実際にWebサイトにアクセスして操作してみましょう：

ブラウザでhttps://www.google.comにアクセスして、
検索ボックスに"Playwright testing"と入力し、
Enterキーを押してスクリーンショットを撮影してください

4.4 トラブルシューティング

問題1: MCP接続エラー

# 解決策: Playwrightが正しくインストールされているか確認
npx playwright --version

問題2: ブラウザ起動エラー

# 解決策: ブラウザを再インストール
npx playwright install --force

問題3: 権限エラー

# 解決策: PowerShellを管理者権限で実行
npx playwright install

5. 次のステップ

5.1 学習リソース

基本的なセットアップが完了したら、以下のリソースで学習を進めましょう：

5.2 発展的な使用法

Page Object Model: 保守性の高いテストコード作成
CI/CD連携: GitHub ActionsやAzure DevOpsとの統合
カスタムフィクスチャ: プロジェクト固有の共通処理
パフォーマンステスト: ページ読み込み時間の測定
セキュリティテスト: XSS、CSRF対策の検証

5.3 プロジェクト開発の準備

本格的なテスト開発を始める場合は、以下を検討してください：

プロジェクト固有のPlaywright環境構築
TypeScriptでの型安全なテスト作成
VSCode拡張機能を活用したデバッグ環境
CI/CDパイプラインとの統合

5.4 関連記事

詳細なテスト実装については、続編記事「Windows環境でのPlaywright実践ガイド - VSCodeを使った自動テスト開発」をご参照ください。

まとめ

Windows環境でのPlaywrightとClaude MCPの連携セットアップについて解説しました。

更新履歴

2025-08-03: 記事内容を修正しました

重要な変更: NPX方式での利用を推奨方法として変更
設定方法の明確化: CursorとClaude Desktopの設定方法の変更
使用方法の修正: 使用例を自然言語での指示方法に変更

2025-08-10: 記事内容を修正しました

設定方法の追加:Claude Codeの設定方法を追加

目次

関連記事