如何抓取指定时间点交互式图表的Tooltip数据？（附失败Selenium代码）

问题描述 #

需要抓取网站https://mempool.jhoenicke.de/#BTC,6m,weight中蓝色区域内指定时间点对应的Tooltip文本，目标是获取<strong>标签内的时间信息。尝试用Selenium点击并按住id="tooltip"元素时，从element.click()步骤就失败，代码如下：

from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.common.action_chains import ActionChains
import time
from time import sleep
from random import randint
website = 'https://jochen-hoenicke.de/queue/#BTC,6m,weight'
 
path = '/Users/LENOVO/Downloads/chromedriver'
driver = webdriver.Chrome(path)
driver.get(website)
  
element = driver.find_element("xpath", '//*[@id="tooltip"]')
element.click()
  
element2 = driver.find_element("style", '//*[@id="tooltip"]')
action = ActionChains(driver)
action.click_and_hold(element2)
action.perform()
   
time.sleep(3)
memdate = driver.find_element("xpath",'//[@id="tooltip"]/strong').text
print(memdate)
    
action.release(element2)
action.perform()

需要确认实现方向是否正确，或获取正确的抓取方法。

问题分析 #

你的实现方向完全错误：

• Tooltip是鼠标悬停在图表数据点上才会显示的元素，默认状态下id="tooltip"的元素是隐藏的，直接点击它必然失败。
• 代码存在语法错误：
  • 重复导入ActionChains，无需两次导入
  • 使用"style"作为定位方式是无效的，Selenium不支持这种定位器
  • XPath表达式//[@id="tooltip"]缺少*，正确写法是//*[@id="tooltip"]
• 点击并按住的操作逻辑不符合Tooltip的触发机制，不需要点击，只需悬停。

正确解决方案 #

核心思路：找到图表上对应时间点的数据点元素，通过鼠标悬停触发Tooltip显示，再提取目标文本。

修正后的代码 #

from selenium import webdriver
from selenium.webdriver.common.action_chains import ActionChains
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

website = 'https://jochen-hoenicke.de/queue/#BTC,6m,weight'
path = '/Users/LENOVO/Downloads/chromedriver'

# 初始化浏览器
driver = webdriver.Chrome(path)
driver.get(website)
driver.maximize_window()

try:
    # 等待图表加载完成，这里等待第一个数据点出现
    wait = WebDriverWait(driver, 10)
    # 定位图表中的数据点（以蓝色区域的第一个点为例，可根据需求调整定位方式）
    target_point = wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="chart"]//svg//path[@class="highcharts-point highcharts-color-0"]')))
    
    # 执行鼠标悬停操作，触发Tooltip显示
    action = ActionChains(driver)
    action.move_to_element(target_point).perform()
    
    # 等待Tooltip显示，然后提取<strong>标签内的文本
    tooltip_text = wait.until(EC.visibility_of_element_located((By.XPATH, '//*[@id="tooltip"]/strong'))).text
    print("目标时间信息：", tooltip_text)
    
finally:
    time.sleep(2)
    driver.quit()

关键说明 #

1. 等待机制：使用WebDriverWait替代固定sleep，确保元素加载完成后再操作，避免因页面加载慢导致的元素未找到错误。
2. 触发Tooltip：通过move_to_element执行鼠标悬停，这是触发该网站Tooltip的正确方式。
3. 定位数据点：如果需要指定具体时间点，可以通过分析图表元素的属性（如data-x对应时间戳）来定位目标点，例如：

   # 定位对应时间戳的数据点（示例时间戳需替换为目标时间的对应值）
   target_point = wait.until(EC.presence_of_element_located((By.XPATH, '//*[@id="chart"]//svg//path[@class="highcharts-point highcharts-color-0" and @data-x="1699996800000"]')))
   

4. 清理资源：使用try...finally确保浏览器正常关闭。

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