使用Puppeteer爬取指定博客图片时数量不符问题求助

使用Node.js的Puppeteer编写爬虫，目标爬取博客URL（https://www.orcawise.com/blogs/blog-what-is-the-use-of-jwt）中的图片。在浏览器控制台通过document.querySelectorAll能获取到12张目标图片，但运行爬虫时得到64张，疑似抓取了全站所有图片；尝试修改选择器后，又只能获取到第一张图片，需要解决该问题。

原代码如下：

//importing the library
const puppeteer = require("puppeteer");
const fs = require("fs");


(async () => {

    try{

    const brower = await puppeteer.launch();
    const page = await brower.newPage();

    //defining the url to go to
    await page.goto(("https://www.orcawise.com/blogs/blog-what-is-the-use-of-jwt"), {
        waitUntil: 'load'
    });



    
    const imgList = await page.evaluate(() => {

        const nodeList = document.getElementsByTagName('img');

        const imgArray = [...nodeList]

        const imgList = imgArray.map( img => ({src: img.src}));

        return imgList;

        
     });

     //import imgList to jason

     fs.writeFile("listUrl.json", JSON.stringify(imgList, null, 2), err => {
        if(err) throw new Error("something wrong");
        console.log("sucessfull");
     })

     
           
   await brower.close();
} catch(error){
    console.log("error");
}
})();

1. 原代码用document.getElementsByTagName('img')会遍历整个页面所有<img>标签，包括导航栏、侧边栏、页脚等非博客正文区域的图片，因此得到64张图片的结果。
2. 之前修改选择器仅拿到第一张图片，大概率是误用了querySelector（只返回第一个匹配元素）而非querySelectorAll（返回所有匹配元素）。
3. waitUntil: 'load'的等待策略不够精准，部分图片可能未完全加载或渲染，影响结果准确性。
4. 代码存在拼写错误：brower应为browser，虽不影响运行，但属于不规范写法。

1. 精准定位目标容器：通过浏览器开发者工具查看页面结构，发现博客正文图片都在class为article-content的容器内，使用选择器.article-content img抓取目标图片。
2. 优化页面等待策略：将waitUntil改为'networkidle2'，确保页面网络请求基本完成后再执行抓取。
3. 修正拼写错误：统一将brower改为browser。
4. 改用fs.promises.writeFile，适配async/await异步编程风格。

修改后的代码如下：

// 导入依赖库
const puppeteer = require("puppeteer");
const fs = require("fs").promises;

(async () => {
    try {
        const browser = await puppeteer.launch();
        const page = await browser.newPage();

        // 访问目标博客页面
        await page.goto("https://www.orcawise.com/blogs/blog-what-is-the-use-of-jwt", {
            waitUntil: 'networkidle2' // 等待网络请求基本完成
        });

        // 抓取博客正文内的图片
        const imgList = await page.evaluate(() => {
            // 选择文章内容区域内的所有图片
            const nodeList = document.querySelectorAll('.article-content img');
            // 转换为数组并提取src属性
            return [...nodeList].map(img => ({ src: img.src }));
        });

        // 将结果写入JSON文件
        await fs.writeFile("listUrl.json", JSON.stringify(imgList, null, 2));
        console.log("抓取成功，结果已保存到listUrl.json");

        await browser.close();
    } catch (error) {
        console.error("抓取过程出错：", error);
    }
})();

运行修改后的代码，会精准抓取博客正文内的12张图片，结果与浏览器控制台查询的数量一致。

内容的提问来源于stack exchange，提问作者Carlos Eduardo Carmo do Nascim