要素の取得

CDP では CDPElement が中心です。BiDi 側に同等の高レベル要素 API はまだ薄いので、要素操作が必要なら CDP、または UpgradeBiDiPlus を使います。

セレクタの種類（CDP）

メソッド	説明
`getElementByID`	`id` 属性
`getElementByQuery` / `getElementsByQuery`	CSS セレクタ
`getElementByXPath` / `getElementsByXPath`	XPath

Dim t As CDPContext
Set t = ShSetting01_StartBrowser.StartCDPModeContext("https://example.com")

Dim el As CDPElement
Set el = t.getElementByID("submit")
Set el = t.getElementByQuery("form input[name='q']")
Set el = t.getElementByXPath("//button[contains(.,'送信')]")

Dim list As Collection
Set list = t.getElementsByQuery("a.item")

存在待ち

' 最大 30 秒待ってから操作
t.getElementByID("ready").onExist.click

' 存在確認のみ
If t.getElementByQuery(".toast").isExist Then
    Debug.Print "shown"
End If

Shadow DOM / iframe（CDP）

Dim host As CDPElement
Set host = t.getElementByQuery("my-widget")
Dim root As CDPElement
Set root = host.GetShadowRoot
root.getElementByQuery("button").click

' Shadow Root の中は XPath でも探せます（先頭に `.` を付けた相対指定）
root.getElementByXPath(".//button[@id='ok']").click

' 同一オリジンの iframe 要素から入る
Dim frame As CDPElement
Set frame = t.getElementByQuery("iframe#app").getIFrame
frame.getElementByID("inner").click

Shadow Root 内で XPath を使うときは、./○○（直下）や .//○○（配下の子孫）のように先頭に . を付けてください。子要素が1つもない Shadow DOM では XPath が使えないため、CSS セレクタで探します（詳細は CDPElement.getElementByXPath）。

名前 / URL で iframe を探して executionContextId 経由で入る場合は、CDPContext.printChildFrames → getIFrameContextID → getIFrame です。

t.printChildFrames   ' 直下の子 iframe をログ確認

Dim ctxId As Long
ctxId = t.getIFrameContextID(iframeName:="app-frame")

Dim frame As CDPElement
Set frame = t.getIFrame(ctxId)
frame.getElementByQuery("button").click

💡TIP

Shadow DOM内の操作イメージは、Shadow DOM手前まで要素を取得し、GetShadowRootで向こうに渡るイメージとなります。
所謂、通り抜けフープ的な概念です。
状況に応じて「何番目のShadowRoot」ということも可能です。

デモ: Demo_CDP.SimpleShadowRootTest / iframeShadowRootTest / runIFrame

日本語 id（CDP）

id に日本語が含まれるページでも、そのまま指定できます（CDP-Json は常に UTF-8 で送受信します）。
デモ: Demo_CDP.JapaneseElementTest

BiDi からの要素操作

Dim bidi As WebDriverBiDiContext
Set bidi = ShSetting01_StartBrowser.StartBiDiModeContext("https://example.com")

Dim cdp As CDPContext
Set cdp = bidi.UpgradeBiDiPlus
cdp.getElementByQuery("button").click

💡TIP

または JavaScript 実行の jsEval で DOM を直接操作します。

要素の取得 ​

セレクタの種類（CDP） ​

存在待ち ​

Shadow DOM / iframe（CDP） ​

日本語 id（CDP） ​

BiDi からの要素操作 ​

次へ ​