CDP入門 01 CDPとは?Seleniumとの違い,

Automation

概要

ブラウザ操作の自動化というと、Python+SeleniumやRPAツールを使う方法が一般的です。
しかし、環境によっては追加ツールをインストールできないケースもあります。

今回、そうした制約のある環境でブラウザ自動化を行う方法として
Chrome DevTools Protocol(CDP) という仕組みを見つけました。

CDPは、ChromeやEdgeの開発者ツール(DevTools)で利用されているプロトコルで、
開発者ツールで行うような操作を外部から実行できる仕組みです。

Windows環境では追加ツールなしで利用できるため、
制約のある環境でもブラウザ自動化が可能になる方法の一つです。

この記事では次の内容を整理します。

  • CDPがどんな用途に向いているのか
  • CDPとは何か
  • Selenium / Playwrightとの違い

背景

CDPを調べ始めたきっかけは、会社PCの環境制約でした。

社内PCはポリシーでかなり厳しく制御されており、

  • Pythonのインストール
  • Seleniumの導入
  • 新しいツールの追加

といったことが簡単にはできません。

もちろん申請すれば導入は可能ですが、
そのために説明・承認といった手続きを進めるのが少し面倒です。

そこで

Windows標準環境だけでブラウザ自動化できないか

と調べている中で見つけたのが CDP(Chrome DevTools Protocol) でした。

CDP(Chrome DevTools Protocol)とは

CDP(Chrome DevTools Protocol) は、
ChromeやEdgeなどのChromium系ブラウザを外部から操作するためのプロトコルです。

Chromeの開発者ツール(DevTools)は、内部的にこのCDPを利用してブラウザと通信しています。

つまりCDPを利用するということは、

DevToolsがブラウザに送っている命令を直接送る

というイメージに近いです。

CDPの基本的な利用手順は次の通りです。

  1. ブラウザをリモートデバッグモードで起動
  2. WebSocketでブラウザに接続
  3. JSON形式のコマンドを送信
  4. 実行結果を受信

例えばブラウザ上でJavaScriptを実行する場合、次のようなコマンドを送信します。

{
  "id": 1,
  "method": "Runtime.evaluate",
  "params": {
    "expression": "document.title"
  }
}

このようにCDPでは

JSON形式のコマンドでブラウザ内部APIを呼び出す

という形で操作を行います。

最初は少し低レイヤーに感じますが、
仕組み自体は比較的シンプルです。

Selenium / Playwright との違い

ブラウザ自動化ツールとしては、
SeleniumやPlaywrightがよく利用されています。

CDPはこれらとは少し立ち位置が異なります。

Selenium

Seleniumは WebDriver という仕組みを利用してブラウザを操作します。

特徴としては

  • 多くのプログラミング言語に対応
  • Chrome / Edge / Firefoxなど複数ブラウザに対応
  • UI操作の自動化に強い

といった点があります。

テスト自動化などでは現在でも広く使われています。

ただし、Seleniumはブラウザの外側から操作する仕組みのため、

ブラウザ内部の情報に直接アクセスするのが難しい場合があります。

Playwright

PlaywrightはMicrosoftが開発している比較的新しいブラウザ自動化ツールです。

特徴としては

  • 自動待機(Auto Wait)がある
  • 複数ブラウザに対応
  • テスト用途で使いやすい

といった点があります。

Playwrightは内部的にCDPを利用する場合もありますが、
ユーザーはCDPを直接扱う必要はありません。

高レベルのAPIを使ってブラウザ操作ができるようになっています。

CDP

CDPはこれらのツールとは少し性格が違います。

CDPの特徴は次の通りです。

  • ブラウザ内部APIを直接呼び出す
  • WebSocketで通信する
  • 低レイヤーの操作が可能

イメージとしては

Selenium / Playwright → 高レベルの自動化ツール
CDP → ブラウザ内部API

という関係になります。


CDPの強み

CDPの大きなメリットは、
ブラウザ内部機能に直接アクセスできることです。

代表的なポイントをいくつか紹介します。


DevToolsと同じ機能が使える

CDPはChrome DevToolsが利用しているプロトコルなので、
DevToolsで行える操作の多くをプログラムから実行できます。

例えば

  • DOM取得
  • JavaScript実行
  • Networkログ取得
  • Consoleログ取得
  • Performance情報

などです。

普段DevToolsで確認している情報を
そのままスクリプトから取得できるイメージです。

DOM操作が柔軟

CDPではブラウザ上でJavaScriptを実行できるため、DOM操作も柔軟に行えます。

例えば次のような操作が可能です。

  • 要素取得
  • クリック
  • フォーム入力
  • 属性変更

document.querySelector("#login").click()

これはDevToolsのConsoleで実行するのと同じ動きになります。


Networkログを取得できる

CDPの特徴的な機能の一つが Network情報の取得です。

取得できる情報の例

  • APIリクエスト
  • レスポンス内容
  • HTTPヘッダ
  • 通信タイミング

DevToolsの Networkタブの情報を取得できるイメージです。

Webアプリの調査やデバッグにも役立ちます。

CDPが向いている用途

CDPは一般的なテスト自動化よりも、
次のような用途で便利だと感じています。

運用作業の自動化

例えば

  • 管理画面操作
  • 定期的なデータ取得
  • 社内システム操作

など、ブラウザ操作をスクリプト化したい場合です。


通信やAPIの調査

CDPではNetworkログを取得できるため

  • Webアプリの通信解析
  • API調査
  • デバッグ

といった用途にも使えます。

DevToolsで見ている情報を
プログラムから取得できる点が便利です。

まとめ

CDP(Chrome DevTools Protocol)は、
ChromeやEdgeなどのChromium系ブラウザを外部から操作するためのプロトコルです。

SeleniumやPlaywrightのような自動化ツールとは異なり、

ブラウザ内部APIを直接操作できる

という特徴があります。

そのため

  • DevToolsと同等の機能を利用できる
  • DOM操作を柔軟に行える
  • Networkログを取得できる

といったメリットがあります。

次回は、CDPを利用するための準備として
ブラウザをCDPモードで起動する方法を整理します。


このシリーズ

次の記事