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

本文旨在解决在使用 Puppeteer 抓取网页数据时，遇到返回空数组的问题。通过分析常见原因，并提供优化后的代码示例，帮助开发者更有效地抓取目标网站的数据，并避免抓取结果为空的情况。本文将重点关注选择器优化、页面元素加载以及数据提取等关键环节。

问题分析

在使用 Puppeteer 进行网页数据抓取时，返回空数组通常有以下几个原因：

1. 选择器错误： CSS 选择器或 XPath 表达式不正确，导致无法找到目标元素。
2. 页面未完全加载： 在执行抓取操作时，页面可能尚未完全加载，导致元素不存在。
3. 动态内容： 目标数据是通过 JavaScript 动态加载的，Puppeteer 需要等待数据加载完成。
4. 元素被移除或隐藏： 目标元素在抓取前被移除或隐藏，导致无法获取数据。
5. 循环逻辑错误： 循环遍历元素时，索引或条件判断错误，导致没有正确提取所有数据。

解决方案

针对以上问题，可以采取以下措施：

1. 优化选择器： 使用更精确的选择器，确保能够唯一地定位到目标元素。可以使用浏览器的开发者工具来辅助选择器的编写。
2. 等待页面加载： 使用 page.waitForSelector() 或 page.waitForTimeout() 等方法，确保页面元素加载完成后再执行抓取操作。
3. 处理动态内容： 使用 page.waitForFunction() 等方法，等待动态数据加载完成。
4. 检查元素是否存在： 在抓取元素之前，使用 page.$() 方法检查元素是否存在，避免因元素不存在而导致错误。
5. 优化循环逻辑： 仔细检查循环的索引和条件判断，确保能够正确遍历所有目标元素。

代码示例

以下是一个优化后的 Puppeteer 代码示例，用于抓取网页上的婴儿名字和含义。

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

22

查看详情

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`);

    // 循环遍历元素
    for (let i = 0; i < nameElements.length; i++) {
      let fullName = "";
      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 });
    }
  }

  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 更加精确地定位到名字和含义元素。
• 去除不必要的点击操作： 移除了点击弹窗的操作，因为这与数据抓取无关。
• 循环遍历： 使用 for 循环遍历所有名字和含义元素，并将它们组合成完整的数据。
• 文本处理： 使用 split(/[\n\t]/).join('').trim() 清理文本数据，去除换行符、制表符和空格。

注意事项

• 网站反爬机制： 某些网站可能会采取反爬机制，例如验证码、IP 限制等。需要根据实际情况采取相应的应对措施，例如使用代理 IP、设置 User-Agent 等。
• 遵守网站规则： 在抓取网页数据时，应遵守网站的 Robots.txt 协议，避免过度抓取，以免对网站造成负担。
• 数据清洗： 抓取到的数据可能包含噪声，需要进行清洗和处理，才能得到有效的信息。

总结

通过优化选择器、等待页面加载、处理动态内容、检查元素是否存在以及优化循环逻辑等措施，可以有效解决 Puppeteer 抓取网页数据返回空数组的问题。在实际应用中，需要根据具体情况进行调整和优化，才能获得理想的抓取效果。

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