インストールから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: 公式サイトからダウンロード（推奨）

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

方法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を使用するためのサーバーをインストールします：

# Microsoft公式のPlaywright MCPサーバーをインストール
npx @playwright/mcp@latest --help

# または、ExecuteAutomation版を使用する場合
npm install -g @executeautomation/playwright-mcp-server

3.2 Claude Desktopの設定

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

Windows設定ファイルの場所:

%APPDATA%\Claude\claude_desktop_config.json

設定内容（Microsoft公式版）:

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

設定内容（ExecuteAutomation版）:

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

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

MCPサーバーでPlaywrightを使用するため、ブラウザバイナリをインストールします：

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

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

3.4 Cursor での設定

Cursor:

• Cursor → Settings → MCP
• "Add new MCP Server" をクリック
• 以下を入力：

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

4. 基本動作の確認

4.1 Claude DesktopでのMCP確認

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

@playwright navigate to https://example.com

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

4.2 基本的なPlaywright MCPコマンド

# ページにアクセス
@playwright navigate to https://playwright.dev

# 要素をクリック
@playwright click "Get started"

# テキストを入力
@playwright type "#search" "Playwright tutorial"

# スクリーンショットを撮影
@playwright screenshot

# ページ情報を取得
@playwright page info

4.3 動作確認テスト

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

@playwright navigate to https://www.google.com
@playwright type "[name='q']" "Playwright testing"
@playwright press Enter
@playwright screenshot

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

問題1: MCP接続エラー

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

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

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

問題3: 権限エラー

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

5. 次のステップ

5.1 学習リソース

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

• Playwright公式ドキュメント
• Microsoft Playwright MCP
• Playwright Best Practices

5.2 発展的な使用法

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

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

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

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

5.4 関連記事

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

まとめ

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