如何使用 Selenium 存取 Chrome 中的巢狀 Shadow DOM 元素？

存取Shadow DOM 元素：在Chrome 中清除瀏覽資料時與#shadow-root 互動（開啟）

與#shadow-root互動元素，例如Chrome 清除瀏覽資料彈出視窗中的「清除資料」按鈕，由於其封裝性，需要在Selenium中進行特殊處理

問題陳述：

使用Selenium 自動化Chrome 的清除瀏覽資料彈出視窗時，存取包含「Clear」的#shadow-root (open)元素使用cssSelector 的data"按鈕會導致

解決方案：

由於在此上下文中影子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-root（開放）元素無縫交互，包括「清除資料」按鈕，無論其嵌套的影子DOM 結構為何。

以上是如何使用 Selenium 存取 Chrome 中的巢狀 Shadow DOM 元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！