使用Puppeteer爬取TripAdvisor卡塔赫纳景点标题遇阻求助

需求说明 #

• 爬取目标：哥伦比亚卡塔赫纳的TripAdvisor可体验项目页面
• 提取字段：每个景点的标题、链接、图片、描述
• 限制：不使用TripAdvisor官方API，自行编写爬虫

当前问题 #

卡在列表标题获取环节，报错信息显示Cannot read properties of null (reading 'textContent')，说明代码中定位标题的选择器未匹配到元素，或页面未加载完成就执行了抓取逻辑。

修复方案及示例代码 #

核心问题分析 #

1. 页面加载不充分：直接执行抓取时，动态渲染的列表元素可能还未加载完成
2. 选择器错误：TripAdvisor页面结构动态性强，原选择器无法匹配到标题元素

修正后的代码 #

const puppeteer = require('puppeteer');

async function scrapeCartagenaAttractions() {
  // 启动浏览器（headless: false方便调试）
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();

  // 设置模拟浏览器UA，降低反爬识别概率
  await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36');

  // 跳转目标页面，等待网络空闲确保页面加载完成
  await page.goto('https://www.tripadvisor.com/Attractions-g297476-Activities-c42-Cartagena_Cartagena_District_Bolivar_Department.html', { 
    waitUntil: 'networkidle2',
    timeout: 60000
  });

  // 等待列表容器加载完成，避免提前抓取
  await page.waitForSelector('.attraction_clarity_cell', { timeout: 30000 });

  // 提取景点数据
  const attractions = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('.attraction_clarity_cell')).map(item => {
      // 定位标题元素
      const titleElement = item.querySelector('.listing_title > a');
      // 定位图片元素
      const imageElement = item.querySelector('.photo img');
      // 定位描述元素
      const descElement = item.querySelector('.listing_snippet');

      return {
        title: titleElement ? titleElement.textContent.trim() : '无标题',
        link: titleElement ? titleElement.href : '',
        image: imageElement ? imageElement.src : '',
        description: descElement ? descElement.textContent.trim() : '无描述'
      };
    });
  });

  // 输出结果
  console.log('爬取到的景点数据：', attractions);
  await browser.close();
}

// 执行爬虫
scrapeCartagenaAttractions();

注意事项 #

• 定期校验选择器：TripAdvisor会调整页面布局，若后续再次报错，需通过F12开发者工具重新确认元素选择器
• 反爬应对：添加随机延迟（await page.waitForTimeout(1000 + Math.random() * 2000)）、轮换UA、控制请求频率，避免IP被封禁
• 异常处理：可添加try-catch块捕获加载超时、元素未找到等异常，提升代码稳定性

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