Puppeteer技术问询：如何实现新标签页打开链接抓取数据后返回原页面，解决Load More按钮重置及元素查找失败问题

我来帮你搞定这个问题！你遇到的核心问题是：用click+goBack会重置原页面的Load More状态，直接用page.goto又因为上下文问题找不到元素。下面是针对需求的具体解决方案，完全贴合你要的「新标签页打开→抓取→关闭→返回原页面继续」逻辑：

关键问题分析 #

1. 你原来用nth-child(${i})定位元素，当Load More加载新内容后，旧元素的位置会发生变化，导致选择器失效。
2. page.click跳转后再goBack，原页面会重新加载，之前Load More出来的内容会丢失，状态被重置。

优化后的完整代码 #

假设你已经初始化了browser实例（比如const browser = await puppeteer.launch({ headless: false });），修改后的代码如下：

var buttonExists = true;
let allData = [];

while (buttonExists === true) {
  // 一次性提取当前页面所有练习的名称和链接，避免用不稳定的nth-child定位
  const exercises = await page.$$eval(
    '.ExCategory-results > .ExResult-row',
    rows => rows.map(row => {
      const aTag = row.querySelector('.ExResult-cell > .ExHeading > a');
      return {
        name: aTag.innerText,
        url: aTag.href
      };
    })
  );

  console.log(`当前页面抓取到 ${exercises.length} 个练习项目`);

  // 遍历每个练习，用新标签页独立处理
  for (const exercise of exercises) {
    console.log(`正在处理：${exercise.name}`);
    const newPage = await browser.newPage();
    
    try {
      // 跳转到详情页，等待页面稳定加载
      await newPage.goto(exercise.url, { waitUntil: 'networkidle2' });
      // 等待目标内容节点出现
      await newPage.waitForSelector('#js-ex-content');

      // 这里写你的抓取逻辑，示例获取练习描述
      const description = await newPage.$eval(
        '#js-ex-content .ExDetail-description', 
        el => el.innerText.trim()
      );

      // 保存数据
      allData.push({
        exercise: exercise.name,
        description: description
        // 你可以添加更多抓取字段
      });
    } catch (err) {
      console.error(`处理${exercise.name}时出错：`, err);
    } finally {
      // 无论成功失败，都关闭新标签页
      await newPage.close();
    }
  }

  // 点击Load More加载下一页内容
  try {
    const loadMoreSelector = '.ExCategory-loadMore'; // 确保这个选择器和页面匹配
    await page.click(loadMoreSelector);
    // 等待新内容加载完成，替代固定等待1秒的做法，更可靠
    await page.waitForSelector('.ExCategory-results > .ExResult-row:last-child', { timeout: 5000 });
  } catch (err) {
    console.log('没有更多内容可加载，结束循环');
    buttonExists = false;
  }
}

// 输出或保存抓取结果
console.log('所有抓取数据：', allData);

核心改进点说明 #

• 一次性提取所有链接：用$$eval批量获取当前页面的练习数据，彻底避免nth-child带来的定位失效问题，因为动态加载后元素位置会变化。
• 新标签页独立处理：通过browser.newPage()创建全新页面打开详情页，完全不干扰原页面的状态，Load More加载的内容会一直保留。
• 可靠的等待逻辑：把固定的waitForTimeout(1000)替换成waitForSelector，等待新内容节点出现后再继续，比固定延迟更高效也更稳定。
• 错误防护：每个练习的处理都包裹在try-catch-finally中，确保即使某个页面抓取失败，新标签页也会被关闭，避免内存泄漏。

额外注意事项 #

• 确认Load More按钮的选择器loadMoreSelector和目标页面的实际元素匹配，你可以在浏览器控制台用document.querySelector('.ExCategory-loadMore')验证。
• 如果遇到反爬限制，可以给页面设置真实的User-Agent，比如：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')。
• 可以根据页面加载速度调整goto的waitUntil参数，比如'domcontentloaded'适合内容加载快的页面。

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