00:00:00Playwright CLIは、コーディングエージェントでPlaywrightを使用するための最新の手法です。
00:00:04ローカルストレージやセッションストレージの管理、スナップショットの作成、タブの操作など、
00:00:09Playwrightエンジンの全機能をターミナルから直接利用できます。
00:00:12しかし、Playwright MCPサーバーの代わりにこれを使う理由は何でしょうか？
00:00:17そもそも、なぜ以前はMCPサーバーだったツールから、次々とCLIが作られているのでしょうか？
00:00:22チャンネル登録をして、さっそく詳細を見ていきましょう。
00:00:24まずは、Playwright CLIとMCPサーバーの両方を、一つのシンプルなタスクでテストしてみます。
00:00:31開発中のTwitter（X）動画ダウンロードツールのテストを、エージェントに手伝ってもらいます。
00:00:35手順はこうです。
00:00:36ツイートのリンクを取得して貼り付け、動画を抽出します。その後、10秒待機してから
00:00:40スクリーンショットを撮り、最後にローカルストレージをクリアします。
00:00:45これは、次のエージェントがクリーンな状態で作業を始められるようにするためです。
00:00:48最初に、Claude CodeでPlaywright CLIを試してみましょう。インストールが済んでいれば、
00:00:54このようにスキルが利用可能になっているはずです。
00:00:56消費トークンがわずか68トークンであることに注目してください。
00:00:59では、このプロンプトを入力します。分かりやすくするために、
00:01:03Playwright CLIスキルを明示的に使うよう指示しています。
00:01:06実行すると、スキルを読み込み、URLをテキストボックスに入力して
00:01:11「Extract Video」をクリックします。その後、10秒間待機します。
00:01:13スクリーンショットを撮り、ストレージをクリアして、ブラウザを閉じました。
00:01:17完了です。スクリーンショットの保存先が表示されています。確認してみると、
00:01:21動画が正常にダウンロードされているのが分かります。
00:01:24全体のトークン消費量は、約16%でした。
00:01:27次に、同じことをMCPサーバーを使って試してみましょう。
00:01:29「mcp」コマンドで、インストールされているか確認できます。
00:01:33実行する前に、現在のコンテキスト量を見てみましょう。
00:01:35上にスクロールすると、すでにコンテキストの15%が使用されています。これは、
00:01:41約3.6Kトークンを消費するMCPツール群がすべて読み込まれているからです。
00:01:46それを踏まえて、先ほどと同じプロンプトを使用します。
00:01:50今回はCLIスキルの代わりに、Playwright MCPサーバーのツールを使います。
00:01:55MCPサーバーが起動し、新しいブラウザが開きました。
00:01:59リンクが入力欄に貼り付けられました。
00:02:01次にボタンをクリックします。
00:02:02気づいたのですが、MCPサーバーはCLIよりも多くの権限を求めてきますね（問題はありませんが）。
00:02:08スクリーンショットの撮影でエラーが出ました。おそらく同じ名前のファイルが
00:02:12すでに存在しているせいかもしれません。
00:02:13MCPサーバーで再試行し、ファイル名を変えてみましたが、
00:02:17それでもスクリーンショットの書き出しで何度か失敗しました。
00:02:22ようやく終了しました。
00:02:23スクリーンショット以外はすべて実行できました。
00:02:26コンテキストを確認すると、35K、つまり18%を消費しています。
00:02:32CLIよりわずかに多い程度ですが、その大部分はMCPツールの定義によるものです。
00:02:37実は、これと同じタスクをさらに少ないコンテキストで行う方法があります。
00:02:43それについては、動画の後半でお話しします。
00:02:45これはあくまで一例ですし、タスクによってはMCPサーバーの方が
00:02:51トークンを節約できる場面もあるかもしれませんが、基本的にはCLIの方が有利でしょう。
00:02:5616%と18%の差は大したことない、と思うかもしれません。
00:03:02しかし、CLIにはMCPサーバーに勝る他の利点もあります。
00:03:06デフォルト設定では、Playwright MCPサーバーはすべてのツールを公開していません。
00:03:11実際、PDF生成やトレース機能などを使いたい場合は、
00:03:16コンテキストを大量に消費するため、明示的に有効化する必要があります。
00:03:19一方、CLIにはそのような制限はありません。
00:03:22最初からすべての機能にアクセスできます。
00:03:25また、CLIはエージェントだけでなく人間にとっても便利です。
00:03:29繰り返し行う作業やE2Eテストのために、簡単なBashスクリプトを作成しておけば、
00:03:34人間が手動で結果を確認することも、エージェントに実行させることも可能です。
00:03:39かといってMCPサーバーが不要なわけではありません。もしあなたが、
00:03:44ブラウザ、デスクトップ、モバイルなど、端末を問わず動作するエージェントループを作りたいなら、
00:03:49MCPサーバーが最適です。これはツールにアクセスするための標準プロトコルだからです。
00:03:54また、PlaywrightはJSやTypeScriptを動かすため、
00:03:59JavaScriptランタイムをサポートするあらゆる環境で動作させることができます。
00:04:03さらに、CLIがバックグラウンド実行を想定したヘッドレスモードなのに対し、
00:04:09MCPサーバーはデフォルトでヘッド付きモード（画面あり）で動作します。
00:04:13MCPサーバーでトークンを節約したい場合は、
00:04:17特定のツールを無効にするなどの設定が可能です。
00:04:20ただ、もし究極にトークン消費を抑えたいのであれば、
00:04:26Playwright CLIすら使わない方がいいかもしれません。なぜなら、Rust製のCLIを持つ
00:04:32「Agent Browser」があるからです。これはPlaywrightを内蔵しつつ、より高速で、
00:04:38先ほどの例のように、より少ないトークンで動作するように設計されています。
00:04:39次回の動画では、このAgent Browserについて詳しく解説します。
00:04:43エージェントのブラウジング能力をさらに引き出しましょう。