今回はAIコーディングエージェントとの連携を前提に設計されたブラウザ自動操作ツール「Playwright CLI」をご紹介します。
目次
はじめに
生成AIモデルを使ったコーディングエージェントの活用により、ソフトウェア開発の様々な場面で、より高い生産性を期待できるようになりました。名称のイメージから想起される、コーディングの補助だけではなく、設計やテストなどの工程でも活用されるケースが増えているようです。
E2EテストフレームワークのPlaywrightも、こうした流れに対応する形でコーディングエージェントとの連携を強化しています。その中で提供されているPlaywright CLIは、AIエージェントがブラウザを自動操作するための軽量なインターフェースとして設計されたツールです。本記事では、Playwright CLIの役割や特長、具体的な使い方を紹介します。
Playwright CLIとは
PlaywrightはWebアプリケーションのためのE2Eテストフレームワークで、テストの作成や実行に役立つ便利なツールセットです。Playwrightの詳細は下記の記事で紹介しています。
Playwright CLIはPlaywrightの機能をベースにしていますが、E2Eテストの実行ツールではありません。コーディングエージェントと協調しながら、ブラウザ操作を効率的かつ低コストで行うための操作インターフェースとして設計されています。
以降では、Playwright CLIの役割や特長を紹介していきます。
Playwright CLIの役割
Playwright CLIはコマンドプロンプトからブラウザの自動操作を可能にするコマンドラインインタフェースです。コマンドベースでクリックやフォーム入力、画面遷移、スクリーンショット取得などの操作を実行できるため、コーディングエージェントが明確な手順でブラウザ操作を細かく指示できます。
AIエージェントがPlaywrightのブラウザ操作機能を利用する手段としては、Playwright MCPもあります。Playwright MCPは、MCP（Model Context Protocol）を介してAIエージェントにブラウザ操作機能を提供し、AIエージェントが入力されたプロンプトの内容に応じて、操作手順を自律的に組み立てて実行します。ただし、AIエージェントの判断に依存するため、細かな操作の制御や再現性が求められるタスクには適していません。また、ツール応答としてページのDOM構造やアクセシビリティ情報が生成AIモデルへの入力データに含まれるため、トークン消費が大きくなりやすい傾向があります。
一方、Playwright CLIでは、コーディングエージェントがコマンドで操作手順を1ステップずつ明示的に指示します。ページ内容は生成AIモデルへの入力データには含まれず、必要に応じてファイルから参照する方式のため、トークン消費を最小限に抑えられます。同じコマンドを実行すれば同じ操作が再現されるため、繰り返し実行が必要なルーティンワークや回帰テストをコーディングエージェントに任せる用途に適しています。
| 観点 | Playwright CLI | Playwright MCP |
|---|---|---|
| 主体 | コーディングエージェントがコマンドで指示 | AIエージェントが自律的に判断・実行 |
| 再現性 | 高い（同じコマンド＝同じ操作） | 低い（プロンプト依存で結果が揺れやすい） |
| トークン消費 | 小さい（ページ内容はファイル参照） | 大きい（DOM・アクセシビリティ情報が入力データに含まれる） |
| 適した用途 | 回帰テスト、ルーティンワーク、手順が明確なタスク | 探索的な操作、プロンプトベースの柔軟なタスク |
| 制御の粒度 | 細かい（1操作ずつ制御可能） | 粗い（AIに委任） |
Playwright CLIの機能
細かなブラウザ操作
Playwright CLIでは、ページ内要素のクリックやフォームへの入力など最小限の操作がコマンドに対応付けられており、それらを組み合わせれば複雑な手順を要するブラウザ操作を実現できます。他にもブラウザのタブ操作やスクリーンショット取得などテストにも利用できるコマンドを備えており、再現性のあるブラウザ自動操作を繰り返すタスクに活用できます。
これらのコマンドは、コーディングエージェントを通して間接的に実行できます。GitHub CopilotやClaude Codeが認識できるスキルとして登録することで、ブラウザ操作を伴うプロンプトで利用されます。
スナップショットによるページ解析
Playwright CLIでは、操作前後にsnapshotコマンドを実行することで、ページ構造をYAML形式で出力できます。これにより、DOM構造やCSSセレクタを直接扱う必要がなく、エージェントによる操作の再現性が高まります。
ブラウザの実行管理
Playwright CLIでは、実行中のブラウザを管理するダッシュボードを利用できます。ダッシュボードではブラウザのプレビューやセッション状態を確認でき、同時並列での操作管理が可能です。
また、ブラウザごとにセッションや設定を定めて実行させたり、実行中のブラウザのCookieやローカルストレージを保存して復元したりと、柔軟な実行管理が可能です。
Playwright CLIを使ってみよう
導入手順
Playwright CLIは下記のコマンドでインストールできます。インストール後はヘルプコマンドを実行して、問題なく動作するか確認しておきましょう。
npm install -g @playwright/cli@latest
playwright-cli --helpまた、コーディングエージェントから利用するには下記のコマンドでスキルとしてインストールしましょう。
playwright-cli install --skillsコンソールからPlaywright CLIを使う
Playwright CLIはコンソールから直接実行することができます。例えば、下記のコマンドをコマンドプロンプトなどで実行して動作を確認してみましょう。
playwright-cli open https://demo.playwright.dev/todomvc/ --headed
playwright-cli type "Water flowers"
playwright-cli press Enter
playwright-cli check e21
playwright-cli closeブラウザが立ち上がって新しいページを開き、フォーム入力を行ってから最後にページを閉じるブラウザ操作が確認できます。
なお、複数ブラウザを同時に実行したい場合、sオプションでラベルを付与することでブラウザのインスタンスを区別して操作できるようになります。
playwright-cli -s=demo open https://demo.playwright.dev/todomvc/
playwright-cli -s=demo type "Water flowers"エージェント経由でPlaywright CLIを使う
次はVSCode上からコーディングエージェントを経由してPlaywright CLIを使ってみましょう。VSCodeでGitHub Copilot Chatを開き、次のプロンプトを入力してみましょう。
Playwrightのスキルを使って、https://demo.playwright.dev/todomvc/ をテストしてください。Playwright CLIのコマンドを使ったテストが提案されていることが確認できます。
テスト実行前にはsnapshotコマンドを利用して、ページ内容の解析結果をYAML形式で出力しています。ページ内の要素に番号付けを行い、特定の要素の操作が行えるようにしています。
### Page
- Page URL: https://demo.playwright.dev/todomvc/#/
- Page Title: React • TodoMVC
- Console: 1 errors, 0 warnings
### Snapshot
- generic [ref=e1]:
- generic [ref=e2]:
- text: This is just a demo of TodoMVC for testing, not the
- link "real TodoMVC app." [ref=e3] [cursor=pointer]:
- /url: https://todomvc.com/
- generic [ref=e6]:
- heading "todos" [level=1] [ref=e7]
- textbox "What needs to be done?" [active] [ref=e8]
- contentinfo [ref=e9]:
- paragraph [ref=e10]: Double-click to edit a todo
- paragraph [ref=e11]:
- text: Created by
- link "Remo H. Jansen" [ref=e12] [cursor=pointer]:
- /url: http://github.com/remojansen/
- paragraph [ref=e13]:
- text: Part of
- link "TodoMVC" [ref=e14] [cursor=pointer]:
- /url: http://todomvc.com例えば、下記のコマンドは要素「e8」（テキストフィールド）に「Buy groceries」を入力する操作が行われます。
playwright-cli fill e8 "Buy groceries"さいごに
Playwright CLIは、AIコーディングエージェントとの連携を前提に設計されたブラウザ自動操作ツールです。少ないコンテキスト量でブラウザ操作を指示できるため、操作の再現性やスケールに優れています。
本格的なE2EテストはPlaywright Testに任せつつ、その前段・補助としてPlaywright CLIを組み合わせることで、より効率的な開発・検証フローを構築できるでしょう。
メシウスではさまざまなWebアプリケーションフレームワークと一緒に使えるJavaScriptライブラリを提供しています。
無償のトライアル版や、ブラウザ上で手軽に試せるデモアプリケーションも公開しているので、こちらも是非ご覧ください。