CDPElement

DOM 要素ハンドルです。Playwright の Locator / ElementHandle に近い役割です。CDPContext の getElementBy* から取得します。

Dim t As CDPContext
Set t = ShSetting01_StartBrowser.StartCDPModeContext("https://example.com")
t.getElementByQuery("button#go").click

詳細なセレクタ戦略は要素の取得、入力パターンは入力とクリックを参照してください。

値・状態

`value`

Property Get value() As String
Property Let value(strTextVal As String)

要素の value です。代入時は React 系フィールドも考慮して書き込み、続けて input イベントを発火します。

Dim box As CDPElement
Set box = t.getElementByQuery("input[name='q']")
Debug.Print box.value
box.value = "検索語"

`innerText` / `innerHTML`

Property Get innerText() As String
Property Let innerText(strTextVal As String)

Property Get innerHTML() As String
Property Let innerHTML(strTextVal As String)

表示テキスト／内側 HTML の取得・書き換えです。

Debug.Print el.innerText
el.innerHTML = "<span>更新</span>"

`checked`

Property Get checked() As Boolean
Property Let checked(boolChecked As Boolean)

チェックボックス／ラジオのオンオフです。

t.getElementByQuery("input[type='checkbox']").checked = True

`selected`

Property Get selected() As String
Property Let selected(selectedOption As String)

<select> の選択状態です。取得は先頭の選択中 option の表示テキスト（selectedOptions[0].text）、代入は selectedIndex（0 始まりの位置）での切り替えです。option の value 属性で選びたい場合は setSelection を使ってください。

Debug.Print t.getElementByQuery("select#country").selected

' 2番目（index=1）の option を選ぶ
t.getElementByQuery("select#country").selected = 1

操作

`click`

Public Function click() As Boolean

要素をクリックします（スクロールインビュー → 合成 MouseEvent('click') を dispatchEvent）。

t.getElementByID("submit").click

注意

クリック後の画面遷移待ちは自動では行いません。必要なら呼び出し側で CDPContext.Wait を呼んでください（クリック前に ResetWaitState を呼んでおけば、イベント駆動の WaitEvents も使えます）。

`SimpleClick`

Public Function SimpleClick() As Boolean

要素の this.click() をそのまま呼ぶ、素朴なクリックです。合成 MouseEvent を経由する click と違い、ブラウザ標準のクリック処理（フォーム送信ボタンの既定動作など）にそのまま乗せたいときに使います。

t.getElementByID("submit").SimpleClick

`submit`

Public Function submit() As Boolean

所属フォームを送信します（this.form.submit()）。

t.getElementByQuery("form").submit

注意

送信後の画面遷移待ちは自動では行いません。必要なら呼び出し側で CDPContext.Wait を呼んでください。

`sendString`

Public Function sendString(textToSend As String) As Boolean

値をクリアしたうえで、CDP の Input.insertText でテキストを送ります。日本語・絵文字も送れます。

引数	意味
`textToSend`	入力する文字列

box.clearValue
box.sendString "検索キーワード"

デモ: Demo_CDP.JapaneseElementTest

`sendClick`

Public Function sendClick() As Boolean

座標ベースの物理クリック相当です（Input.dispatchMouseEvent）。JS の dispatchEvent では反応しない UI 向け。
中心としてクリックします。

t.getElementByQuery("canvas#map").sendClick

`sendHover`

Public Function sendHover() As Boolean

要素の中心座標へ物理的なマウスホバーをシミュレートします（Input.dispatchMouseEvent の mouseMoved）。JS の dispatchEvent では反応しない、CSS の :hover で出現するメニューやツールチップなど向けです。呼び出し前に scrollIntoView で自動的にビューポート内へ収めます。

t.getElementByQuery(".menu-item").sendHover

`sendKey`

Public Function sendKey(Key As keyboardCode, Optional altKey As Boolean = False) As Boolean

仮想キーコードを 1 回送ります（Input.dispatchKeyEvent）。

引数	意味
`Key`	`keyboardCode` 列挙（下記）
`altKey`	`True` で Alt 修飾付き

`keyboardCode`	意味
`keyEnter`	Enter
`keyTab`	Tab
`keyEsc`	Esc
`keyBackspace`	Backspace
`keyDelete`	Delete

box.sendKey keyEnter
box.sendKey keyTab

`clearValue`

Public Function clearValue() As Boolean

入力欄の値を空にします。React フィールドも考慮し、最後に input イベントを発火します。

