修复“无法读取 Null 的属性（读取 'shadowRoot'）”Selenium Web 抓取错误

在 Python 中使用 Selenium 处理 Shadow DOM 并关闭弹出窗口

使用 Python 和 Selenium WebDriver 与 Shadow DOM 元素交互并动态处理弹出窗口。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.common.exceptions import JavascriptException
import time
# Initialize WebDriver with Chrome
options = Options()
driver = webdriver.Chrome(service=Service(), options=options)
# Open Shopee website
driver.get('https://www.shopee.co.th/')
# Click the Thai language button
th_button = driver.find_element(By.XPATH, '/html/body/div[2]/div[1]/div[1]/div/div[3]/div[1]/button')
th_button.click()
# Pause to allow popups to load
time.sleep(3)
# Try to close the shadow DOM popup
try:
    close_button = driver.execute_script('return document.querySelector("shopee-banner-popup-stateful")'
                                      '.shadowRoot.querySelector("div.shopee-popup__close-btn")')
    close_button.click()
except JavascriptException as e:
    print("Error: ", e)
# Close the browser
driver.quit()

使用 WebDriverWait 进行 Shadow DOM 交互

在 Selenium 中使用显式等待来确保 Shadow DOM 中的元素已准备好进行交互。

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
import time
# Initialize WebDriver with Chrome
options = Options()
driver = webdriver.Chrome(service=Service(), options=options)
# Open Shopee website
driver.get('https://www.shopee.co.th/')
# Click the Thai language button
th_button = WebDriverWait(driver, 10).until(
    EC.element_to_be_clickable((By.XPATH, '/html/body/div[2]/div[1]/div[1]/div/div[3]/div[1]/button'))
)
th_button.click()
# Wait for the shadow DOM popup to be present
try:
    shadow_host = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.CSS_SELECTOR, 'shopee-banner-popup-stateful'))
    )
    shadow_root = driver.execute_script('return arguments[0].shadowRoot', shadow_host)
    close_button = shadow_root.find_element(By.CSS_SELECTOR, 'div.shopee-popup__close-btn')
    close_button.click()
except Exception as e:
    print("Error closing the popup: ", e)
# Close the browser
driver.quit()

有关在 Selenium 中处理 Shadow DOM 和弹出窗口的常见问题

1. 什么是 Shadow DOM，为什么它难以访问？
2. 这 shadow DOM 是一个独立的 DOM 树，Web 开发人员用它来封装元素并防止它们受到主文档中的样式或脚本的影响。由于传统的 Selenium 方法不支持与影子 DOM 元素直接交互，因此很难访问。
3. 怎么样 execute_script() 帮助与 Shadow DOM 交互？
4. execute_script() 允许直接在浏览器会话中运行 JavaScript，从而能够访问影子 DOM 元素，否则使用常规 Selenium 命令无法访问这些元素。
5. 为什么是 WebDriverWait 对于抓取动态内容很重要吗？
6. WebDriverWait 确保脚本在与其交互之前等待特定条件，例如元素可单击或存在。这对于处理异步加载的动态内容至关重要。
7. 遇到时我该怎么办 JavascriptException？
8. JavascriptException 当执行 JavaScript 代码出现问题时会发生。使用实现错误处理 try-except 块可以帮助捕获和管理这些错误，而不会导致整个脚本崩溃。
9. 如何关闭使用 Shadow DOM 的动态弹出窗口？
10. 要关闭封装在影子 DOM 中的动态弹出窗口，您需要首先使用以下命令访问影子根 execute_script() 然后找到 Shadow DOM 内的弹出关闭按钮。

关于在 Selenium 中处理 Shadow DOM 的最终想法

使用 Selenium 进行网页抓取时，与影子 DOM 元素交互可能具有挑战性。然而，通过利用 JavaScript 执行和显式等待，您可以有效地管理使用标准方法难以访问的元素。

通过正确处理错误并合并等待，您可以确保您的抓取脚本健壮且可靠。这些技术将有助于避免处理嵌入在影子 DOM 中的动态内容和弹出窗口时的常见陷阱，从而确保更流畅的抓取体验。