Puppeteer抓取数据返回空数组解决方法

在使用 Puppeteer 进行网页数据抓取时，遇到返回空数组的问题令人头疼？本文聚焦于解决这一常见难题，通过剖析问题代码，揭示选择器错误、异步操作处理不当及网页结构变化等潜在原因。我们以抓取 https://naamhinaam.com/baby-girl-names-a 网站婴儿名字和含义为例，提供了一份经过优化、更健壮高效的示例代码。该方案采用更稳定的选择器、批量获取元素、增加错误处理和数据验证等策略，有效避免了常见的 Puppeteer 使用错误。无论你是 Puppeteer 新手还是经验丰富的开发者，本文都能帮助你掌握更有效的数据提取技巧，提升网页数据抓取的成功率。

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

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

问题分析

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

1. 复杂的选择器和不稳定的索引: 代码中使用了基于索引的复杂 CSS 选择器，如 div.name-suggestion.mt-1 > div > div:nth-child(${i})。这种选择器依赖于页面结构的稳定性，一旦页面结构发生变化，选择器就会失效，导致抓取失败。同时，代码中尝试移除广告元素，但移除操作可能会影响后续元素的索引，导致数据错位或遗漏。

2. 不必要的 if 条件: 代码中重复检查 if (await page.$("div.name-suggestion.mt-1 > div > div:nth-child(22)")) 这样的条件，意义不大，并可能导致逻辑错误。

3. 低效的循环和选择器: 在每次循环迭代中，都使用 await page.$ 查找元素，这会增加执行时间。更高效的方法是先使用 await page.$$ 获取所有目标元素的数组，然后在数组上进行迭代。

解决方案

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

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...");
});

代码解释

1. 更稳定的选择器: 使用 a.nsg__name 和 div.nsg__meaning > i 替代了基于索引的复杂选择器，提高了代码的健壮性。
2. 批量获取元素: 使用 await page.$$ 一次性获取所有名字和含义的元素，减少了 Puppeteer 的调用次数，提高了效率。
3. 错误处理: 使用 try...catch 块捕获在 page.evaluate 中可能发生的错误，防止程序崩溃。
4. 数据验证: 增加了对名字和含义数量是否匹配的检查，如果数量不匹配，则跳过当前页面，并输出警告信息。
5. 移除不必要的代码: 移除了点击弹窗和删除广告元素的代码，因为这些操作不是获取数据的必要步骤。
6. 精简字符串处理: 使用 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抓取数据返回空数组解决方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！