使用 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(/[nt]/).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(/[nt]/).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 抓取网页数据时返回空数组的问题。在实际应用中，需要根据目标网站的特点，灵活调整代码，并注意遵守网站的抓取规则。