求助：lolalytics.com动态网站数据爬取及滚动操作问题

问题背景 #

需要爬取lolalytics.com的特定动态数据（比如Nautilus Build页面的delta数据），使用requests+lxml按XPath爬取时返回空列表，示例代码如下：

from lxml import html
import requests

headers = { "User-Agent": "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0"
      }
url = "https://lolalytics.com/lol/olaf/build/?tier=platinum&patch=13.3"
page = requests.get(url, headers=headers)


tree = html.fromstring(page.content) 
xpath = '//*[@id="root"]/div[4]/div[1]/div[2]/div[1]/div/div[2]/div[3]/div[1]/div/text()[1]'
stat = tree.xpath(xpath)
print([j.text for j in stat])

同时需要了解如何用Python操作页面中的特定滚动条（示例截图：）

解决方案 #

1. 动态页面数据爬取问题 #

requests只能获取静态HTML，而lolalytics的内容是JavaScript动态渲染的——页面加载后才会通过接口拉取数据并生成DOM元素，所以直接用lxml解析静态源码找不到目标元素。

解决方法分两种：

• 用模拟浏览器工具渲染完整页面后提取元素
• 抓包找到数据接口，直接请求接口获取结构化数据（更高效）

方法一：用Selenium实现

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

# 初始化Chrome浏览器（需对应版本的chromedriver）
options = webdriver.ChromeOptions()
options.add_argument("user-agent=Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:90.0) Gecko/20100101 Firefox/90.0")
driver = webdriver.Chrome(options=options)

try:
    driver.get("https://lolalytics.com/lol/olaf/build/?tier=platinum&patch=13.3")
    # 等待目标元素加载完成，最长等待10秒
    target_element = WebDriverWait(driver, 10).until(
        EC.presence_of_element_located((By.XPATH, '//*[@id="root"]/div[4]/div[1]/div[2]/div[1]/div/div[2]/div[3]/div[1]/div'))
    )
    # 提取目标文本
    stat = target_element.text.split('\n')[0]
    print(stat)
finally:
    driver.quit()

方法二：抓包获取API接口

打开浏览器开发者工具（F12），切换到Network标签，刷新页面后筛选XHR/Fetch请求，找到返回delta数据的接口，直接用requests请求该接口，从返回的JSON中提取所需数据，无需处理DOM结构。

2. 操作页面特定滚动条 #

如果是自定义滚动容器（非浏览器全局滚动条），需要定位到滚动容器元素，通过执行JS代码控制滚动；如果是全局滚动条，直接操作window对象即可。

操作自定义滚动容器（以Selenium为例）

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("目标页面URL")

# 定位自定义滚动容器（替换为实际的XPath或CSS选择器）
scroll_container = driver.find_element(By.XPATH, "//div[@class='自定义滚动容器类名']")

# 执行JS控制滚动：
# 滚动到底部
driver.execute_script("arguments[0].scrollTop = arguments[0].scrollHeight", scroll_container)
# 滚动到顶部
driver.execute_script("arguments[0].scrollTop = 0", scroll_container)
# 滚动到指定像素位置
driver.execute_script("arguments[0].scrollTop = 500", scroll_container)

driver.quit()

操作浏览器全局滚动条

# 滚动到页面底部
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
# 滚动到指定坐标
driver.execute_script("window.scrollTo(0, 500);")

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