Puppeteer网页抓取：解决图片元素选择器失效及src属性获取问题

/* 过于依赖层级，易受页面结构变化影响 */
'#mm-preview-outer > div.mm-preview > img'
/* 依赖alt属性，可能不稳定或不存在 */
'img[alt="meme generator image preview"]'

/* 使用精确的类选择器 */
'img.mm-img'

/* 使用属性前缀匹配，^= 表示以...开头 */
'img[class^=mm-img]'

// 原始代码 (可能无法正常工作)
// const imageurl = await page.$eval('img[alt="Imgflip Logo"]', el => el.src);

// 优化后的代码 (推荐)
const imageurl = await page2.$eval('img[class^=mm-img]', el => el.getAttribute('src'));

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true, // 生产环境推荐无头模式
        defaultViewport: null, // 允许页面根据内容调整视口
    });

    const page = await browser.newPage();
    // 导航到列表页，等待网络空闲，设置超时时间
    await page.goto('https://imgflip.com/memetemplates', { waitUntil: "networkidle2", timeout: 30000 });
    // 等待关键选择器出现，确保页面加载稳定
    await page.waitForSelector('.mt-box');

    // 获取所有模版盒子
    const boxes = await page.$$('.mt-box');

    for (let box of boxes) {
        let page2 = null; // 在循环内部声明，确保每次迭代都是新的页面实例
        try {
            // 从当前box元素中获取标题和链接
            const title = await box.$eval('h3 > a', el => el.textContent);
            const link = await box.$eval('a.mt-caption', el => el.getAttribute('href'));

            page2 = await browser.newPage(); // 为每个详情页创建新页面
            // 导航到详情页，等待网络空闲，设置超时时间
            await page2.goto(`https://imgflip.com${link}`, { waitUntil: "networkidle2", timeout: 30000 });
            // 等待详情页的关键元素加载
            await page2.waitForSelector('body');

            // 使用优化后的选择器和getAttribute获取图片src
            const imageurl = await page2.$eval('img[class^=mm-img]', el => el.getAttribute('src'));

            console.log(`标题: ${title}`);
            console.log(`图片URL: ${imageurl}`);

        } catch (error) {
            console.error(`处理过程中发生错误: ${error.message}`);
        } finally {
            // 确保每个创建的详情页都被关闭，释放资源
            if (page2) {
                await page2.close();
            }
        }
    }

    await browser.close(); // 关闭浏览器实例
})();

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        defaultViewport: null,
    });

    const page = await browser.newPage();
    await page.goto('https://imgflip.com/memetemplates', { waitUntil: "networkidle2", timeout: 30000 });
    await page.waitForSelector('.mt-box');

    const boxes = await page.$$('.mt-box');
    let allMemesData = [];

    for (let box of boxes) {
        let page2 = null;
        try {
            const data = await box.$eval('.mt-title > a', el => {
                return { link: el.getAttribute('href'), text: el.textContent };
            });

            page2 = await browser.newPage();
            await page2.goto(`https://imgflip.com${data.link}`, { waitUntil: "networkidle2", timeout: 30000 });
            await page2.waitForSelector('body');

            // 查找详情页中可能存在的相关模版，使用:has()伪类检查是否存在h2标题
            // :has(h2) 确保选择的.base-unit是包含h2标题的有效内容块，而不是空或广告
            const relatedMemes = await page2.$$(".base-unit:has(h2)");
            let relativeMemesList = [];

            for (let m of relatedMemes) {
                const titleInfo = await m.$eval('h2 > a', el => {
                    return { link: el.getAttribute("href"), text: el.textContent };
                });

                let imageUrl = '';
                // 检查图片是在div.base-img中（可能用data-src）还是直接在a标签中（用src）
                const divBaseImg = await m.$('div.base-img');
                if (divBaseImg) {
                    // 如果存在div.base-img，尝试获取其data-src属性
                    imageUrl = await m.$eval('div.base-img', el => el.getAttribute("data-src") || el.getAttribute("src"));
                } else {
                    // 否则，尝试从img标签直接获取src
                    imageUrl = await m.$eval('img', el => el.getAttribute("src"));
                }

                if (imageUrl) { // 确保图片URL不为空
                    relativeMemesList.push({
                        link: titleInfo.link,
                        text: titleInfo.text,
                        image: imageUrl
                    });
                }
            }
            await page2.close();

            allMemesData.push({
                link: data.link,
                text: data.text,
                relative: relativeMemesList
            });

        } catch (error) {
            console.error(`处理过程中发生错误: ${error.message}`);
        } finally {
            if (page2) {
                await page2.close();
            }
        }
    }

    await browser.close();
    console.dir(allMemesData, { depth: null }); // 打印所有抓取到的数据
})();