1. 传统方法与挑战：Selenium鼠标悬停的局限性
在网页数据抓取过程中，我们经常遇到需要从图表（如股价走势图、产品价格历史图）中提取详细数据的情况。许多图表在鼠标悬停时会显示额外的工具提示信息，例如具体的日期和数值。一种直观的想法是使用自动化测试工具selenium来模拟鼠标悬停操作，然后尝试捕获弹出的文本。
例如，针对类似CPU价格历史图的场景，初学者可能会尝试以下Selenium代码：
from selenium import webdriver
from selenium.webdriver import ActionChains
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
options = Options()
options.add_argument("start-maximized")
webdriver_service = Service()
driver = webdriver.Chrome(options=options, service=webdriver_service)
driver.get('https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%403.50GHz&id=3904')
# 尝试定位图表元素
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.XPATH, "//*[@id='placeholder']/div/canvas[2]")))
# 尝试遍历元素并模拟鼠标悬停
# for el in element: # 错误：element是一个WebElement对象，不可迭代
# ActionChains(driver).move_to_element(el).perform()
# mouseover = WebDriverWait(driver, 30).until(EC.visibility_of_element_located((By.CSS_SELECTOR, ".placeholder > div > div.canvasjs-chart-tooltip > div > span")))
# print(mouseover.text)然而，上述代码段中存在一个常见错误：element变量通过EC.presence_of_element_located获取的是单个WebElement对象，而非一个列表，因此直接对其进行for循环会导致'WebElement' object is not iterable的运行时错误。即使解决了迭代问题，通过模拟鼠标悬停来获取大量数据也存在效率低、资源消耗大、稳定性差等问题，尤其是在需要抓取图表中所有数据点时，这种方法显得非常笨重。
核心问题在于：许多看起来是动态生成的数据，实际上可能已经作为JavaScript变量或JSON对象嵌入在页面的HTML源代码中。此时，模拟用户交互是多余且低效的。
2. 优化方案：直接提取JavaScript嵌入数据
更高效、更稳定的方法是直接分析网页的HTML源代码，查找其中是否包含了我们所需的数据。如果数据以JavaScript变量的形式存在，我们可以利用requests库获取页面内容，并结合正则表达式re模块进行精确匹配和提取。
立即学习“Python免费学习笔记（深入）”；
这种方法的优势在于：
- 效率高： 无需启动浏览器，减少了大量的渲染和交互时间。
- 资源消耗低： 仅进行HTTP请求和字符串处理，对系统资源占用少。
- 稳定性好： 不受浏览器版本、驱动兼容性或UI元素定位变化的影响。
3. 实战演练：提取CPU价格历史数据
以从cpubenchmark.net网站提取CPU价格历史数据为例，我们将展示如何通过直接分析HTML源代码来获取数据。
步骤一：获取网页内容
首先，使用requests库发送HTTP GET请求，获取目标网页的完整HTML内容。
import requests import re import pandas as pd url = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%403.50GHz&id=3904" html_text = requests.get(url).text
步骤二：识别并提取JavaScript数据
通过浏览器开发者工具（F12）检查目标页面的“Elements”或“Sources”面板，我们会发现图表数据通常以JavaScript变量的形式存在。在该网站的案例中，数据点以dataArray.push({x: ..., y: ...})的格式嵌入在JavaScript脚本块中。
我们可以构建一个正则表达式来匹配并捕获这些数据：r"dataArray\.push\({x: (\d+), y: ([\d.]+)}"。
- dataArray\.push\({x:：匹配固定字符串。
- (\d+)：捕获一个或多个数字，对应时间戳（x值）。
- , y:：匹配固定字符串。
- ([\d.]+)：捕获一个或多个数字或小数点，对应价格（y值）。
- \)：匹配右括号。
使用re.findall()函数可以找到所有匹配项，并返回一个元组列表，每个元组包含捕获到的时间戳和价格。
df = pd.DataFrame(
re.findall(r"dataArray\.push\({x: (\d+), y: ([\d.]+)}", html_text),
columns=["time", "price"],
)步骤三：数据清洗与转换
提取到的时间戳通常是Unix时间戳（毫秒或秒）。我们需要将其转换为可读的日期时间格式，并将价格转换为数值类型。pandas库提供了强大的数据类型转换功能。
# 将时间戳从字符串转换为整数，并除以1000（如果原始是毫秒级时间戳），然后转换为datetime对象 df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s") # 将价格从字符串转换为浮点数 df["price"] = df["price"].astype(float)
完整示例代码
import requests
import re
import pandas as pd
# 目标网页URL
url = "https://www.cpubenchmark.net/cpu.php?cpu=Intel+Core+i9-11900K+%403.50GHz&id=3904"
# 步骤一：获取网页内容
html_text = requests.get(url).text
# 步骤二：识别并提取JavaScript数据
# 使用正则表达式匹配 dataArray.push({x: timestamp, y: price}) 格式的数据
# (\d+) 捕获时间戳， ([\d.]+) 捕获价格（可能包含小数）
df = pd.DataFrame(
re.findall(r"dataArray\.push\({x: (\d+), y: ([\d.]+)}", html_text),
columns=["time", "price"],
)
# 步骤三：数据清洗与转换
# 将时间戳从字符串转换为整数，并将其除以1000（如果原始是毫秒级时间戳），然后转换为datetime对象
# unit='s' 表示时间戳的单位是秒
df["time"] = pd.to_datetime(df["time"].astype(int) // 1000, unit="s")
# 将价格从字符串转换为浮点数
df["price"] = df["price"].astype(float)
# 打印DataFrame的最后几行，验证数据
print(df.tail())运行结果
执行上述代码，你将获得一个包含日期和价格的DataFrame，例如：
time price 236 2023-05-28 06:00:00 317.86 237 2023-05-29 06:00:00 319.43 238 2023-05-30 06:00:00 429.99 239 2023-05-31 06:00:00 314.64 240 2023-06-01 06:00:00 318.90
4. 注意事项与最佳实践
- 适用场景判断： 这种直接提取JavaScript数据的方法适用于数据已经嵌入到初始HTML响应中的页面。如果数据是通过AJAX请求在页面加载完成后异步获取的，或者是在客户端动态计算生成的，那么requests和re可能无法直接获取到，此时仍需考虑使用Selenium、Playwright等工具来模拟浏览器环境并等待数据加载。
-
善用开发者工具： 在进行网页爬取之前，始终建议使用浏览器的开发者工具（F12）检查页面的“Elements”、“Network”和“Source”面板。
- “Elements”面板可以帮助你定位HTML结构。
- “Network”面板可以查看页面加载过程中发出的所有HTTP请求，这对于发现AJAX请求非常有用。
- “Source”面板可以查看页面的JavaScript源代码，帮助你找到嵌入的数据。
- 正则表达式的健壮性： 构建正则表达式时，要考虑目标字符串的可能变化。过于精确的正则可能在页面结构微调后失效，而过于宽松的正则可能匹配到不相关的内容。
- 数据清洗的重要性： 原始抓取的数据可能需要进一步的清洗和格式化，例如类型转换、缺失值处理、单位统一等，pandas是处理这些任务的强大工具。
- 遵守网站规则： 在进行任何爬取活动时，请务必遵守目标网站的robots.txt协议和使用条款，避免对网站造成不必要的负担。
总结
在网页数据抓取中，选择合适的工具和策略至关重要。对于那些将数据直接嵌入到HTML或JavaScript源代码中的图表，通过requests获取页面内容并结合re正则表达式进行直接提取，是比模拟鼠标悬停更高效、更稳定的解决方案。这种方法不仅减少了资源消耗，提高了爬取速度，也降低了因UI变化导致爬虫失效的风险。掌握这种技巧，能让你在面对复杂的网页数据时更加游刃有余。
