如何解决Selenium+Python抓取改版网站悬停弹窗表格失效问题？

之前通过Selenium实现了悬停触发的表格数据抓取功能，目标网站改用Tailwind CSS改版后，即便用开发者工具强制触发悬停状态，Selenium定位目标悬停表格元素时，要么抛出NoSuchElementException，要么提示元素不可交互，其他页面元素均能正常定位。现寻求解决当前问题及规避未来同类问题的方案。

悬停效果截图 #

示例代码及错误 #

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

driver = webdriver.Chrome(executable_path="config/chromedriver")
driver.maximize_window()
wait = WebDriverWait(driver, 50)
action = ActionChains(driver)
driver.get("https://www.oddsportal.com/tennis/australia/wta-australian-open/jimenez-kasintseva-victoria-lys-eva-IVZa5PVf/")

#first_td = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//tr[@class='lo odd']/td[2]")))
#ActionChains(driver).move_to_element(first_td).perform()

tool_tip_text = driver.find_element(By.CSS_SELECTOR, "#tooltip").get_attribute('innerText')
print(tool_tip_text)

"""Error: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"#tooltip"}"""

期望输出 #

20 Sep, 17:42 2.30 +0.03
20 Sep, 17:29 2.27 +0.02
20 Sep, 17:25 2.25 -0.20
20 Sep, 17:24 2.45 +0.20
20 Sep, 17:20 2.25 -0.20
20 Sep, 17:19 2.45 +0.20
20 Sep, 16:58 2.25 -0.20
20 Sep, 16:56 2.45 +0.20
20 Sep, 16:30 2.25 -0.20
20 Sep, 16:29 2.45 +0.18
20 Sep, 16:23 2.27 -0.18
20 Sep, 16:21 2.45 +0.20
20 Sep, 15:52 2.25 -0.20
20 Sep, 15:51 2.45 +0.20
20 Sep, 15:45 2.25 -0.20
20 Sep, 15:42 2.45 +0.20
20 Sep, 15:41 2.25 -0.20
20 Sep, 15:36 2.45 +0.12
20 Sep, 15:16 2.33 -0.12
20 Sep, 15:14 2.45 +0.12

Opening odds:
19 Sep, 19:00 2.33

一、当前问题的修复步骤 #

1. 正确触发悬停并等待元素渲染 #

Tailwind改版后，悬停元素的渲染逻辑可能新增延迟或依赖父元素状态，必须先完成悬停触发，再等待目标元素加载：

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

driver = webdriver.Chrome(executable_path="config/chromedriver")
driver.maximize_window()
wait = WebDriverWait(driver, 50)
action = ActionChains(driver)
driver.get("https://www.oddsportal.com/tennis/australia/wta-australian-open/jimenez-kasintseva-victoria-lys-eva-IVZa5PVf/")

# 重新定位可悬停的赔率单元格（避免依赖易变的Tailwind class）
target_td = wait.until(EC.element_to_be_clickable((By.XPATH, "//td[contains(@class, 'odds') and not(contains(@class, 'table-header'))]")))

# 执行悬停并暂停1秒确保tooltip渲染完成
action.move_to_element(target_td).pause(1).perform()

# 等待tooltip可见后获取文本
tooltip = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, "#tooltip")))
print(tooltip.get_attribute('innerText'))

driver.quit()

2. 修复失效的定位器 #

Tailwind的原子类会随样式调整频繁变化，原定位器可能失效，建议：

• 用相对定位：通过元素层级、文本特征或data-*属性定位，而非精确匹配class
• 用包含匹配：例如//td[contains(@data-id, 'odds')]，避免依赖固定class值

3. 解决元素不可交互问题 #

若触发悬停后提示元素不可交互，可尝试：

• 直接模拟JS事件，绕过UI遮挡：

  driver.execute_script("arguments[0].dispatchEvent(new MouseEvent('mouseover', {bubbles: true}));", target_td)
  

• 检查是否存在iframe：若目标元素在iframe内，需先切换上下文：

  iframe = wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, "iframe[src*='odds']")))
  driver.switch_to.frame(iframe)
  

二、规避未来同类问题的方案 #

1. 拒绝依赖CSS class定位：Tailwind的原子类（如hover:opacity-100）极易变更，优先用id、data-*属性、文本内容或元素层级关系定位。
2. 分析元素渲染逻辑：用开发者工具观察悬停时元素的变化：
   • 确认tooltip是动态创建还是原本隐藏（display:none/opacity:0）
   • 记录触发悬停的事件类型（mouseover/mouseenter），直接模拟事件而非依赖ActionChains
3. 统一用显式等待：用WebDriverWait+expected_conditions替代硬编码sleep，适配页面动态渲染。
4. 定期校验定位器：网站改版后优先检查核心定位器的有效性，提前适配变更。
5. 考虑接口抓取：若悬停数据通过AJAX加载，直接抓取对应XHR接口请求，比模拟UI操作更稳定。

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