首页 >Java >java教程 >如何使用 Selenium 访问 Chrome 中的嵌套 Shadow DOM 元素?

如何使用 Selenium 访问 Chrome 中的嵌套 Shadow DOM 元素?

Linda Hamilton
Linda Hamilton原创
2024-12-30 02:29:18214浏览

How to Access Nested Shadow DOM Elements in Chrome Using Selenium?

访问 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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn