結論
Claude Codeがコードを書きながら画面を確認する用途なら、Microsoftのplaywright-cliスキルを使います。Playwright MCPは、探索的な自動化、自己修復テスト、長時間の自律実行のために取っておきます。この線引きはMicrosoft自身が、playwright-cliとplaywright-mcpの両方のREADMEの冒頭近くに、同じ内容の箇条書きで書いています。
※私たちはClaude Code、Codex、Cursor向けの拡張機能をインストール数でランキングするディレクトリ、Skillselionを運営しています。本記事の数値は2026年9月11日時点のSkillselionカタログ（skills.shレジストリとGitHub）によるものです。英語の詳しい版はClaude Code向けPlaywright CLIとPlaywright MCPの比較ガイドにまとめています。
READMEは何と言っているか
READMEの「Playwright CLI vs Playwright MCP」節の要点は次の2つです（要約）。
- CLI：CLIの呼び出しは、大きなツールスキーマや冗長なアクセシビリティツリーをモデルのコンテキストに読み込まないため、トークン効率が良い。コードベースやテストと並行してブラウザを扱うコーディングエージェントに向く。
- MCP：永続的な状態や、ページ構造を詳しく調べながら進めるループでは今も有効。例として、探索的な自動化、自己修復テスト、ブラウザのコンテキストを保ち続ける価値がトークンコストを上回る長時間の自律ワークフローが挙げられている。
CLI側の原文は次のとおりです。
CLI invocations are more token-efficient: they avoid loading large tool schemas and verbose accessibility trees into the model context, allowing agents to act through concise, purpose-built commands.
出典：microsoft/playwright-cli README「Playwright CLI vs Playwright MCP」
playwright-mcpのリポジトリのREADMEも、コーディングエージェントを使っているならCLI+SKILLSの方が合うかもしれない、と冒頭で案内しています。
数字で比べる（2026年9月11日時点）
| playwright-cliスキル | Playwright MCPサーバー | |
|---|---|---|
| スキルとしてのインストール数 | 144,722 | 対象外（MCPサーバー） |
| GitHubスター | 13,091 | 36,836 |
| ライセンス | Apache-2.0 | Apache-2.0 |
| READMEが示す用途 | コーディングエージェント | 探索、自己修復、長時間の自律実行 |
スター数はMCPが約2.8倍ですが、エージェントにスキルとして入れられているのはCLIの方です。導入方法などはplaywright-cliスキルの掲載ページとPlaywright MCPサーバーの掲載ページで確認できます。
導入と基本のループ
npm install -g @playwright/cli@latest
playwright-cli install --skills
スキルが教えるのは、スナップショットを取ってから操作する流れです。
playwright-cli open https://example.com
playwright-cli snapshot
playwright-cli click e15
各コマンドはページのURL、タイトル、.playwright-cli/配下のYAMLスナップショットへのリンクを返し、アクセシビリティツリー自体はファイルに置かれたままです。重いページではplaywright-cli snapshot --depth=4で深さを絞るか、playwright-cli find "Add to cart"で必要なノードだけを探せます。SKILL.mdのフロントマターはplaywright-cli、npx、npmの3つのBashパターンを事前に許可しており、Microsoftのplaywright-cliリポジトリのスキルにはリクエストのモック、トレース、テスト生成などの参照ファイルが9本入っています。
セッションとログイン状態
CLIはデフォルトでヘッドレスで動き、ブラウザのプロファイルはメモリ上に置かれます。
- 画面を見ながら動かすなら
--headed - ブラウザを再起動してもCookieやストレージを残すなら
--persistent - プロジェクトごとにブラウザを分けるなら
-s=名前。READMEにはPLAYWRIGHT_CLI_SESSION=todo-app claude .でClaude Codeの実行全体を1つのセッションに固定する例があります -
playwright-cli showで、実行中のセッションをライブプレビュー付きのダッシュボードで一覧できます
--persistentを付けない場合、ブラウザを閉じるとCookieは消えます。ログイン状態はplaywright-cli state-save auth.jsonで保存し、state-loadで読み込めます。
MCP側を使う場合は、Playwright MCPのREADMEにClaude Code用のコマンドが載っています。
claude mcp add playwright npx @playwright/mcp@latest
同じタスクでMCPとCLIスキルを両方つなぐのは避けてください。CLIがコンテキストから外そうとしているツールスキーマを、Claudeが読み込むことになります。
同じ名前のスキルが少なくとも12個ある
インストール前に公開元（owner）を確認してください。2026年9月11日にSkillselionのカタログを検索すると、playwright-cliという名前のスキルが少なくとも12個見つかりました。Microsoft製が144,722インストールで、ほかの11個はどれも1,500インストール未満、合計でも2,495インストールです。主なものは次のとおりです。
| リポジトリ | インストール数 |
|---|---|
| microsoft/playwright-cli | 144,722 |
| screenciリポジトリ内のplaywright-cliスキル | 1,498 |
| testdino-hq/playwright-skill | 463 |
| Archonリポジトリ内のplaywright-cliスキル | 255 |
| GitLabのaiリポジトリ内のplaywright-cliスキル | 137 |
| ほか7個 | 各50以下 |
同じ検索には、紛らわしいものがもう2つ出てきます。
- Microsoftのplaywright-cliリポジトリにはリポジトリ保守用のdevスキル（4,378インストール）も入っています。中身はPlaywrightのバージョン更新とリリース準備の手順なので、自分のアプリの開発には役立ちません。
- OpenAIのopenai/skillsに含まれるplaywrightスキル（6,314インストール）も内部でplaywright-cliを使うため、Codexでこのスキルを入れた場合も同じCLI方式で動きます。
用途によっては別の選択肢
- Pythonのスクリプトをリポジトリに残したい場合は、Anthropicのwebapp-testingスキル（151,377インストール）が合います。ネイティブのPython Playwrightスクリプトを書かせ、開発サーバーを先に起動する
with_server.pyヘルパーも同梱しています。 - テストスイートを継続的に保守するなら、currents.devのplaywright-best-practicesスキル（79,834インストール）が、テストの作成、デバッグ、保守に加えて、不安定なテストの修正やCIでのシャーディングも扱います。
- Chromeの中で起きている不具合を調べたい場合は、Chrome DevTools MCPでのデバッグ手順ガイドとChrome系MCPサーバーのランキングを参照してください。
まとめ
- コードを書きながらの画面確認はplaywright-cliスキル、ブラウザ操作そのものが仕事ならPlaywright MCP
- 同じタスクで両方をつながない
- インストール前に、公開元（owner）がmicrosoftか確認する
テスト系のツール全体はテスト・レビュー向けスキルのインストール数ランキングとテスト・レビューのカテゴリ一覧にまとめています。スキルとMCPの違いを一般論として整理したい場合は、Claude SkillsとMCPの比較ガイドもどうぞ。