🛠️ 開発・MCP コミュニティ 🔴 エンジニア向け 👤 エンジニア・AI開発者

🛠️ Playwright MCP

playwright-mcp

Playwright MCPサーバーを通じてウェブサイトの操作を自動化し、要素のクリックやフォームへの入力、データ抽出、スクリーンショット撮影など、ブラウザ操作全般を効率的に実行するSkill。

⚡ ⏱ 障害ポストモーテム 1日 → 1時間

📜 元の英語説明(参考)

Browser automation via Playwright MCP server. Navigate websites, click elements, fill forms, extract data, take screenshots, and perform full browser automation workflows.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚡ おすすめ: コマンド1行でインストール(60秒)

下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。ダウンロード → 解凍 → 配置まで全自動。

🍎 Mac / 🐧 Linux

mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o playwright-mcp.zip https://jpskill.com/download/5219.zip && unzip -o playwright-mcp.zip && rm playwright-mcp.zip

🪟 Windows (PowerShell)

$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5219.zip -OutFile "$d\playwright-mcp.zip"; Expand-Archive "$d\playwright-mcp.zip" -DestinationPath $d -Force; ri "$d\playwright-mcp.zip"

完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。

💾 手動でダウンロードしたい(コマンドが難しい人向け)

1. 下の青いボタンを押して playwright-mcp.zip をダウンロード
2. ZIPファイルをダブルクリックで解凍 → playwright-mcp フォルダができる
3. そのフォルダを C:\Users\あなたの名前\.claude\skills\(Win)または ~/.claude/skills/(Mac)へ移動
4. Claude Code を再起動

⬇ .zip でダウンロード(推奨) ⬇ .skill 形式(上級者用) 元のソース ↗

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

🎯 このSkillでできること

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

📦 インストール方法 (3ステップ)

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。

詳しい使い方ガイドを見る →

最終更新: 2026-05-17
取得日時: 2026-05-18
同梱ファイル: 1

💬 こう話しかけるだけ — サンプルプロンプト

› Playwright MCP を使って、最小構成のサンプルコードを示して
› Playwright MCP の主な使い方と注意点を教えて
› Playwright MCP を既存プロジェクトに組み込む方法を教えて

これをClaude Code に貼るだけで、このSkillが自動発動します。

📖 Skill本文(日本語訳)

※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。

Playwright MCP スキル

Playwright MCP サーバーを搭載したブラウザ自動化です。Chrome、Firefox、または WebKit をプログラムで制御します。

インストール

npm install -g @playwright/mcp
# または
npx @playwright/mcp

ブラウザのインストール（初回のみ）：

npx playwright install chromium

クイックスタート

MCP サーバーの起動 (STDIO モード)

npx @playwright/mcp

オプションを指定して起動

# ヘッドレスモード
npx @playwright/mcp --headless

# 特定のブラウザ
npx @playwright/mcp --browser firefox

# ビューポート付き
npx @playwright/mcp --viewport-size 1280x720

# HTTPS エラーを無視
npx @playwright/mcp --ignore-https-errors

一般的なユースケース

1. ナビゲートとデータ抽出

# 利用可能な MCP ツール:
# - browser_navigate: URL を開く
# - browser_click: 要素をクリック
# - browser_type: テキストを入力
# - browser_select_option: ドロップダウンを選択
# - browser_get_text: テキストコンテンツを抽出
# - browser_evaluate: JavaScript を実行
# - browser_snapshot: ページ構造を取得
# - browser_close: ブラウザを閉じる

2. フォーム操作

1. browser_navigate でフォームの URL へ移動
2. browser_type で入力フィールドにテキストを入力
3. browser_click で送信
4. browser_get_text で結果を検証

3. データ抽出

1. browser_navigate でページへ移動
2. browser_evaluate で抽出スクリプトを実行
3. 返された JSON データをパース

MCP ツールリファレンス

ツール	説明
`browser_navigate`	URL へナビゲート
`browser_click`	セレクターで要素をクリック
`browser_type`	入力フィールドにテキストを入力
`browser_select_option`	ドロップダウンオプションを選択
`browser_get_text`	テキストコンテンツを取得
`browser_evaluate`	JavaScript を実行
`browser_snapshot`	アクセシブルなページスナップショットを取得
`browser_close`	ブラウザコンテキストを閉じる
`browser_choose_file`	ファイルをアップロード
`browser_press`	キーボードキーを押す

設定オプション

# セキュリティ
--allowed-hosts example.com,api.example.com
--blocked-origins malicious.com
--ignore-https-errors

# ブラウザ設定
--browser chromium|firefox|webkit
--headless
--viewport-size 1920x1080
--user-agent "Custom Agent"

