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