使用Puppeteer抓取温德姆酒店网站距离数据失败求助

问题原因 #

你之前的代码返回空列表，核心问题有两个：

• 选择器定位错误：距离元素并不在hotel-address的相邻span节点下，原选择器匹配不到目标元素。
• 无效CSS语法：span:nth-child(0)不合法，CSS子元素计数从1开始，不存在第0个节点。

解决方案 #

1. 等待动态元素加载

页面酒店列表为动态渲染，必须先等待目标元素加载完成，再执行抓取：

// 等待距离元素加载完毕
await page.waitForSelector('div[class^="cmp-property-card"] .cmp-property-distance');

2. 精准抓取并提取距离信息

使用正确的选择器定位距离元素，再通过正则提取数值和单位，避免文本不一致：

const distances = await page.$$eval('div[class^="cmp-property-card"] .cmp-property-distance', elements => 
  elements.map(el => {
    // 匹配"25.9 mi"或"10 km"这类格式
    const match = el.textContent.trim().match(/(\d+\.\d+|\d+) (mi|km)/);
    return match ? {
      value: parseFloat(match[1]),
      unit: match[2]
    } : null;
  }).filter(item => item !== null) // 过滤无效数据
);

3. 处理滚动加载（可选）

如果酒店列表需要滚动加载更多内容，可添加滚动逻辑确保抓取全部数据：

// 滚动页面加载所有酒店
await page.evaluate(async () => {
  await new Promise(resolve => {
    let scrollTotal = 0;
    const step = 100;
    const timer = setInterval(() => {
      const pageHeight = document.body.scrollHeight;
      window.scrollBy(0, step);
      scrollTotal += step;
      if (scrollTotal >= pageHeight) {
        clearInterval(timer);
        resolve();
      }
    }, 100);
  });
});

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