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

本文旨在解决在使用 Puppeteer 抓取网页数据时，遇到返回空数组的问题。通过分析问题代码，找到导致问题的原因，并提供修正后的代码示例，确保能正确抓取目标网站的数据，并清晰地呈现抓取结果。本文重点关注选择器的使用和异步操作的处理，帮助开发者避免类似问题。

在使用 Puppeteer 进行网页数据抓取时，返回空数组是一个常见的问题。通常，这与选择器错误、异步操作未正确处理或目标元素未加载有关。下面将分析一个实际案例，并提供解决方案。

问题分析

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

1. 复杂的选择器： 使用了非常具体的 css 选择器 div.name-suggestion.mt-1 > div > div:nth-child(${i}) > div.nsg__name_meaning > a，这可能不够稳定，容易受到网站结构变化的影响。
2. 不必要的元素移除： 移除广告元素的代码可能会影响后续元素的选择，导致索引错误。
3. 重复的条件判断： if (await page.$(“div.name-suggestion.mt-1 > div > div:nth-child(22)”)) 出现了两次，意义不大。
4. 异步操作处理： 虽然使用了 await page.waitForTimeout(3000)，但可能仍然不足以确保所有元素都已加载完成。
5. 循环中的异步操作： 在循环中使用 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(/[nt]/).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..."); });

代码解释：

1. 简化选择器： 使用 a.nsg__name 和 div.nsg__meaning > i 作为选择器，更加简洁和稳定。
2. 移除不必要的代码： 移除了点击弹窗和移除广告元素的代码，因为它们与数据抓取没有直接关系。
3. 使用 page.$$ 获取所有元素： 使用 page.$$ 一次性获取所有名字和含义的元素，避免了在循环中多次进行 dom 查询。
4. 清晰的数据提取： 使用 page.evaluate 提取每个元素的文本内容，并将名字和含义组合成 fullName。
5. Headless 模式： 将 headless 设置为 true，可以在后台运行浏览器，提高效率。

注意事项：

• 网站结构变化： 网页结构可能会发生变化，导致选择器失效。需要定期检查和更新选择器。
• 反爬机制： 网站可能会采取反爬机制，例如验证码、IP 封锁等。需要采取相应的措施来应对，例如使用代理 IP、设置 User-Agent 等。
• 遵守 Robots.txt： 抓取网页数据时，务必遵守网站的 robots.txt 协议，避免抓取不允许抓取的页面。
• 请求频率控制： 控制请求频率，避免对网站服务器造成过大的压力。

总结

通过简化选择器、移除不必要的代码、使用 page.$$ 获取所有元素以及清晰的数据提取，可以有效地解决 Puppeteer 抓取网页数据返回空数组的问题。同时，需要注意网站结构变化、反爬机制以及遵守 robots.txt 协议。通过不断学习和实践，可以更好地掌握 Puppeteer 的使用技巧，并高效地抓取所需的网页数据.