如何使用 Selenium Java 框架自動化 Shadow DOM

Question

我正在使用 Selenium Java 框架進行測試自動化，最近該應用程序使用 Shadow DOM 進行了升級。 我們嘗試使用 javascript 執行器 querySelector 實現自動化。 該應用程序在單個頁面中有超過 20 個影子根，並且大多數影子根是前一個根的子級。 因此，要識別一個元素，我們需要遍歷許多根，如 document.querySelector('root1').shadowRoot.querySelector('root2').... 直到第 n 個根才能找到一個元素。

WebElement DropDown = (WebElement) js.executeScript("return document.querySelector('sn-test-layouts > sn-test-main > sn-test-contents').shadowRoot.querySelector('testroot1').shadowRoot.querySelector('testroot2')");

找到元素后，正常的 selenium click 或 select 方法不起作用。 所以我使用 javascript 方法來執行點擊，輸入文本等。

您能否提供有關使用 selenium Java 自動化 Shadow DOM 的任何其他解決方案的見解。 提前致謝

Answer 1

Serenity 提供了一個影子 DOM 處理程序，實現如下所示：

public WebElementFacade getElementInShadowDOM(String shadow, String element) {
    return find(ByExpandedShadowDom.of(shadow))
            .find(By.cssSelector(element));
}

其中element是您要訪問的下拉列表， shadow是影子根的 css 選擇器。 WebElementFacade 是 Serenity 提供的 WebElements 的包裝器，它提供了許多很酷和更有效的方法。

請注意，目前 SerenityBDD 尚未更新最新的 chrome 和 Selenium 4，據我所知工作正在進行中。

這是我第一次發帖，終於有時間回饋了：）

Answer 2

在 Selenium 4.0 中，對於 Chromium 版本 96+，您可以使用getShadowRoot()方法，然后定位子元素。 這不應該有任何嵌套問題。

對於舊版本的 Chrome 或 Safari，您需要強制轉換為SearchContext而不是WebElement 。

如果您使用的是 Firefox 或 Selenium 3，則有更復雜的解決方法。 我把它們都寫在這里了： https://titusfortner.com/2021/11/22/shadow-dom-selenium.html