本文旨在解决在使用 Puppeteer 抓取网页数据时，遇到返回空数组的问题。通过分析问题代码，找到导致问题的原因，并提供修正后的代码示例，确保能正确抓取目标网站的数据，并清晰地呈现抓取结果。本文重点关注选择器的使用和异步操作的处理，帮助开发者避免类似问题。
在使用 Puppeteer 进行网页数据抓取时，返回空数组是一个常见的问题。通常，这与选择器错误、异步操作未正确处理或目标元素未加载有关。下面将分析一个实际案例，并提供解决方案。
问题分析
原始代码尝试从 https://naamhinaam.com/baby-girl-names-a 网站抓取婴儿名字和含义。代码存在以下潜在问题：
- 复杂的选择器： 使用了非常具体的 CSS 选择器 div.name-suggestion.mt-1 > div > div:nth-child(${i}) > div.nsg__name_meaning > a，这可能不够稳定，容易受到网站结构变化的影响。
- 不必要的元素移除： 移除广告元素的代码可能会影响后续元素的选择，导致索引错误。
- 重复的条件判断： if (await page.$("div.name-suggestion.mt-1 > div > div:nth-child(22)")) 出现了两次，意义不大。
- 异步操作处理： 虽然使用了 await page.waitForTimeout(3000)，但可能仍然不足以确保所有元素都已加载完成。
- 循环中的异步操作： 在循环中使用 await page.$ 和 await page.evaluate，可能导致性能问题，并且增加了出错的可能性。
解决方案
以下是修正后的代码，它解决了上述问题：
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, // 建议设置为 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 作为选择器，更加简洁和稳定。
- 移除不必要的代码： 移除了点击弹窗和移除广告元素的代码，因为它们与数据抓取没有直接关系。
- 使用 page.$$ 获取所有元素： 使用 page.$$ 一次性获取所有名字和含义的元素，避免了在循环中多次进行 DOM 查询。
- 清晰的数据提取： 使用 page.evaluate 提取每个元素的文本内容，并将名字和含义组合成 fullName。
- Headless 模式： 将 headless 设置为 true，可以在后台运行浏览器，提高效率。
注意事项：
- 网站结构变化： 网页结构可能会发生变化，导致选择器失效。需要定期检查和更新选择器。
- 反爬机制： 网站可能会采取反爬机制，例如验证码、IP 封锁等。需要采取相应的措施来应对，例如使用代理 IP、设置 User-Agent 等。
- 遵守 Robots.txt： 抓取网页数据时，务必遵守网站的 robots.txt 协议，避免抓取不允许抓取的页面。
- 请求频率控制： 控制请求频率，避免对网站服务器造成过大的压力。
总结
通过简化选择器、移除不必要的代码、使用 page.$$ 获取所有元素以及清晰的数据提取，可以有效地解决 Puppeteer 抓取网页数据返回空数组的问题。同时，需要注意网站结构变化、反爬机制以及遵守 robots.txt 协议。通过不断学习和实践，可以更好地掌握 Puppeteer 的使用技巧，并高效地抓取所需的网页数据.
