Selenium はどのようにして Shadow DOM 内に隠された要素にアクセスし、対話できるのでしょうか?

シャドウ ルートと Selenium: 閲覧データ ポップアップの移動

Selenium を使用して Chrome で閲覧データをクリアする際に #shadow-root (開いている) 内の要素にアクセスすると、課題が生じる可能性があります。これを克服するには、Shadow DOM と Selenium の機能を理解する必要があります。

Shadow DOM

Shadow DOM を使用すると、Web 開発者はカスタム コンポーネント内に HTML とスタイルをカプセル化し、独立した UI 要素を作成できます。 「シャドウ ホスト」と呼ばれるこれらのコンポーネントには、独自のシャドウ ツリー、つまり非表示の DOM フラグメントがあります。

Selenium と Shadow DOM

Selenium は、Shadow DOM 要素が外部にあるため、ネイティブにサポートしません。メインの DOM ツリー。これらの要素と対話するには、まずシャドウ ツリーにアクセスする必要があります。

Shadow DOM のトラバース

1.シャドウ ホストの特定:

Selenium の findElement メソッドを使用して、メイン DOM でシャドウ ホストを見つけます。

2.シャドウ ルートの抽出:

カスタム メソッド getShadowRoot を使用して、シャドウ ホストに関連付けられたシャドウ ルートにアクセスします。

3.シャドウ ツリーの移動:

getShadowElement メソッドを使用してシャドウ ツリーを移動し、ターゲット要素のシャドウ ルートと CSS セレクターを渡します。

例: 閲覧データのクリア

カスタム メソッドを使用して、マルチレベルの Shadow DOM に移動してアクセスし、[ブラウジングのクリア] をクリックします。データ ボタン:

WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));
WebElement shadowElementL1 = getShadowElement(driver, shadowHostL1, "settings-main");
WebElement shadowElementL2 = getShadowElement(driver, shadowElementL1, "settings-basic-page");
WebElement shadowElementL3 = getShadowElement(driver, shadowElementL2, "settings-section > settings-privacy-page");
WebElement shadowElementL4 = getShadowElement(driver, shadowElementL3, "settings-clear-browsing-data-dialog");
WebElement shadowElementL5 = getShadowElement(driver, shadowElementL4, "#clearBrowsingDataDialog");
WebElement clearData = shadowElementL5.findElement(By.cssSelector("#clearBrowsingDataConfirm"));
clearData.click();

または、単一の JavaScript 呼び出しを使用できます:

WebElement clearData = (WebElement) js.executeScript("return document.querySelector(...[CSS selector to traverse Shadow DOM]...");

以上がSelenium はどのようにして Shadow DOM 内に隠された要素にアクセスし、対話できるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。