box.clearValue
box.sendString "新しい値"

`focus` / `selectText`

Public Function focus()
Public Function selectText()

フォーカス付与／要素内テキスト全選択です。

box.focus
box.selectText

`fireEvent`

Public Function fireEvent(strEventName As String) As Boolean

DOM イベントを発火します。React 等で setAttribute だけでは状態が同期されないときに使います。

引数	意味
`strEventName`	JS のイベント名そのもの（`"input"` / `"change"` / `"blur"` など）

el.focus
el.sendString "value"
el.fireEvent "input"

注意

"on" プレフィックス（"onchange" など）は自動除去されません。IE 時代の命名（onchange）ではなく、JS の正しいイベント名（change）をそのまま渡してください。

デモ: Demo_CDP.fillReactForm

`getAttribute` / `setAttribute`

Public Function getAttribute(strAttributeName As String) As String
Public Function setAttribute(strAttributeName As String, strValue As String)

属性の取得／設定です。

引数	意味
`strAttributeName`	属性名（例: `"href"` / `"data-x"`）
`strValue`	設定する値（`setAttribute` のみ）

Debug.Print el.getAttribute("href")
el.setAttribute "data-x", "1"

`setSelection`

Public Function setSelection(strOptionName As String)

<select> でオプションを選び、change を発火します。

引数	意味
`strOptionName`	選択する option の value

t.getElementByQuery("select#country").setSelection "JP"

`SetFileInputFiles`

Public Sub SetFileInputFiles(files As Collection)

<input type="file"> へ、ダイアログ操作なしでファイルを添付します（CDP の DOM.setFileInputFiles）。

引数	意味
`files`	添付したいファイルのフルパスを格納した `Collection`

Dim files As New Collection
files.Add "C:\path\to\image.png"

t.getElementByQuery("input[type='file']").SetFileInputFiles files

注意

files が Nothing または空の場合は、警告ログを出して何もしません。

存在確認

`isExist`

Public Function isExist() As Boolean

要素が取れているか（内部の objectId 有無）です。

If t.getElementByQuery(".toast").isExist Then
    Debug.Print "shown"
End If

`ifExist`

Public Function ifExist() As CDPElement

チェーン用の存在ガードです。存在しなければ、続く操作はスキップされます。

' if el.isExist Then el.focus の代わり
t.getElementByQuery(".optional").ifExist.focus

`onExist`

Public Function onExist(Optional timeOutInSeconds As Double = 30, _
    Optional raiseTimeoutError As Boolean = True) As CDPElement

要素が現れるまでポーリングし、見つかったら自身を返してチェーンできます。

引数	意味
`timeOutInSeconds`	待ち上限秒。既定は `30`
`raiseTimeoutError`	タイムアウト時にエラー停止するか。既定は `True`

t.getElementByID("async-btn").onExist.click
t.getElementByID("ready").onExist(10, False).click   ' 10 秒・タイムアウトでも止めない

使えないケース

onExist / onExistNot は、要素を取得したときの検索コード（JavaScript）を内部で再実行してポーリングします。そのため、そもそも単一の検索コードを持たない次の取得方法では使用できません（要素自体は問題なく操作できますが、ポーリングは効きません）。

複数取得系（getChildren / getElementsByQuery / getElementsByXPath）で得られた各要素
GetShadowRoot / GetShadowRoots で得られた Shadow Root

`onExistNot`

Public Function onExistNot(Optional timeOutInSeconds As Double = 30) As Boolean

要素が消えるまで待ちます。消えたら True、上限まで残っていたら False です。

引数	意味
`timeOutInSeconds`	待ち上限秒。既定は `30`

If t.getElementByQuery(".spinner").onExistNot(15) Then
    Debug.Print "読み込み完了"
End If

TIP

判定は「保持中のこの要素（objectId）が document から外れたか（this.isConnected）」で行います。同じセレクタに一致する別の要素が現れても、元の要素自体が外れていれば消滅とみなします。

ツリー走査

いずれも現在の要素を基準に相対移動します。見つからない場合は空の CDPElement（または Nothing）になります。

`getParent`

Public Function getParent() As CDPElement

親要素（parentElement）です。

Set el = t.getElementByQuery("span.label").getParent

`getNextSibling` / `getPrevSibling`

Public Function getNextSibling() As CDPElement
Public Function getPrevSibling() As CDPElement

次／前の兄弟要素です。

Set nextEl = el.getNextSibling
Set prevEl = el.getPrevSibling

