Playwright CLI の入門: インストール、スキル、セッション管理、および一般的なコマンド

現在、ブラウザ自動化に Claude Code、GitHub Copilot、またはその他のコーディングエージェントを使用している場合、microsoft/playwright-cli は注目に値する新しいツールです。これは、「コマンドを手動で入力するために使用される」従来の意味でのブラウザガジェットではなく、エージェントをコーディングするための Playwright CLI であり、トークンオーバーヘッドの低減、軽量のコマンドインターフェイス、およびスキルワークフローとの統合を重視しています。

公式 README から判断すると、Playwright CLI の核となる考え方は非常に明確です。モデルコンテキストに多数のツールスキーマとページ構造を詰め込む MCP と比較して、CLI コマンド方式はよりコンパクトで、大規模なコードベース、テストタスク、ブラウザ自動化の間を行き来するエージェントワークフローにより適しています。

01 Playwright CLIとは何ですか?

playwright-cli は、Microsoft がオープンソース化した Playwright コマンドラインツールです。公式説明は「一般的な Playwright アクション用の CLI」です。主に次のことを実現するために使用されます。

ページを開いてブラウザを起動します
Playwright コードを記録して生成する
ページのスナップショットを取得し、要素の参照を取得します
スクリーンショット、PDF のエクスポート
コーディングエージェントと連携して自動テストとWebページ運用を行います。

現在の GitHub README では、これを非常に明確に位置づけています。コーディングエージェントを使用している場合は、Playwright MCP よりも CLI の方が適していることがよくあります。永続的な状態、豊富なイントロスペクション、長いエージェントループが必要な場合でも、MCP には価値があります。

言い換えれば、Playwright CLI は、人間のエンジニアが Web ページを手動でクリックするための単なるツールではなく、「AI コーディングアシスタントのためのブラウザ自動化インターフェイス」に近いものです。

02 そのメリットは何ですか?

1. エージェントのワークフローにさらに適した

公式READMEには、最初の利点がToken-efficientとして直接書かれています。データのページ全体を LLM コンテキストに強制的に組み込むのではなく、エージェントはより短く、より特殊なコマンドを通じてブラウザを操作できるようになります。

これはエージェントのコーディングにとって重要です。実際のプロジェクトでは、エージェントはブラウザを実行するだけでなく、コードの読み取り、ファイルの変更、テストの実行、ログの読み取りも行うためです。ブラウザツール自体が非常に「コンテキストを食べる」場合、全体の効率が大幅に低下します。

2. スキルを使って作業する能力

README では特に playwright-cli install --skills を強調しています。これは、公式がこれを単なるシェルツールとして捉えておらず、Claude Code や GitHub Copilot などのエージェントが直接利用できるスキルの入り口として設計していることを示しています。

ワークフロー自体がスキルに基づいて構築されている場合は、Playwright CLI への接続がより自然になります。

3. セッション管理が比較的完了している

Playwright CLI はセッションをサポートします。デフォルトでは、ブラウザプロファイルはメモリに保存され、同じセッション内の Cookie とストレージは複数の CLI 呼び出し間で保持されます。 --persistent が追加された場合、プロファイルをディスクにドロップし、ブラウザを再起動しても引き続き使用することもできます。

これにより、「コマンド 1 つでブラウザを開いて実行後に破棄する」というおもちゃのツールよりも実用的となり、継続的なデバッグやエージェントの長時間プロセスの実行にも適しています。

4. 視覚監視パネルが付属しています

playwright-cli show は README に含まれており、ダッシュボードを開いて実行中のすべてのブラウザーセッションを監視および制御するために使用されます。これは、ただやみくもに実行するのではなく、いつでも引き継ぎ、監視、トラブルシューティングを行うことができるため、エージェントがバックグラウンドで自動化されたタスクを実行するシナリオで役立ちます。

03 設置および環境要件

現在の GitHub README によると、Playwright CLI の基本要件は次のとおりです。

Node.js 18 以降
Claude Code、GitHub Copilot、またはその他のコーディングエージェント

インストールコマンドは以下のとおりです。

1
2


npm install -g @playwright/cli@latest
playwright-cli --help

ここには特に注意しなければならない非常に簡単な落とし穴があります。

現在推奨されている公式インストールは @playwright/cli です。
これを、npm 上の歴史的で非推奨となった古いパッケージ playwright-cli と混同しないでください。

つまり、実際にインストールする必要があるのは、古い時代からの同名の履歴パッケージではなく、スコープ指定されたパッケージです。

04 始め方

1. スキルをインストールする

コーディングエージェントに Playwright CLI を直接使用させたい場合は、最初にスキルをインストールすることが公式推奨されています。

1

playwright-cli install --skills

README には、Claude Code や GitHub Copilot などのツールがローカルにインストールされたスキルを使用することが明確に記載されています。

2. エージェントに CLI を直接呼び出させる

最初にスキルを処理したくない場合は、エージェントに CLI ヘルプ情報を直接読み取らせることもできます。

1
2


Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.
Check playwright-cli --help for available commands.

正式にはこの方法を「スキルレス操作」といいます。これは、スキルがプリインストールされていない場合でも、CLI 自己記述機能を通じてエージェントを駆動できることを意味します。

3. 最小限の工程を手動で体験

README には、開始するのに非常に適した一連の TodoMVC サンプルが含まれています。

1
2
3
4
5
6
7
8


playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Buy groceries"
playwright-cli press Enter
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli check e35
playwright-cli screenshot

このコマンドセットの価値は、Playwright CLI がどのように対話するかをすぐに理解できることです。

open はページを開く責任があります
type および press は入力を担当します
check 要素参照を使用したチェックボックスの操作
screenshot 結果を保存

05 `--headed`、セッションおよびモニタリングパネル

`--headed`

Playwright CLI はデフォルトではヘッドレスです。ブラウザウィンドウを直接表示したい場合は、--headed を open に明示的に追加する必要があります。

1

playwright-cli open https://playwright.dev --headed

これは、セレクター、ログインプロセス、検証コードの前後のインタラクティブな観察のデバッグに便利です。

session

公式 README ではセッションの使用法が強調されています。異なるセッションを使用して、異なるプロジェクトまたは Web サイトを分離できます。

1
2
3


playwright-cli open https://playwright.dev
playwright-cli -s=example open https://example.com --persistent
playwright-cli list

エージェントを長時間動作させたい場合は、環境変数を直接指定することもできます。

1

PLAYWRIGHT_CLI_SESSION=todo-app claude .

一般的に使用されるセッション管理コマンドには次のものがあります。

1
2
3


playwright-cli list
playwright-cli close-all
playwright-cli kill-all

で：

list はすべてのセッションをリストするために使用されます
close-all は、すべてのブラウザを通常どおり閉じるために使用されます。
kill-all は、すべてのブラウザプロセスを強制的に終了するために使用されます。

監視パネル

ブラウザでエージェントが現在何を行っているかを確認したい場合は、次のコマンドを実行できます。

1

playwright-cli show

README によると、このダッシュボードには主に 2 つのビューがあります。

セッショングリッド: すべてのアクティブなセッションをワークスペースごとに表示し、ライブビュー、URL、ページタイトルを表示します。
セッションの詳細: 単一セッションのリアルタイムインターフェイスを表示し、マウスとキーボードを引き継ぐこともできます

これにより、Playwright CLI は「コマンドラインが利用可能」になるだけでなく、比較的成熟した可観測性も備えます。

06 最初に覚えるべき一般的なコマンドはどれですか?

Playwright CLI を初めて使用する場合は、最初からすべてのコマンドを覚える必要はありません。最初に次の中心点を覚えておくだけで十分です。

ページとインタラクション

1
2
3
4
5
6
7


playwright-cli open [url]
playwright-cli goto <url>
playwright-cli click <ref>
playwright-cli fill <ref> <text>
playwright-cli type <text>
playwright-cli hover <ref>
playwright-cli press <key>

ページ構造を取得する

1
2
3
4


playwright-cli snapshot
playwright-cli snapshot <ref>
playwright-cli snapshot --depth=N
playwright-cli eval <func> [ref]

後続の多くの操作は要素参照 ref に依存するため、snapshot は重要です。通常は、最初にスナップショットを取得し、次に返された要素番号を使用してクリック、入力、チェック、またはスクリーンショットの取得を行います。

出力結果

1
2


playwright-cli screenshot
playwright-cli pdf

タブページ

1
2
3
4


playwright-cli tab-list
playwright-cli tab-new [url]
playwright-cli tab-close [index]
playwright-cli tab-select <index>

07 どんな人に向いていますか？

次のいずれかのシナリオに該当する場合は、Playwright CLI を試してみる価値があります。

E2E テストに Claude Code、Copilot、またはその他のコーディングエージェントを使用している
ブラウザ自動化インターフェイスをより軽量にしたいが、コンテキストに多くのページ構造を詰め込みたくない場合
複数のコマンド間で同じブラウザセッションを維持したい場合
エージェントが Web ページタスクを自動的に実行するとき、いつでも監視パネルを開いて進行状況を観察したいと考えています。

「ブラウザの自動化がコーディングエージェントとどのように効果的に連携できるか」が仕事の焦点である場合、Playwright CLI は従来の人による手動のデバッグ方法よりも便利である可能性があります。