如何用Python遍历交互式网页按钮提取各板块表格数据？

核心原理 #

这类赛事板块的交互式切换，本质是前端通过JavaScript控制DOM元素的显示/隐藏：点击切换按钮时，JS会隐藏当前板块内容，加载并显示对应目标板块的表格数据。因此我们需要模拟人工点击操作，遍历所有切换按钮，等待对应表格加载完成后再提取数据。

具体步骤与代码实现 #

1. 依赖准备 #

确保已安装selenium、pandas和对应版本的ChromeDriver：

pip install selenium pandas

2. 完整代码 #

import pandas as pd
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

site = "http://live.fis-ski.com/cc-4023/results-pda.htm" 

options = webdriver.ChromeOptions()
options.add_argument('--headless')
options.add_argument('--no-sandbox')
options.add_argument('--disable-dev-shm-usage')

driver = webdriver.Chrome('chromedriver', options=options)
driver.get(site)

# 存储所有表格的列表
all_tables = []

try:
    # 等待所有切换按钮加载完成，定位所有tab按钮（根据页面实际元素调整选择器）
    tab_buttons = WebDriverWait(driver, 10).until(
        EC.presence_of_all_elements_located((By.CSS_SELECTOR, '.tabnav li a'))
    )
    
    # 遍历每个切换按钮
    for idx, button in enumerate(tab_buttons):
        # 等待按钮可点击，避免元素覆盖或未加载完成
        WebDriverWait(driver, 10).until(
            EC.element_to_be_clickable((By.CSS_SELECTOR, f'.tabnav li:nth-child({idx+1}) a'))
        ).click()
        
        # 等待对应板块的表格加载完成（根据页面实际表格元素调整ID或选择器）
        table_element = WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((By.CSS_SELECTOR, '.tabcontent table'))
        )
        
        # 将HTML表格转换为DataFrame
        df = pd.read_html(table_element.get_attribute('outerHTML'))[0]
        # 给表格添加对应板块的标识
        df['板块名称'] = button.text
        all_tables.append(df)
        
finally:
    driver.quit()

# 打印结果示例
for i, df in enumerate(all_tables):
    print(f"第{i+1}个板块表格：")
    print(df.head())

关键部分说明 #

• 定位切换按钮：使用presence_of_all_elements_located获取所有按钮，确保所有按钮都加载完成后再遍历。选择器需根据页面实际DOM结构调整，比如如果按钮的class是tab-link，就改成By.CSS_SELECTOR, '.tab-link'。
• 模拟点击：每次点击前用element_to_be_clickable确保按钮可交互，避免因页面渲染延迟导致点击失败。
• 表格提取：pd.read_html可以直接解析HTML表格的字符串内容，比手动解析DOM更高效；通过table_element.get_attribute('outerHTML')获取表格的完整HTML代码，确保pandas能正确解析。
• 异常处理：用try...finally确保无论是否出错，浏览器都会被关闭，避免资源泄漏。

常见问题排查 #

• 如果点击按钮后表格未加载：检查等待条件是否正确，比如是否应该用visibility_of_element_located代替presence_of_element_located（前者确保元素可见，后者仅确保元素存在于DOM中）。
• 如果按钮定位失败：打开浏览器开发者工具（F12），查看切换按钮的HTML结构，调整选择器（比如用XPath：By.XPATH, '//ul[@class="tabnav"]/li/a'）。

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