Selenium を使用して Chrome でネストされた Shadow DOM 要素にアクセスする方法

Shadow DOM 要素へのアクセス: Chrome での閲覧データのクリア中に #shadow-root (オープン) と対話する

#shadow-root と対話するChrome の閲覧データのクリア ポップアップの [データのクリア] ボタンなどの要素は、次の理由により Selenium 内で特別な処理を必要とします。 Shadow DOM 内でのカプセル化。

問題ステートメント:

Selenium を使用して Chrome の閲覧データのクリア ポップアップを自動化しているときに、 cssSelector を使用した「データの消去」ボタンの結果例外。

解決策:

このコンテキストにおけるシャドウ DOM のネストされた性質により、ターゲット要素にアクセスするには、複数のシャドウ ルート レベルをトラバースする必要があります。カスタム メソッド getShadowElement を使用すると、シャドウ ツリー要素への効率的なアクセスが可能になります。

public static WebElement getShadowElement(WebDriver driver, WebElement shadowHost, String cssOfShadowElement) {
    WebElement shardowRoot = getShadowRoot(driver, shadowHost);
    return shardowRoot.findElement(By.cssSelector(cssOfShadowElement));
}

複数の getShadowElement 呼び出しを連鎖させることで、シャドウ DOM レベルを段階的に下降できます。

// Locate shadowHost on the current dom
WebElement shadowHostL1 = driver.findElement(By.cssSelector("settings-ui"));

// now locate the shadowElement by traversing all shadow levels
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"));

代替方法、単一の JavaScript 呼び出しでトラバーサルをカプセル化できます。 process:

WebElement clearData = (WebElement) js.executeScript("return document.querySelector('settings-ui').shadowRoot.querySelector('settings-main').shadowRoot.querySelector('settings-basic-page').shadowRoot.querySelector('settings-section > settings-privacy-page').shadowRoot.querySelector('settings-clear-browsing-data-dialog').shadowRoot.querySelector('#clearBrowsingDataDialog').querySelector('#clearBrowsingDataConfirm')");

このアプローチにより、ネストされた Shadow DOM 構造に関係なく、「データの消去」ボタンを含む #shadow-root (オープン) 要素とのシームレスな対話が可能になります。

以上がSelenium を使用して Chrome でネストされた Shadow DOM 要素にアクセスする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。