如何在Puppeteer中遍历并提取Facebook帖子中的多张图片

我尝试遍历Facebook帖子中的图片，但不确定如何在遍历过程中提取这些图片，请问该如何解决？以下是我编写的Puppeteer代码：

(async()=>{

    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: false
    });

    const page = await browser.newPage();
    const url = `https://www.facebook.com/groups/133096796703382/permalink/5785155774830761/`;
    await page.goto(url, {"waitUntil": "networkidle2"});
    const images = await page.evaluate(()=>{

        Array.from(
            document.querySelectorAll('div[class="l9j0dhe7"] > img')
        )
    })

})();

1. 替换不稳定的选择器 #

Facebook页面的类名（比如l9j0dhe7）是动态生成的，随时可能失效，改用更可靠的属性选择器定位帖子图片：

document.querySelectorAll('img[data-testid="attachment_image"]')

2. 提取图片有效信息而非DOM元素 #

page.evaluate无法直接将DOM元素传递到Node.js环境，必须提取src、alt这类实际有用的属性：

const images = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('img[data-testid="attachment_image"]')).map(img => ({
    src: img.src,
    alt: img.alt || '无描述'
  }));
});

3. 处理登录验证 #

Facebook群组帖子需要登录才能访问，可通过缓存登录状态避免重复登录，或添加自动登录逻辑：

// 启动浏览器时指定缓存目录保存登录状态
const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: false,
    userDataDir: './fb-cache'
});

// 首次运行执行登录（后续自动读取缓存）
await page.goto('https://www.facebook.com/login', { waitUntil: 'networkidle2' });
const isLoggedIn = await page.$('[aria-label="你的个人主页"]') !== null;
if (!isLoggedIn) {
    await page.type('#email', '你的邮箱');
    await page.type('#pass', '你的密码');
    await page.click('[name="login"]');
    await page.waitForNavigation({ waitUntil: 'networkidle2' });
}

4. 等待图片加载完成 #

添加等待图片元素出现的逻辑，确保懒加载的图片被捕获：

await page.waitForSelector('img[data-testid="attachment_image"]', { timeout: 10000 });

完整修正代码 #

(async()=>{
    const puppeteer = require('puppeteer'); // 确保已安装puppeteer
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: false,
        userDataDir: './fb-cache' // 缓存登录状态
    });

    const page = await browser.newPage();
    const url = `https://www.facebook.com/groups/133096796703382/permalink/5785155774830761/`;
    
    // 处理登录
    await page.goto('https://www.facebook.com/login', { waitUntil: 'networkidle2' });
    const isLoggedIn = await page.$('[aria-label="你的个人主页"]') !== null;
    if (!isLoggedIn) {
        await page.type('#email', '你的邮箱');
        await page.type('#pass', '你的密码');
        await page.click('[name="login"]');
        await page.waitForNavigation({ waitUntil: 'networkidle2' });
    }

    // 访问目标帖子并等待图片加载
    await page.goto(url, { waitUntil: 'networkidle2' });
    await page.waitForSelector('img[data-testid="attachment_image"]', { timeout: 10000 });
    
    // 提取图片信息
    const images = await page.evaluate(() => {
        return Array.from(document.querySelectorAll('img[data-testid="attachment_image"]')).map(img => ({
            src: img.src,
            alt: img.alt || '无描述'
        }));
    });

    console.log('提取到的图片：', images);
    // await browser.close(); // 按需关闭浏览器
})();

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