使用BeautifulSoup4无法定位嵌套在其他div内的div元素如何解决

问题原因 #

目标站点采用客户端渲染（CSR）架构，所有页面核心内容都是浏览器加载完初始HTML后执行JavaScript动态生成的：

• 你用requests发起请求拿到的仅为未执行JS的初始页面骨架，只有加载占位的loader元素，没有动态生成的div data_reactroot相关结构
• F12元素审查里看到的完整DOM是浏览器执行完JS后的最终渲染结果，和requests拿到的原始HTML内容不一致

解决方案 #

你可以选择两种方案解决这个问题：

• 方案1：使用支持JS渲染的爬虫工具
  用Selenium、Playwright等自动化浏览器工具，模拟真实浏览器环境加载页面，等待JS执行完成后再提取DOM内容，示例代码（Playwright）：

  from playwright.sync_api import sync_playwright
  from bs4 import BeautifulSoup
  
  with sync_playwright() as p:
      browser = p.chromium.launch(headless=False)
      page = browser.new_page(user_agent="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36")
      page.goto("https://www.myntra.com/jordan")
      # 等待目标元素加载完成
      page.wait_for_selector("[data_reactroot]", timeout=10000)
      # 获取渲染后的完整HTML
      html = page.content()
      soup = BeautifulSoup(html, 'lxml')
      # 后续按需求解析soup即可
      browser.close()
  

• 方案2：直接调用站点公开API
  打开浏览器F12控制台切换到「网络」标签，筛选Fetch/XHR请求，刷新页面后找到返回商品列表数据的接口，直接请求该接口获取JSON格式数据，这种方式比解析HTML效率更高、结构更稳定。

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