ゆっくりテックウォッチ Advent Calendar 2025

【Playwright MCP】LLMにブラウザを操作させる最新技術！スクリーンショット不要で高速・確実

Last updated at 2025-12-22Posted at 2025-12-22

この記事はゆっくりテックウォッチ Advent Calendar 2025 の 3 日目の記事です。

個人開発の「ゆっくり動画スタジオ」でGitHub人気リポジトリの解説動画を自動生成しており、その分析データをもとに本記事も生成しています。

TL;DR

スクリーンショット不要のアクセシビリティツリーベースで高速・確実なブラウザ操作
VS Code、Claude、Cursorなど20以上のMCPクライアントに対応
ワンライン設定でLLMにブラウザ操作機能を追加できる

このリポジトリについて

LLMにブラウザ自動化機能を提供するMCPサーバー

Model Context Protocol（MCP）サーバーとして動作し、Playwrightを使ってLLMがWebページと対話できるようにします。スクリーンショット不要で、アクセシビリティツリーベースの構造化データで動作するため、高速かつ確実にブラウザを操作できます。

項目	内容
リポジトリ	microsoft/playwright-mcp
スター数	23,836
言語	TypeScript
ライセンス	Apache-2.0
作成日	2025-03-21

なぜ今注目されているのか

スクリーンショットベースのLLMブラウザ操作は遅くて不安定

LLMにブラウザを操作させたいと思ったことはありませんか？従来のスクリーンショットベースのアプローチでは、画像解析に依存するため処理が遅く、精度も不安定でした。さらにビジョンモデルのコストも問題でした。

アクセシビリティツリーで高速・確実なブラウザ操作を実現

Playwright MCPは、スクリーンショットの代わりにアクセシビリティツリー（Webページの構造を階層的に表現したデータ）を使用します。これにより、ビジョンモデル不要で高速・確実なブラウザ操作が可能になりました。Microsoftが開発・メンテナンスしているという信頼性も大きな魅力です。

スター推移

2025年3月21日の公開直後から急成長。公開初週で5,000スターを突破し、その後も安定して成長を続けています。MCPの普及とともにAIツールへのブラウザ機能追加ニーズが高まり、現在は23,000スターを超えています。

主な機能・特徴

1. スクリーンショット不要のアクセシビリティツリーベース

従来のLLMブラウザ操作はスクリーンショットを解析する方式が主流でしたが、Playwright MCPはアクセシビリティツリーを使用します。

ピクセルベースではなく構造化データで動作：Webページの構造を理解してから操作
ビジョンモデル不要で高速・確実：画像解析のコストと遅延がゼロ
スクリーンリーダーと同じ仕組み：アクセシビリティ標準に準拠した信頼性

2. 20以上のMCPクライアントに対応

主要なAIツールのほぼすべてに対応しています：

VS Code / Cursor / Windsurf：ワンクリックインストール
Claude Desktop / Claude Code：MCP設定で即座に利用可能
Goose / Warp / LM Studio：標準設定で動作
JetBrains IDE：GitHub Copilot経由で利用可能

3. ワンライン設定でLLMにブラウザ操作機能を追加

設定は驚くほど簡単です：

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

これだけで、LLMがWebページのクリック、入力、スクロール、スクリーンショット撮影などを実行できるようになります。

4. ヘッドレス・ヘッド付き両対応で柔軟な運用

ヘッド付きモード（デフォルト）：ブラウザウィンドウを表示して操作を確認
ヘッドレスモード：バックグラウンドで高速に処理
Docker対応：コンテナ環境での運用も簡単
ブラウザ拡張連携：既存のブラウザセッションに接続可能

技術スタック

TypeScript + Playwright + MCP SDKの堅牢な組み合わせ

分類	技術
主要技術	TypeScript, Node.js, Playwright
フレームワーク/ライブラリ	Model Context Protocol SDK, Playwright Core
インフラ	Docker, SSE Transport, HTTP Server
連携サービス	VS Code, Cursor, Claude Desktop, Goose, Windsurf, Warp

ユースケース

ユースケース1: AIスタートアップの開発者

背景: LLMベースのWebスクレイピングサービスを開発中のBさん。スクリーンショットベースのブラウザ操作を使っていたが、精度が低く遅い。

課題: ビジョンモデルのコストが高く、操作の信頼性も不安定。

解決策: Playwright MCPに切り替えてアクセシビリティツリーベースに移行。

結果: 処理速度が3倍向上し、エラー率が80%減少。コストも大幅削減。

ユースケース2: QAエンジニア

背景: E2Eテストの自動化を進めているCさん。Playwrightでテストコードを書いていたが、メンテナンスが大変。

課題: テストシナリオの変更のたびにコード修正が必要。

解決策: Playwright MCPを使ってLLMに自然言語でテストシナリオを書かせる。

結果: テスト作成時間が50%削減。非エンジニアもテストケース作成可能に。

競合との比較

スクリーンショットベースのLLMブラウザ操作との違い

観点	Playwright MCP	スクリーンショットベース
速度	アクセシビリティツリーで高速	スクリーンショット解析で遅い
精度	構造化データで確実	画像解析に依存し不安定
コスト	ビジョンモデル不要で低コスト	ビジョンモデルが必要で高コスト
柔軟性	Playwright APIの全機能が利用可能	画像ベースで操作が限定的

Playwright MCPを選ぶべき場面: Web操作の速度・精度・コストを重視する場合。MCP対応ツールを使っている場合。

始め方

VS Codeでのワンクリックインストール

公式READMEのインストールバッジからワンクリックでセットアップ可能です。

Claude Codeでのセットアップ

claude mcp add playwright npx @playwright/mcp@latest

標準設定（JSON）

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

詳細は公式ドキュメントを参照してください。

まとめ

Playwright MCPはスクリーンショット不要のアクセシビリティベースで高速・確実
20以上のMCPクライアントで即座に利用可能
ワンライン設定で導入が極めて簡単
Microsoft製で信頼性と継続的メンテナンスが保証

LLMにブラウザ機能を追加する最も簡単で確実な方法です。あなたのLLMツールに今すぐPlaywright MCPを追加してみてください！

🎬 ゆっくり解説動画を配信しています

YouTubeチャンネル「ゆっくりテックウォッチ」では、GitHub の注目リポジトリをゆっくり解説しています。

この記事で紹介した Playwright MCP の解説動画も公開していますので、ぜひご覧ください！

チャンネル登録 よろしくお願いします！