`getFirstChild` / `getChildren`

Public Function getFirstChild() As CDPElement
Public Function getChildren() As Collection

先頭の子／子要素のコレクションです。コレクションの各要素は CDPElement です。

Dim child As CDPElement
Set child = el.getFirstChild

Dim kids As Collection
Set kids = el.getChildren
For Each child In kids
    Debug.Print child.innerText
Next

入れ子検索

要素スコープでも Context と同様に検索できます（主に Shadow Root 内や部分 DOM 向け）。

`getElementByID`

Public Function getElementByID(strID As String) As CDPElement

引数	意味
`strID`	`id` 属性（`#` は付けない）

root.getElementByID("ok").click

`getElementByQuery` / `getElementsByQuery`

Public Function getElementByQuery(strQuery As String) As CDPElement
Public Function getElementsByQuery(strQuery As String) As Collection

引数	意味
`strQuery`	CSS セレクタ

Set el = host.getElementByQuery("button.primary")

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

`getElementByXPath` / `getElementsByXPath`

Public Function getElementByXPath(strXPath As String) As CDPElement
Public Function getElementsByXPath(strXPath As String) As Collection

現在要素を起点にした相対検索の XPath です。GetShadowRoot で得た Shadow Root の中でも使えます。ページ全体（document）を起点に探したい場合は、CDPContext.getElementByXPath を使ってください。

引数	意味
`strXPath`	XPath（現在要素からの相対パス）

' 通常の要素から
Set el = host.getElementByXPath(".//button[contains(.,'送信')]")

' Shadow Root の中から
Dim root As CDPElement
Set root = t.getElementByQuery("my-widget").GetShadowRoot
root.getElementByXPath(".//button[@id='ok']").click

' 複数取得
Dim list As Collection
Set list = root.getElementsByXPath(".//li")

検索の書き方

先頭が / や // の場合は、先頭に . が自動で付与されます（//div → .//div＝配下の子孫すべて）。警告ログが出ます
./○○（直下）、.//○○（配下の子孫）のように、先頭に . を付ける書き方を推奨します
Shadow Root から実行する場合は、必ず ./○○ か .//○○ のように先頭に . を付けてください。. 無しの相対指定（div 等）は、Shadow Root 内では意図通りに探せません
getElementsByXPath も同じ規則です

Shadow Root 内の検索の制約

XPath は Shadow Root そのものを起点にできないため、内部では Shadow Root の最初の子ノードを起点に評価しています。このため、子要素が1つもない Shadow DOM では XPath 検索ができません。その場合は CSS セレクタ（getElementByQuery）をご利用ください。

Shadow / iframe

`getIFrame`

Public Function getIFrame() As CDPElement

<iframe> 要素の contentDocument を CDPElement として返します。同一オリジンの iframe 向けです。別ドメインの場合は機能しないため、CDPBrowser.getTab でターゲット接続するか、Context 側の CDPContext.getIFrameContextID / getIFrame を検討してください。

Dim frame As CDPElement
Set frame = t.getElementByQuery("iframe#app").getIFrame
frame.getElementByID("inner").click

`GetShadowRoot` / `GetShadowRoots`

Public Function GetShadowRoot(Optional Index As Long) As CDPElement
Public Function GetShadowRoots() As Collection

現在要素の直下にある Shadow Root に入ります。ホスト要素を取ってから呼び出す「通り抜け」イメージです。

引数	意味
`Index`	複数あるときの 0 始まりインデックス（`GetShadowRoot` のみ。既定 `0`）

Dim host As CDPElement
Set host = t.getElementByQuery("my-widget")

Dim root As CDPElement
Set root = host.GetShadowRoot
root.getElementByQuery("button").click

' 2 つ目の Shadow Root
Set root = host.GetShadowRoot(1)

失敗時は Nothing です。デモ: Demo_CDP.SimpleShadowRootTest / iframeShadowRootTest / runIFrame

その他

`ExposeDevTools`

Public Sub ExposeDevTools(varName As String)

保持中の要素を DevTools コンソールのグローバル変数として公開します（デバッグ用）。

引数	意味
`varName`	コンソール上の変数名（例: `"el"`）

el.ExposeDevTools "el"
' DevTools コンソールで el を参照可能

注意

サイトによっては不自然なグローバル変数を検知する対策があります。本番スクレイピングでは使わないでください。

`CurrentObjectId`

Property Get CurrentObjectId() As String

内部で保持している CDP の objectId です。空なら検索未ヒットです。日常利用では通常不要です。

