如何使用Selenium访问闭合Shadow Root内iframe的HTML内容？

针对闭合Shadow Root导致Selenium无法访问内部iframe的问题，以下是几种可行的解决方法：

方法一：修改Web组件代码，暴露iframe引用 #

由于这是你运营的网站，可以直接修改组件的JavaScript代码，将iframe实例挂载到自定义元素的公开属性上，让外部脚本能够获取到它：

修改组件代码 #

class SampleApplication extends HTMLElement {
    connectedCallback() {
        const iframe = window.document.createElement('iframe');
        const shadow = this.attachShadow({ mode: 'closed' });
        iframe.name = 'sample-iframe';

        const title = this.getAttribute("title");
        if (title) {
            iframe.title = title;
        }
        iframe.src = "https://www.example.org/iframe.html";
        shadow.appendChild(iframe);
        // 将iframe挂载到元素的自定义属性，供外部访问
        this._exposedIframe = iframe;
    }
}
window.customElements.define('sample-application', SampleApplication);

Selenium中获取并切换到iframe（Java示例） #

// 找到自定义元素
WebElement appElement = driver.findElement(By.tagName("sample-application"));
// 通过JS获取暴露的iframe
WebElement iframe = (WebElement) ((JavascriptExecutor) driver).executeScript(
    "return arguments[0]._exposedIframe;", appElement
);
// 切换到iframe
driver.switchTo().frame(iframe);

// 验证iframe内的内容，比如获取文本
String contentText = driver.findElement(By.cssSelector("body")).getText();
System.out.println(contentText);

// 切回主文档
driver.switchTo().defaultContent();

方法二：使用Chrome DevTools Protocol（CDP）绕过闭合Shadow Root限制 #

如果无法修改组件代码，可以借助Selenium 4支持的CDP协议，直接访问Shadow DOM内部的元素，不受Shadow Root闭合模式的限制：

Java示例代码 #

// 获取Chrome DevTools会话
DevTools devTools = ((ChromeDriver) driver).getDevTools();
devTools.createSession();

// 获取文档根节点
GetDocumentResponse rootDoc = devTools.send(Dom.getDocument(Optional.empty(), Optional.empty(), Optional.of(true)));
String rootNodeId = rootDoc.getRoot().getNodeId();

// 查找sample-application元素
SearchForNodesResponse appNodeResp = devTools.send(Dom.searchForNodes(
    "sample-application", rootNodeId, Optional.empty()
));
String appNodeId = appNodeResp.getNodeIds().get(0);

// 获取闭合的Shadow Root节点（CDP不受mode限制）
GetShadowRootResponse shadowRootResp = devTools.send(Dom.getShadowRoot(appNodeId));
String shadowRootNodeId = shadowRootResp.getShadowRootId();

// 在Shadow Root内查找iframe
SearchForNodesResponse iframeNodeResp = devTools.send(Dom.searchForNodes(
    "iframe", shadowRootNodeId, Optional.empty()
));
String iframeNodeId = iframeNodeResp.getNodeIds().get(0);

// 获取iframe的frame ID，切换到该上下文
GetFrameOwnerResponse frameOwnerResp = devTools.send(Dom.getFrameOwner(iframeNodeId));
String frameId = frameOwnerResp.getFrameId();

// 在iframe上下文执行脚本获取内容
EvaluateResponse evalResp = devTools.send(Runtime.evaluate(
    "document.body.innerText",
    Optional.empty(),
    Optional.empty(),
    Optional.empty(),
    Optional.empty(),
    Optional.empty(),
    Optional.of(true), // 指定在iframe上下文中执行
    Optional.empty(),
    Optional.empty()
));
System.out.println("iframe内容：" + evalResp.getResult().getValue());

// 切回主文档
driver.switchTo().defaultContent();

方法三：直接访问iframe的源URL（限无跨域依赖场景） #

如果iframe加载的内容不依赖父页面的上下文（比如不需要父页面的登录状态、参数传递等），可以直接获取iframe的src地址，单独打开该URL进行内容验证：

Java示例代码 #

// 先通过CDP或修改组件的方式获取iframe的src
String iframeSrc = (String) ((JavascriptExecutor) driver).executeScript("""
    // 结合方法一的暴露属性获取src：
    return document.querySelector('sample-application')._exposedIframe.src;
""");

// 直接打开iframe的源URL
driver.get(iframeSrc);

// 验证内容
String content = driver.findElement(By.cssSelector("body")).getText();
System.out.println(content);

注意事项 #

• CDP方式仅适用于Chrome、Edge等支持DevTools Protocol的浏览器；
• 若iframe存在跨域限制，直接访问src可能无法获取到和嵌入时一致的内容，此时需优先使用前两种方法；
• 修改组件代码是最简洁稳定的方案，因为你拥有网站的控制权。

内容的提问来源于stack exchange，提问作者Eric