Puppeteer批量抓取URL锚文本并存储数据的问题求助

我来帮你搞定这个问题！你遇到的核心问题其实是没有在循环外部初始化一个数组来收集每个页面的结果，另外固定的page.waitFor(1000)可能会导致页面还没加载完成就执行抓取，影响结果。下面是具体的修复方案和解释：

关键问题分析 #

• 你当前的代码只是在每次循环里打印单个页面的结果，但没有把数据持久化到循环外的变量中，所以循环结束后没有保留所有抓取到的数据。
• page.$$eval()本身就会自动把浏览器上下文中的数组序列化后传递回Node.js环境，不需要额外处理扩展运算符或者数组克隆——它已经帮你完成了数据传递的工作。
• 固定延迟page.waitFor(1000)不够可靠，最好换成等待页面加载完成或者目标元素出现的逻辑，避免抓取到空数据。

修改后的完整代码 #

const puppeteer = require("puppeteer");
const jsonFile = require("./example.json");
const urlsArray = jsonFile.urls;

(async () => {
  try {
    // 初始化Chromium设置
    const browser = await puppeteer.launch({
      defaultViewport: null,
      headless: false,
      devtools: true,
    });
    const page = await browser.newPage();
    await page.setUserAgent(
      "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.97 Safari/537.36"
    );
    await page.setViewport({ width: 0, height: 0, deviceScaleFactor: 1 });

    // 初始化结果数组，用来存储所有页面的抓取数据
    const results = [];

    // 遍历URL列表
    for (let i = 0; i < urlsArray.length; i++) {
      const currentUrl = urlsArray[i];
      // 跳转到目标URL，等待页面加载完成（networkidle2表示网络请求基本停止）
      await page.goto(currentUrl, { waitUntil: "networkidle2" });
      
      // 等待目标锚点元素出现，确保页面渲染完成
      await page.waitForSelector(`a[href*="https://mysuperdomain.com/"]`);

      // 抓取符合条件的锚文本，page.$$eval会自动把结果返回给Node.js上下文
      const elements = await page.$$eval(
        `a[href*="https://mysuperdomain.com/"]`,
        elements => elements.map(el => el.innerText.trim()) // 顺便去除文本前后空格
      );

      // 将当前页面的结果存入数组
      results.push({
        url: currentUrl,
        urlsTexts: elements
      });
    }

    // 循环结束后，输出所有结果
    console.log(results);

    // 记得关闭浏览器（可选，如果你不需要继续操作的话）
    await browser.close();
  } catch (error) {
    console.log(`捕获到错误: ${error}`);
  }
})();

核心修改点说明 #

• 初始化结果数组：在循环外部定义const results = []，用来收集每个页面的抓取结果，这样循环结束后就能拿到所有数据。
• 可靠的等待逻辑：把page.waitFor(1000)换成page.goto的waitUntil: "networkidle2"参数，加上page.waitForSelector等待目标元素出现，确保页面完全加载后再执行抓取，避免因页面渲染未完成导致的空数据。
• 数据存储：每次循环把当前页面的URL和抓取到的锚文本以对象形式push到results数组中，循环结束后就能得到你期望的数组格式。
• 自动数据传递：page.$$eval()内部会处理浏览器上下文到Node.js上下文的数据传递，你直接接收返回值即可，不需要额外处理数组克隆或扩展运算符。

这样修改后，运行代码就能得到你期望的输出格式啦！

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