Selenium 如何存取隱藏在 Shadow DOM 中的元素並與之互動？

Shadow Root 和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中文網其他相關文章！