如何将浏览器控制台可用的JS图片爬虫代码适配到app.js中用Puppeteer运行

你的思路是完全正确的，Puppeteer非常适合做这种需要模拟浏览器环境的爬取需求，你现有代码的核心错误是：无法直接将浏览器上下文中的DOM元素对象传递到Node.js运行环境，page.evaluate()的返回值必须是可JSON序列化的基础类型、数组或纯对象，DOM元素属于浏览器宿主对象无法序列化，所以你拿到的anchors本质是个空对象，后续遍历自然没有结果。

下面是修正后的可运行代码：

const puppeteer = require("puppeteer");

async function scrape(url) {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    // 等待页面DOM加载完成再执行后续逻辑
    await page.goto(url, { waitUntil: 'domcontentloaded' });

    // 所有DOM操作逻辑全部放到page.evaluate内部执行，直接返回处理好的链接数组
    const hrefs = await page.evaluate(() => {
        const anchors = document.getElementsByTagName('a');
        const result = [];
        for(let i=0; i < anchors.length; i++){ 
            const src = anchors[i].href;
            if(src.endsWith(".jpeg")) {
                result.push(src);
            }
        }
        return result;
    });   
    
    console.log('爬取到的jpeg链接：', hrefs);
    
    await browser.close();
    return hrefs;
}

// 调用示例，替换成你要爬的目标网址即可
scrape('https://你的目标网址.com')

主要修改点说明 #

• 把DOM遍历、链接筛选的逻辑全部移入page.evaluate()内部，直接返回可序列化的字符串数组，避开DOM对象无法跨环境传递的问题
• 给page.goto增加了加载等待参数，避免页面未加载完成就提前执行爬取逻辑导致拿不到元素
• 修正了变量作用域问题，删除了原有代码中外部不存在的img变量打印逻辑
• 给browser.close()增加了await关键字，避免异步操作未完成就退出浏览器引发报错
• 补充了函数调用示例，可直接替换目标网址测试运行

内容的提问来源于stack exchange，提问作者user16439643