`CurrentNodeType`

Property Get CurrentNodeType() As NodeNodeType

保持中の要素の DOM nodeType 値を返します。「いま持っているのは要素なのか、Shadow Root なのか」といった判別に使えます。

値	意味
`NodeELEMENT_NODE`（1）	`<p>` や `<div>` などの要素
`NodeATTRIBUTE_NODE`（2）	属性
`NodeTEXT_NODE`（3）	テキスト
`NodeCDATA_SECTION_NODE`（4）	`CDATASection`
`NodeENTITY_REFERENCE_NODE`（5）	XML の実体参照
`NodeENTITY_NODE`（6）	XML の DTD 実体宣言
`NodePROCESSING_INSTRUCTION_NODE`（7）	XML の処理命令
`NodeCOMMENT_NODE`（8）	コメント
`NodeDOCUMENT_NODE`（9）	`Document`
`NodeDOCUMENT_TYPE_NODE`（10）	`<!DOCTYPE html>`
`NodeDOCUMENT_FRAGMENT_NODE`（11）	`DocumentFragment`。`GetShadowRoot` で得た Shadow Root はこれです
`NodeNOTATION_NODE`（12）	XML の DTD 表記法宣言

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

If root.CurrentNodeType = NodeDOCUMENT_FRAGMENT_NODE Then Debug.Print "Shadow Root です"

`jsEval`

Public Function jsEval(JavaScriptStr As String, Optional objectArguments As Variant, _
    Optional IFEXCEPTION As Variant, Optional returnByValue As Boolean, _
    Optional awaitPromise As Boolean, Optional serializationOptions As Dictionary, _
    Optional generatePreview As Boolean, Optional StopApiError As Boolean = True) As Variant

この要素の objectId を this として JavaScript を評価します。CDPContext.jsEval の要素スコープ版で、クラス内の他メソッドも内部的にこれ経由で実装されています。用意されたメソッドで足りない操作をしたいときの逃げ道として使えます。

objectArguments は Collection / Array(...) / 固定長の Dictionary 型 1 次元配列のいずれでも渡せます（詳細は CDPContext.jsEval 参照）。

Dim el As CDPElement
Set el = t.getElementByQuery("#price")

Debug.Print el.jsEval("function(){ return this.dataset.raw }")

実行オプション（`SetOptionStopException` / `SetOptionRunAsyncCDP` / `SetOptionUserGesture`）

Property Let SetOptionStopException(v As Boolean)
Property Let SetOptionRunAsyncCDP(v As Boolean)
Property Let SetOptionUserGesture(v As Boolean)

この要素経由の jsEval（および内部で jsEval を使う各メソッド）の実行方法を切り替える、Let 専用のスイッチです。

プロパティ	意味
`SetOptionStopException`	`True` で、JS 例外発生時に `Err.Raise` で停止。基本は開発時のみ `True` を推奨
`SetOptionRunAsyncCDP`	`True` で、結果を待たない非同期実行に切り替える。使い終わったら必ず `False` に戻すこと
`SetOptionUserGesture`	`True` で、人間の操作であるかのように偽装する。スクレイピング対策の回避に有効な場合がある

el.SetOptionStopException = True   ' デバッグ中だけ例外で止める
el.SetOptionStopException = False

`Init`

フレームワーク内部の初期化です。ユーザーコードから直接呼ぶ必要は通常ありません。

CDPElement ​

値・状態 ​

value ​

innerText / innerHTML ​

checked ​

selected ​

操作 ​

click ​

SimpleClick ​

submit ​

sendString ​

sendClick ​

sendHover ​

sendKey ​

clearValue ​

focus / selectText ​

fireEvent ​

getAttribute / setAttribute ​

setSelection ​

SetFileInputFiles ​

存在確認 ​

isExist ​

ifExist ​

onExist ​

onExistNot ​

ツリー走査 ​

getParent ​

getNextSibling / getPrevSibling ​

getFirstChild / getChildren ​

入れ子検索 ​

getElementByID ​

getElementByQuery / getElementsByQuery ​

getElementByXPath / getElementsByXPath ​

Shadow / iframe ​

getIFrame ​

GetShadowRoot / GetShadowRoots ​

その他 ​

ExposeDevTools ​

CurrentObjectId ​

CurrentNodeType ​

jsEval ​

実行オプション（SetOptionStopException / SetOptionRunAsyncCDP / SetOptionUserGesture） ​

Init ​

関連 ​