如何爬取octane.gg页面中class为css-gm45eu的div标签内的数据

• 你要爬取的页面属于*客户端渲染（CSR）*站点，页面内的玩家统计数据是浏览器加载完基础HTML后，通过JavaScript异步请求后端接口、动态渲染生成的。
• 你直接用requests发起请求拿到的只有未执行JS的初始静态HTML代码，其中不存在你要找的css-gm45eu类的div元素，所以返回None。

方案1：使用支持JS渲染的工具获取页面内容 #

可以用Selenium、Playwright这类自动化工具模拟浏览器运行，等JS执行完成、元素渲染出来后再解析DOM。
Selenium示例代码如下：

from bs4 import BeautifulSoup
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
import time

# 配置无头模式，无需弹出浏览器窗口
chrome_options = Options()
chrome_options.add_argument("--headless=new")
chrome_options.add_argument("--disable-blink-features=AutomationControlled")

driver = webdriver.Chrome(options=chrome_options)
url = "https://octane.gg/events/e83e-rlcs-x-championship-europe/stats/players"
driver.get(url)
# 等待页面JS渲染完成，可根据网络情况调整等待时长
time.sleep(3)

# 读取渲染完成的页面源码
src = driver.page_source
soup = BeautifulSoup(src, 'lxml')
match = soup.find('div', class_='css-gm45eu')
print(match)

driver.quit()

方案2：直接调用后端数据接口（推荐，效率更高） #

你可以通过浏览器开发者工具直接抓包获取站点加载统计数据的接口，直接请求接口拿到JSON格式的原始数据，不需要解析HTML，稳定性和效率都更高。
操作步骤：

• 打开目标页面，按F12调出开发者工具，切换到「网络」标签
• 刷新页面，筛选「Fetch/XHR」类型的请求，找到返回玩家统计数据的接口
• 直接用requests请求该接口，解析返回的JSON即可拿到所有需要的评分数据

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