使用 Puppeteer 抓取网页数据时返回空数组的解决方案-js教程-PHP中文网

使用 Puppeteer 抓取网页数据时返回空数组的解决方案

心靈之曲

发布： 2025-08-31 16:23:01

原创

349人浏览过

使用 puppeteer 抓取网页数据时返回空数组的解决方案

本文旨在解决在使用 Puppeteer 抓取网页数据时，最终返回空数组的问题。通过分析问题代码，找出导致问题的根源，并提供一份经过修改的、能够正确抓取目标数据的示例代码。本文档将指导开发者避免常见的 Puppeteer 使用错误，并掌握更有效的数据提取技巧。

在使用 Puppeteer 进行网页数据抓取时，有时会遇到最终结果返回空数组的情况。这通常是由于选择器错误、异步操作处理不当或网页结构变化等原因造成的。以下将分析一个实际案例，并提供解决方案。

问题分析

原始代码尝试从 https://naamhinaam.com/baby-girl-names-a 网站抓取婴儿名字和含义。代码中存在几个潜在问题：

复杂的选择器和不稳定的索引: 代码中使用了基于索引的复杂 CSS 选择器，如 div.name-suggestion.mt-1 > div > div:nth-child(${i})。这种选择器依赖于页面结构的稳定性，一旦页面结构发生变化，选择器就会失效，导致抓取失败。同时，代码中尝试移除广告元素，但移除操作可能会影响后续元素的索引，导致数据错位或遗漏。
不必要的 if 条件: 代码中重复检查 if (await page.$("div.name-suggestion.mt-1 > div > div:nth-child(22)")) 这样的条件，意义不大，并可能导致逻辑错误。
低效的循环和选择器: 在每次循环迭代中，都使用 await page.$ 查找元素，这会增加执行时间。更高效的方法是先使用 await page.$$ 获取所有目标元素的数组，然后在数组上进行迭代。

怪兽AI数字人
数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

解决方案

以下是经过修改的、更健壮和高效的代码：

const puppeteer = require("puppeteer");
const express = require("express");
const cors = require("cors");
const app = express();
app.use(cors());
let data = [];

(async () => {
  const browser = await puppeteer.launch({
    headless: true,
    defaultViewport: null,
  });
  const page = await browser.newPage();

  for (let pageNumber = 1; pageNumber <= 42; pageNumber++) {
    await page.goto(`https://naamhinaam.com/baby-girl-names-a?page=${pageNumber}`);
    await page.waitForTimeout(3000);

    // 使用更简洁、稳定的选择器
    let nameElements = await page.$$(`a.nsg__name`);
    let meaningElements = await page.$$(`div.nsg__meaning > i`);

    // 确保名字和含义的数量匹配
    if (nameElements.length !== meaningElements.length) {
      console.warn(`警告：第 ${pageNumber} 页的名字和含义数量不匹配！`);
      continue; // 跳过当前页
    }

    for (let i = 0; i < nameElements.length; i++) {
      let fullName = "";
      try {
        // 使用 try...catch 处理可能的错误
        let name = await page.evaluate(el => el.textContent, nameElements[i]);
        let meaning = await page.evaluate(el => el.textContent, meaningElements[i]);
        fullName = `${name.split(/[\n\t]/).join('').trim()}, ${meaning}`;
        data.push({ fullName });
      } catch (error) {
        console.error(`抓取第 ${pageNumber} 页第 ${i + 1} 个元素时出错：`, error);
      }
    }
  }

  console.log(data);
  await browser.close();
})();

app.get("/", (req, res) => {
  res.status(200).json(data);
});

app.listen(3000, () => {
  console.log("App is running...");
});

登录后复制

代码解释

更稳定的选择器: 使用 a.nsg__name 和 div.nsg__meaning > i 替代了基于索引的复杂选择器，提高了代码的健壮性。
批量获取元素: 使用 await page.$$ 一次性获取所有名字和含义的元素，减少了 Puppeteer 的调用次数，提高了效率。
错误处理: 使用 try...catch 块捕获在 page.evaluate 中可能发生的错误，防止程序崩溃。
数据验证: 增加了对名字和含义数量是否匹配的检查，如果数量不匹配，则跳过当前页面，并输出警告信息。
移除不必要的代码: 移除了点击弹窗和删除广告元素的代码，因为这些操作不是获取数据的必要步骤。
精简字符串处理: 使用 split(/[\n\t]/).join('').trim() 方法更简洁地去除名字中的换行符和制表符。

注意事项

headless 模式: 在生产环境中，建议将 headless 设置为 true，以提高性能。
等待时间: await page.waitForTimeout(3000) 可以根据实际情况进行调整，以确保页面加载完成。
User-Agent: 为了避免被网站屏蔽，可以设置 User-Agent。
robots.txt: 在抓取任何网站之前，务必查看 robots.txt 文件，遵守网站的抓取规则。
动态内容: 如果网站使用 JavaScript 动态加载内容，可能需要使用 await page.waitForSelector 或 await page.waitForFunction 等待特定元素加载完成。

总结

通过改进选择器、优化循环方式、增加错误处理和移除不必要的代码，可以有效解决 Puppeteer 抓取网页数据时返回空数组的问题。在实际应用中，需要根据目标网站的特点，灵活调整代码，并注意遵守网站的抓取规则。

以上就是使用 Puppeteer 抓取网页数据时返回空数组的解决方案的详细内容，更多请关注php中文网其它相关文章！