Selenium 使用 CDP 获取和操作 DOM 树

Selenium可以通过Chrome DevTools Protocol（CDP）来获取和操作DOM树。CDP是一组用于与Chrome浏览器通信的API。以下是使用Selenium和CDP获取和操作DOM树的步骤：

导入必要的库和模块：

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.action_chains import ActionChains
from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.options import Options

启动Chrome浏览器并配置CDP：

chrome_options = Options()
chrome_options.add_argument('--headless')  # 以无头模式启动浏览器
chrome_options.add_argument('--disable-gpu')
chrome_options.add_argument('--remote-debugging-port=9222')  # 指定CDP端口

service = Service('path_to_chromedriver')
driver = webdriver.Chrome(service=service, options=chrome_options)

在上面的代码中，path_to_chromedriver应替换为你的ChromeDriver可执行文件的路径。

连接到CDP：

capabilities = DesiredCapabilities.CHROME
capabilities['goog:chromeOptions'] = {'debuggerAddress': 'localhost:9222'}
driver = webdriver.Chrome(service=service, options=chrome_options, desired_capabilities=capabilities)

获取DOM树：

dom = driver.execute_cdp_cmd('DOM.getDocument', {})
print(dom)

execute_cdp_cmd方法允许您执行CDP命令。在上面的代码中，我们执行了DOM.getDocument命令来获取整个DOM树，并将结果打印出来。

操作DOM树：

# 通过CSS选择器查找元素
element = driver.execute_cdp_cmd('DOM.querySelector', {'nodeId': dom['root']['nodeId'], 'selector': 'CSS_SELECTOR'})
print(element)

# 获取元素的文本内容
text = driver.execute_cdp_cmd('DOM.getOuterHTML', {'nodeId': element['nodeId']})
print(text)

在上面的代码中，我们使用DOM.querySelector命令通过CSS选择器查找元素，并使用DOM.getOuterHTML命令获取元素的文本内容。

关闭浏览器：

driver.quit()

上述代码演示了如何使用Selenium和CDP获取和操作DOM树。您可以根据您的实际需求进行修改和扩展。