Puppeteer元素选择器故障排除：图片SRC获取与动态内容抓取实战

await page2.waitForSelector('img.mm-img'); // 等待目标图片加载
// 或等待页面主体内容加载
await page2.waitForSelector('body');

// 原始代码中的问题行
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');
    let allMemes = [];

    for (const box of boxes) {
        let page2; // 在循环内部声明，确保每次迭代都有一个新的页面实例
        try {
            // 从当前模板框中提取标题和链接
            const title = await box.$eval('h3 > a', el => el.textContent.trim());
            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('img[class^=mm-img]', { timeout: 10000 }); // 等待目标图片元素加载

            // 获取主图片URL
            const imageUrl = await page2.$eval('img[class^=mm-img]', el => el.getAttribute('src'));

            console.log("The source of", title, "is");
            console.log(imageUrl);

            allMemes.push({ title, link, imageUrl });

        } catch (error) {
            console.error(`Error processing meme: ${error.message}`);
            // 可以选择在这里记录错误详情或跳过当前项
        } finally {
            if (page2) {
                await page2.close(); // 确保关闭不再需要的页面，释放资源
            }
        }
    }

    await browser.close();
    console.log('\n--- All Memes Data ---');
    console.dir(allMemes, { depth: null });
})();

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('#page'); // 等待页面主体加载

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

    for (let box of boxes) {
        let page2;
        try {
            // 获取模板的链接和标题
            let data = await box.$eval('.mt-title > a', el => {
                return { link: el.getAttribute('href'), text: el.textContent.trim() };
            });

            page2 = await browser.newPage();
            await page2.goto(`https://imgflip.com${data.link}`, { waitUntil: "networkidle2", timeout: 30000 });
            await page2.waitForSelector('body'); // 确保页面主体加载

            // 使用:has()伪类选择器，查找包含h2标题的.base-unit，避免抓取空或广告单元
            let memes = await page2.$$(".base-unit:has(h2)");
            let relativeMemes = [];

            for (let m of memes) { // 遍历页面上的所有相关表情包
                let titleData = await m.$eval('h2 > a', el => {
                    return { link: el.getAttribute("href"), text: el.textContent.trim() };
                });

                let imageUrl = null;
                // 检查图片是存在于div.base-img中（可能使用data-src）还是直接在a标签中（使用src）
                const divImgElement = await m.$('div.base-img');
                if (divImgElement) {
                    imageUrl = await m.$eval('div.base-img', el => el.getAttribute("data-src") || el.getAttribute("src"));
                } else {
                    // 如果不是div.base-img，则尝试从a标签下的img获取
                    const imgElement = await m.$('a.base-img img'); // 假设图片可能在a标签内
                    if (imgElement) {
                        imageUrl = await m.$eval('a.base-img img', el => el.getAttribute("src"));
                    }
                }

                if (imageUrl) {
                    relativeMemes.push({ link: titleData.link, text: titleData.text, image: imageUrl });
                }
            }
            await page2.close();

            allMemeTemplatesWithRelatedMemes.push({
                link: data.link,
                text: data.text,
                relativeMemes: relativeMemes
            });

        } catch (error) {
            console.error(`Error processing template ${box.id || 'unknown'}: ${error.message}`);
        } finally {
            if (page2) {
                await page2.close();
            }
        }
    }

    await browser.close();
    console.log('\n--- All Meme Templates with Related Memes Data ---');
    console.dir(allMemeTemplatesWithRelatedMemes, { depth: null });
})();