Playwright MCP を試す
「Playwright MCP」を試したのでまとめました。
1. Playwright
「Playwright」は、Microsoft が開発した Web ブラウザの自動化ツール です。
2. Playwright の用途
「Playwright」の主な用途は、次のとおりです。
2-1. E2E (エンドツーエンド) テスト
ユーザーが行う操作 (ログイン、商品購入など) を自動でテストします。
・ECサイトで商品をカートに追加して決済完了するまでを自動テスト
・入力フォームが正しく動作するか確認
・多言語対応ページの表示確認
2-2. ビジュアルリグレッションテスト
UIの見た目が変更されていないかチェックします。
・コード変更後に、画面崩れを自動検出
・多言語・多ブラウザの対応確認
・ページ全体のスクリーンショットを毎回比較
2-3. Webスクレイピング
Webサイトからデータを自動で取得します。
・不動産サイトから物件情報を定期的に収集
・ニュースサイトから記事タイトルとURLを抽出
・為替レートや株価のデータ取得
2-4. 自動操作 (ボット的用途)
人の代わりにブラウザ操作を実行します。
・Web上のフォームを大量に自動送信 (アンケートなど)
・商品の在庫監視 → 在庫復活時に通知
・競合サイトの価格調査を自動化
3. Playwright を試す
(1) Pythonの仮想環境の作成。
(2) パッケージのインストール。
pip install playwright
playwright install(3) コードの作成。
Playwrightのサイトでスクリーンショットを撮るコードは、次のとおりです。
・hello.py
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False) # Chrome系のブラウザを開く
page = browser.new_page() # 新しいタブを開く
page.goto("https://github.com/microsoft/playwright") # サイトにアクセス
page.screenshot(path="sample.png") # スクリーンショットを撮る
browser.close() # 閉じる(4) コードの実行。
python hello.py・sample.py
4. Playwright MCP
「Playwright MCP」は、「Playwright」を用いたブラウザ自動化機能を提供するMCPサーバです。
特徴は、次のとおりです。
・高速かつ軽量
ピクセルベースの入力ではなく、Playwrightのアクセシビリティツリーを使用
・LLM対応
ビジョンモデルは不要で、純粋に構造化データのみで動作
・決定論的なツールアプリケーション
スクリーンショットベースのアプローチにありがちな曖昧さを回避
5. Playwright MCP を試す
(1) 「Claude Desktop」の「claude_desktop_config.json」に以下の設定を追加。
・claude_desktop_config.json
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": [
"-y",
"@automatalabs/mcp-server-playwright"
]
}
}
}(2) 「Claude Desktop」を再起動。
(3) 指示。
playwrightを使ってブラウザで「https://github.com/microsoft/playwright」を開いて
コメント