如何用Python+Selenium抓取HLTV团队页面图表悬停提示的日期与排名

Hey there! Let's figure out how to scrape those tooltip dates and rankings from HLTV's team pages—your current code is close, but the key issue is that the tooltip is hidden by default until you hover over a chart data point. Here's how to fix it step by step:

Why Your Current Code Isn't Working #

The element fusioncharts-tooltip-element exists in the DOM but is hidden (with display: none in its style) until you hover over a data point on the ranking graph. When you call find_elements_by_xpath right away, the tooltip has no content to extract.

Step-by-Step Fix #

First, let's adjust your code to simulate mouse hovers on each chart data point, wait for the tooltip to appear, and then pull the data.

1. Update Your Imports #

Add necessary modules for waiting and expected conditions:

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

2. Configure Chrome Options (With Debug-Friendly Settings) #

Start with non-headless mode first to debug, and add window size if you later switch back to headless:

options = webdriver.ChromeOptions()
options.add_argument('--ignore-certificate-errors')
options.add_argument('--incognito')
# Uncomment below for headless mode (add window size to avoid layout issues)
# options.add_argument('--headless=new')
# options.add_argument('--window-size=1920x1080')

executable_path = r'C:/Users/fabbe/Documents/Python Scripts/hltv/chromedriver/chromedriver.exe'
driver = webdriver.Chrome(executable_path, options=options)
driver.get("https://www.hltv.org/team/7532/big")

3. Wait for the Chart to Load & Locate Data Points #

HLTV uses CanvasJS for its ranking graph—we'll target the individual data points that trigger tooltips:

wait = WebDriverWait(driver, 15)  # 15-second timeout for page elements

# Wait for the ranking graph container to load
chart_container = wait.until(EC.presence_of_element_located((By.ID, 'team-rankings-graph')))

# Locate all data points on the chart
data_points = wait.until(EC.presence_of_all_elements_located((By.CSS_SELECTOR, '.canvasjs-data-point')))

4. Hover Over Each Point & Extract Tooltip Data #

Use ActionChains to hover over each data point, wait for the tooltip to become visible, then extract the text:

actions = ActionChains(driver)

for point in data_points:
    try:
        # Hover over the data point to trigger the tooltip
        actions.move_to_element(point).perform()
        
        # Wait for the tooltip to be visible and load content
        tooltip = wait.until(EC.visibility_of_element_located((By.ID, 'fusioncharts-tooltip-element')))
        
        # Extract and parse the tooltip text
        tooltip_text = tooltip.text
        print("Raw tooltip text:", tooltip_text)
        
        # Split the text to get date and rank (adjust based on actual tooltip format)
        date, rank_line = tooltip_text.split('\n')
        rank = rank_line.replace('Rank: ', '').strip()
        
        print(f"Date: {date.strip()}, Rank: {rank}")
        
    except Exception as e:
        print(f"Skipping point due to error: {str(e)}")
        continue

# Clean up
driver.quit()

Key Notes #

• Use ID for Tooltip: The fusioncharts-tooltip-element ID is unique, so it's the most reliable way to target the tooltip (better than XPath/CSS here).
• Wait for Visibility: Always use EC.visibility_of_element_located instead of just presence—this ensures the tooltip is visible and has loaded its content.
• Debug with Non-Headless: When troubleshooting, turn off headless mode so you can see exactly what's happening with the tooltip and mouse hovers.

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