浏览器自动化必须知道CDP协议

写在前面

之前搞自动化页面，因为有一个获取网络日志的需求，让我发现了新的知识盲区——CDP协议。

什么是CDP协议

众所周知F12能够打开开发者工具进行调试，开发者工具即DevTools大家应该都知道，那么Chrome DevTools就是用的CDP协议来跟浏览器进行交互的调试等一系列操作的。

CDP是通过RESTful API提供了对浏览器内部运行情况的访问，可以通过这些API来控制Chrome浏览器的行为，来做到与DevTools类似的功能：获取页面信息、监控网络活动、执行JS等操作。

使用CDP协议

这里我使用python+selenium来进行操作。

pip install selenium

注意：selenium在版本4之后才支持CDP功能。

下面是一个很简单的通过CDP获取截屏的示例代码：

from selenium import webdriver
from webdriver_manager.chrome import ChromeDriverManager
import json

driver = webdriver.Chrome(ChromeDriverManager().install())

# 获取页面信息
response = driver.execute_cdp_cmd("Page.captureScreenshot", {})
screenshot_data = response["data"]
screenshot = screenshot_data.encode('utf-8')

# 保存截图
with open("screenshot.png", "wb") as f:
    f.write(base64.b64decode(screenshot))

# 关闭浏览器
driver.quit()

代码中，最核心的方法就是execute_cdp_cmd()，它支持接收两个参数，第一个就是CDP的方法名，第二个参数就是传入给CDP方法的参数字典。用法很简单，关于CDP以及可用的更多的操作的指令，参考：https://chromedevtools.github.io/devtools-protocol/

我们可以看到，示例中的截图就在Page下

从这里我们可以看到，CDP是有四个概念的

概念	说明
Domain	类别，上述例子中Page就是这个类别
Method	CDP的方法，即上述例子中Page.captureScreenshot
Event	浏览器中产生的事件，该事件可以由CDP产生，也可以由浏览器中自身产生，上述例子并未体现。比较好的例子就是网络日志便是事件。
Type	数据类型，是一种JSON的格式，规定了入参出参的格式

只要想用开发者工具的一些能力来集成到代码里，在这个文档中都可以找到。