Trailblazer.me徽章与积分爬取问题：Puppeteer代码无数据输出

你的代码能执行但无法获取目标元素文本，主要可能是网站结构更新或动态内容未完全渲染导致的，以下是具体排查和修复方案：

核心问题分析 #

1. 静态HTML解析局限性：你用Puppeteer获取页面HTML后交给Cheerio解析，但Trailblazer的内容大概率是通过JavaScript动态渲染的，page.content()返回的静态HTML可能还未包含目标元素。
2. 选择器失效：原选择器.tds-tally__count.tds-tally__count_success可能因网站更新已不再使用。

修复后的代码示例 #

直接在Puppeteer中完成元素等待与内容提取，避免静态解析的问题：

const puppeteer = require("puppeteer");

const scrape = async () => {
  const url = "https://trailblazer.me/id/hverma99";

  const browser = await puppeteer.launch({ headless: true });
  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');
  
  // 等待页面基本加载完成，networkidle2比networkidle0更适配动态页面
  await page.goto(url, { waitUntil: "networkidle2" });

  try {
    // 先尝试原选择器，若超时则说明选择器已失效
    await page.waitForSelector(".tds-tally__count.tds-tally__count_success", { timeout: 5000 });
    
    // 直接在浏览器环境中提取元素文本
    const badgeCount = await page.$eval(".tds-tally__count.tds-tally__count_success", el => el.textContent.trim());
    console.log("徽章数量:", badgeCount);

    // 积分通常对应另一个主题的计数元素，示例选择器需根据实际页面调整
    const points = await page.$eval(".tds-tally__count.tds-tally__count_primary", el => el.textContent.trim());
    console.log("积分:", points);
  } catch (error) {
    console.error("获取元素失败:", error.message);
    // 调试辅助：截图保存当前页面状态，方便排查结构变化
    await page.screenshot({ path: "trailblazer_debug.png" });
    // 打印页面开头HTML片段，快速查看结构
    const htmlPreview = await page.content();
    console.log("页面结构预览:", htmlPreview.slice(0, 1200));
  } finally {
    await browser.close();
  }

  console.log("hit");
};

scrape();

后续调试步骤 #

如果上述代码仍无法获取内容，按以下步骤确认选择器：

1. 打开目标Trailblazer页面，按下F12打开开发者工具
2. 找到徽章/积分对应的元素，右键选择「检查」
3. 在Elements面板中查看元素的最新类名或属性，替换代码中的选择器

例如，当前Trailblazer个人页面中，徽章数量可能在.profile-header__badges-count元素下，积分在.profile-header__points元素下（需以实际页面结构为准）。

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