Watir Ruby处理嵌套Shadow-root自动化网页浏览故障求助

针对多层嵌套Shadow Root加Iframe的场景，你可以逐层穿透Shadow Root，再切换到Iframe上下文来定位目标元素，具体步骤和代码示例如下：

原生JavaScript实现（浏览器控制台直接运行） #

// 1. 获取第一层自定义元素，穿透第一个Shadow Root
const outerComponent = document.querySelector('macroponent-f51912f4c700201072b211d4d8c26010');
const firstShadowRoot = outerComponent.shadowRoot;

// 2. 在第一层Shadow Root里获取第二个自定义元素，穿透第二层Shadow Root
const appshellRoot = firstShadowRoot.querySelector('sn-canvas-appshell-root');
const secondShadowRoot = appshellRoot.shadowRoot;

// 3. 在第二层Shadow Root里获取第三个自定义元素，穿透第三层Shadow Root
const appshellLayout = secondShadowRoot.querySelector('sn-canvas-appshell-layout');
const thirdShadowRoot = appshellLayout.shadowRoot;

// 4. 定位Iframe，切换到它的文档上下文
const iframe = thirdShadowRoot.getElementById('gfst_main');
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

// 5. 最终定位目标a标签
const targetLink = iframeDoc.getElementById('95410f6c1bba215041a2fc49cd4bcb5f');
console.log(targetLink.textContent); // 输出"0"

Selenium Python实现（自动化场景） #

如果你用Selenium做自动化，需要用execute_script处理Shadow Root（Selenium原生API不直接支持Shadow DOM）：

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("你的目标页面URL")

# 逐层穿透Shadow Root并定位目标元素
target_element = driver.execute_script("""
    const outerComponent = document.querySelector('macroponent-f51912f4c700201072b211d4d8c26010');
    const firstShadow = outerComponent.shadowRoot;
    const appshellRoot = firstShadow.querySelector('sn-canvas-appshell-root');
    const secondShadow = appshellRoot.shadowRoot;
    const appshellLayout = secondShadow.querySelector('sn-canvas-appshell-layout');
    const thirdShadow = appshellLayout.shadowRoot;
    const iframe = thirdShadow.getElementById('gfst_main');
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    return iframeDoc.getElementById('95410f6c1bba215041a2fc49cd4bcb5f');
""")

print(target_element.text) # 输出"0"

关键注意点 #

• 只有#shadow-root (open)类型的Shadow DOM可以被外部访问，你的场景里都是open类型，无需担心权限问题
• Iframe加载可能有延迟，自动化场景下建议加等待逻辑，比如Selenium里用WebDriverWait：

from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

# 等待Iframe加载完成（如果是通过Shadow Root定位的Iframe，可将这段逻辑嵌入execute_script内）
WebDriverWait(driver, 10).until(
    EC.frame_to_be_available_and_switch_to_it((By.ID, 'gfst_main'))
)

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