# タイムアウト
--timeout-action 10000      # アクションタイムアウト (ms)
--timeout-navigation 30000  # ナビゲーションタイムアウト (ms)

# 出力
--output-dir ./playwright-output
--save-trace
--save-video 1280x720

例

ウェブサイトへのログイン

browser_navigate: { url: "https://example.com/login" }
browser_type: { selector: "#username", text: "user" }
browser_type: { selector: "#password", text: "pass" }
browser_click: { selector: "#submit" }
browser_get_text: { selector: ".welcome-message" }

テーブルデータの抽出

browser_navigate: { url: "https://example.com/data" }
browser_evaluate: { 
  script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" 
}

スクリーンショット

browser_navigate: { url: "https://example.com" }
browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" }
# スクリーンショットは --output-dir 経由で保存されるか、レスポンスで返されます

セキュリティに関する注意点

デフォルトではファイルシステムアクセスをワークスペースルートに制限しています
ホスト検証により、信頼できないドメインへのナビゲーションを防ぎます
サンドボックスはデフォルトで有効です（--no-sandbox の使用には注意してください）
サービスワーカーはデフォルトでブロックされます

トラブルシューティング

# ブラウザの更新
npx playwright install chromium

# デバッグモード
npx @playwright/mcp --headless=false --output-mode=stdout

# インストールの確認
playwright-mcp --version

リンク

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Playwright MCP Skill

Browser automation powered by Playwright MCP server. Control Chrome, Firefox, or WebKit programmatically.

Installation

npm install -g @playwright/mcp
# Or
npx @playwright/mcp

Install browsers (first time):

npx playwright install chromium

Quick Start

Start MCP Server (STDIO mode)

npx @playwright/mcp

Start with Options

# Headless mode
npx @playwright/mcp --headless

# Specific browser
npx @playwright/mcp --browser firefox

# With viewport
npx @playwright/mcp --viewport-size 1280x720

# Ignore HTTPS errors
npx @playwright/mcp --ignore-https-errors

Common Use Cases

1. Navigate and Extract Data

# MCP tools available:
# - browser_navigate: Open URL
# - browser_click: Click element
# - browser_type: Type text
# - browser_select_option: Select dropdown
# - browser_get_text: Extract text content
# - browser_evaluate: Run JavaScript
# - browser_snapshot: Get page structure
# - browser_close: Close browser

2. Form Interaction

1. browser_navigate to form URL
2. browser_type into input fields
3. browser_click to submit
4. browser_get_text to verify result

3. Data Extraction

1. browser_navigate to page
2. browser_evaluate to run extraction script
3. Parse returned JSON data

MCP Tools Reference

Tool	Description
`browser_navigate`	Navigate to URL
`browser_click`	Click element by selector
`browser_type`	Type text into input
`browser_select_option`	Select dropdown option
`browser_get_text`	Get text content
`browser_evaluate`	Execute JavaScript
`browser_snapshot`	Get accessible page snapshot
`browser_close`	Close browser context
`browser_choose_file`	Upload file
`browser_press`	Press keyboard key

Configuration Options

# Security
--allowed-hosts example.com,api.example.com
--blocked-origins malicious.com
--ignore-https-errors

# Browser settings
--browser chromium|firefox|webkit
--headless
--viewport-size 1920x1080
--user-agent "Custom Agent"

# Timeouts
--timeout-action 10000      # Action timeout (ms)
--timeout-navigation 30000  # Navigation timeout (ms)

# Output
--output-dir ./playwright-output
--save-trace
--save-video 1280x720

Examples

Login to Website

browser_navigate: { url: "https://example.com/login" }
browser_type: { selector: "#username", text: "user" }
browser_type: { selector: "#password", text: "pass" }
browser_click: { selector: "#submit" }
browser_get_text: { selector: ".welcome-message" }

Extract Table Data

browser_navigate: { url: "https://example.com/data" }
browser_evaluate: { 
  script: "() => { return Array.from(document.querySelectorAll('table tr')).map(r => r.textContent); }" 
}

Screenshot

browser_navigate: { url: "https://example.com" }
browser_evaluate: { script: "() => { document.body.style.zoom = 1; return true; }" }
# Screenshot saved via --output-dir or returned in response

Security Notes

By default restricts file system access to workspace root
Host validation prevents navigation to untrusted domains
Sandboxing enabled by default (use --no-sandbox with caution)
Service workers blocked by default

Troubleshooting

# Update browsers
npx playwright install chromium

# Debug mode
npx @playwright/mcp --headless=false --output-mode=stdout

# Check installation
playwright-mcp --version