Scrapy通过XPath定位元素失败但ChroPath可正常识别如何解决

你要提取的元素是客户端JavaScript动态渲染生成的，对应标签带有AngularJS专属的data-ng-*属性，说明页面内容是加载完成后由前端框架动态插入DOM的。Scrapy、BeautifulSoup默认只会获取服务端返回的初始静态HTML，不会执行页面内的JS代码，自然找不到动态生成的标签，匹配XPath也会失效。

• 方案1：使用支持JS渲染的采集工具
  直接用支持执行页面JS的工具模拟浏览器访问，等内容渲染完成后再提取元素：
  • 用Scrapy的话可以集成scrapy-playwright或scrapy-splash插件，开启JS渲染后即可直接复用ChroPath导出的XPath定位元素
  • 独立脚本可以用Playwright、Selenium等自动化工具模拟浏览器加载页面，等待目标元素渲染完成后导出页面源码，再用BeautifulSoup解析即可
• 方案2：直接调用后端数据接口（效率更高）
  动态渲染的内容必然是从后端接口获取的结构化数据，你可以打开浏览器控制台的「网络」面板，筛选Fetch/XHR类型的请求，刷新页面后找到返回赛事列表数据的接口，直接请求该接口获取JSON格式的原始数据，不需要解析HTML，采集效率更高、稳定性更好。
• 方案3：提取静态HTML内嵌的预加载数据
  部分站点会把首屏渲染需要的基础数据存放在静态HTML的<script>标签内，你可以直接用正则匹配提取对应JS片段，解析后就能拿到所需的href链接，不需要额外执行JS。

• 发送请求时需要和浏览器请求保持一致的UA、Cookie、Referer等请求头，避免触发站点反爬策略返回异常内容，导致就算开启渲染也拿不到正确数据
• 使用JS渲染工具时建议添加显式等待规则，等目标a标签加载完成后再提取内容，避免页面还没渲染完成就提前提取导致匹配失败

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