如何使用 Selenium 和 CSS 選擇器與 Chrome Shadow DOM 內的元素互動？

使用 Selenium 和 CSS 選擇器清除 Chrome 瀏覽器的瀏覽資料時如何與 #shadow-root (open) 內的元素進行互動？

問題：

嘗試自動與元素互動時在使用Selenium 的「清除瀏覽資料」彈出視窗的#shadow-root (open) 中，您可能會在定位「清除資料」按鈕時遇到挑戰。如果您使用 CSS 選擇器來識別元素，這可能會特別令人沮喪。

解決方案：

成功定位#shadow-root 中的元素並與之互動（開放）使用Selenium，您將需要結合使用JavaScript 執行和對Shadow DOM 的理解。以下是詳細的分步方法：

1.取得Shadow Root：

private static WebElement getShadowRoot(WebDriver driver, WebElement shadowHost) {
    JavascriptExecutor js = (JavascriptExecutor) driver;
    return (WebElement) js.executeScript("return arguments[0].shadowRoot", shadowHost);
}

此方法將shadowHost元素作為參數並傳回對應的shadow root。

2.存取 Shadow 元素：

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

此方法採用 ShadowHost 元素和 Shadow 元素的 CSS 選擇器，並傳回 Shadow 根中對應的 Shadow 元素。

3.遍歷Shadow DOM（如果有多個層級）：

在多個巢狀shadow root的情況下，需要遍歷每個層級才能到達想要的元素。使用以下程式碼遍歷關卡：

// 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");
// and so on...

4. JavaScript 執行：

另一種方法是使用 JavaScript 執行直接選取元素。如果遍歷多個陰影等級很複雜或不切實際，這可能很有用。以下是一個範例：

JavascriptExecutor js = (JavascriptExecutor) driver; 
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')");

此程式碼將使用 JavaScript 執行檢索 Clear 資料元素，從而顯著簡化遍歷過程。

透過執行這些步驟，您可以有效地與#shadow-root（開啟），同時使用 Selenium 的 CSS 選擇器方法清除 Chrome 瀏覽器中的瀏覽資料。

以上是如何使用 Selenium 和 CSS 選擇器與 Chrome Shadow DOM 內的元素互動？的詳細內容。更多資訊請關注PHP中文網其他相關文章！