使用Selenium访问Shadow DOM元素的专业指南

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

# 初始化WebDriver
driver = webdriver.Chrome()
driver.get('https://sso-login.revelup.com') # 替换为您的目标URL
driver.implicitly_wait(7) # 设置隐式等待

try:
    # 1. 执行JavaScript获取shadowRoot对象
    # 假设Shadow Host是id为'shadow-root-wrapper'的元素
    shadow_root_script = "return document.querySelector('#shadow-root-wrapper').shadowRoot"
    shadow_root = driver.execute_script(shadow_root_script)

    if shadow_root:
        print("成功获取到Shadow Root。")
    else:
        print("未能获取到Shadow Root，请检查Shadow Host的JS路径。")

except Exception as e:
    print(f"执行JavaScript获取Shadow Root时发生错误: {e}")
finally:
    # driver.quit() # 在实际应用中，您可能希望在完成所有操作后关闭驱动
    pass

# ... (前文代码，包括初始化driver和获取shadow_root) ...

try:
    shadow_root_script = "return document.querySelector('#shadow-root-wrapper').shadowRoot"
    shadow_root = driver.execute_script(shadow_root_script)

    if shadow_root:
        # 2. 在shadowRoot中定位目标元素
        # 假设目标是一个id为'instance'的input字段
        element_in_shadow_dom = shadow_root.find_element(By.CSS_SELECTOR, '#instance')

        if element_in_shadow_dom:
            print(f"成功定位到Shadow DOM中的元素: {element_in_shadow_dom.tag_name} (id='instance')")
            # 进一步操作，例如输入文本
            element_in_shadow_dom.send_keys("Hello Shadow DOM!")
            print("已向元素输入文本。")
        else:
            print("未能定位到Shadow DOM中的目标元素，请检查CSS选择器。")

except Exception as e:
    print(f"定位Shadow DOM内部元素时发生错误: {e}")
finally:
    driver.quit() # 完成操作后关闭驱动

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

login_url = 'https://sso-login.revelup.com' # 假设这是包含Shadow DOM的页面

driver = webdriver.Chrome()
driver.get(login_url)
driver.implicitly_wait(10) # 设置隐式等待，等待页面加载

try:
    # 步骤1: 获取Shadow Host的JS路径并构建获取shadowRoot的脚本
    # 假设Shadow Host是id为'login-app'的元素
    # (您需要根据实际页面结构在Chrome DevTools中确认)
    shadow_host_selector = '#login-app' # 替换为实际的Shadow Host选择器
    shadow_root_script = f"return document.querySelector('{shadow_host_selector}').shadowRoot"

    # 使用WebDriverWait等待Shadow Host出现，然后获取shadowRoot
    print(f"尝试获取Shadow Host: {shadow_host_selector}")
    WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, shadow_host_selector))
    )
    print("Shadow Host已出现，尝试获取Shadow Root...")
    shadow_root = driver.execute_script(shadow_root_script)

    if shadow_root:
        print("成功获取到Shadow Root。")

        # 步骤2: 在shadowRoot中定位目标元素
        # 假设目标是一个id为'instance'的input字段
        target_element_selector = '#instance' # 替换为实际的Shadow DOM内部元素选择器
        print(f"尝试在Shadow Root中定位元素: {target_element_selector}")

        # 在shadowRoot中查找元素
        # 注意：这里不能直接使用WebDriverWait，因为shadow_root不是driver对象
        # 可以通过循环和time.sleep实现简单的等待，或更复杂的JS等待
        found_element = None
        for _ in range(5): # 尝试5次，每次等待1秒
            try:
                found_element = shadow_root.find_element(By.CSS_SELECTOR, target_element_selector)
                if found_element:
                    break
            except Exception:
                time.sleep(1)

        if found_element:
            print(f"成功定位到Shadow DOM中的元素: {found_element.tag_name} (id='instance')")
            # 对元素进行操作
            found_element.send_keys("my_username")
            print("已向输入字段输入文本。")
        else:
            print(f"未能定位到Shadow DOM中的目标元素 '{target_element_selector}'。")
    else:
        print("未能获取到Shadow Root，请检查Shadow Host的JS路径或页面加载情况。")

except Exception as e:
    print(f"发生错误: {e}")
finally:
    time.sleep(3) # 留出时间观察结果
    driver.quit()