本文旨在解决在使用 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.$$ 获取所有目标元素的数组，然后在数组上进行迭代。
解决方案
以下是经过修改的、更健壮和高效的代码：
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 抓取网页数据时返回空数组的问题。在实际应用中，需要根据目标网站的特点，灵活调整代码，并注意遵守网站的抓取规则。
