Cheerio爬取二手PS5游戏网站时部分href属性读取失败求助

我用Cheerio开发二手PS5游戏网站的爬虫，用来解析游戏列表。部分列表项能正常读取URL，但有些项的href属性读出来是undefined，而且两类项的HTML结构高度相似。

问题示例HTML #

• [无法读取href的列表项HTML]
• [可正常读取的列表项HTML]

爬虫代码 #

let baseUrl = 'https://www.2dehands.be'
const url = baseUrl + '/l/games-en-spelcomputers/games-sony-playstation-5/'
const result = []
axios.get(url)
    .then((res) => {
    const html_data = res.data
    const $ = cheerio.load(html_data);

    const gamesList = ".hz-Listings"
    const gamesItems = $(gamesList).find('li.hz-Listing.hz-Listing--list-item')

    $(gamesItems).each((idx, val) => {
      let titleElement = $(val).find('.hz-Listing-title');
      if (titleElement && titleElement.length > 0) {
        let title = titleElement.text()
        console.log('title is:', title)
      }

      let urlContainer = $(val).find('.hz-Listing-item-wrapper');
      if (urlContainer && urlContainer.length > 0) {
        let aElement = urlContainer.find('a');
        let url = aElement.attr('href');
        console.log('url is:', url);
      }
    })
  })

运行结果 #

idx is: 31
title is: Call Of Duty Black Ops Cold War PS5
url is: undefined
-------------

idx is: 32
title is: Final Fantasy XVI - PS5 (Playstation 5 (PS5) Games)
url is: /v/games-en-spelcomputers/games-sony-playstation-5/a136918897-final-fantasy-xvi-ps5-playstation-5-ps5-games

尝试复现时遇到CORS错误。

• 排查动态加载问题：部分列表项可能是页面加载完成后通过JavaScript动态渲染的，axios获取的是初始静态HTML，并未包含这些动态生成的a标签href属性。这种情况下可以改用Puppeteer等无头浏览器工具，等待页面完全加载后再抓取内容。
• 优化选择器逻辑：
  • 直接从列表项中定位带有href属性的a标签，使用$(val).find('a[href]')精准匹配，避免容器内存在多个a标签导致的匹配偏差。
  • 尝试从标题元素的父级a标签提取href——游戏标题通常作为链接文本存在于a标签内，使用titleElement.parent('a').attr('href')可以直接关联标题与对应的链接，简化逻辑同时提升准确性。
• 对比HTML结构细节：即使两类列表项看起来结构相似，也可能存在细微差异（比如a标签层级不同、附加了隐藏类名等）。将无法读取href的列表项HTML打印出来，与正常项逐一对比，找出差异后调整选择器即可。

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