Puppeteer元素选择与属性获取深度解析：解决动态内容抓取难题

// 原始可能无效的选择器
// const imageurl = await page.$eval('img[alt="meme generator image preview"]', el => el.src);

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

// 原始可能导致问题的属性获取方式
// const imageurl = await page.$eval('selector', 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, // 建议在生产环境设置为true，提高性能
        defaultViewport: null, // 允许页面自适应视口大小
    });

    const page = await browser.newPage();
    // 导航到模板页面，并等待页面完全加载，设置超时
    await page.goto('https://imgflip.com/memetemplates', { waitUntil: "networkidle2", timeout: 30000 }); // networkidle2 更稳定，等待网络空闲
    await page.waitForSelector('.mt-box'); // 等待模板盒子加载完成

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

    for (let i = 0; i < boxes.length; i++) { // 使用索引迭代，避免在循环中修改boxes导致问题
        const box = boxes[i];
        try {
            // 在当前box的上下文中获取标题和链接
            let title = await box.$eval('h3 > a', el => el.textContent);
            let link = await box.$eval('a.mt-caption', el => el.getAttribute('href'));

            const page2 = await browser.newPage();
            // 导航到单个meme生成器页面，并等待页面完全加载，设置超时
            await page2.goto(`https://imgflip.com${link}`, { waitUntil: "networkidle2", timeout: 30000 });
            await page2.waitForSelector('img[class^=mm-img]'); // 等待目标图片元素加载完成

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

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

            await page2.close(); // 及时关闭当前页面，释放资源

        } catch (error) {
            console.error(`Error processing box ${i}:`, error);
        }
    }

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

})();

// ... (前略：Puppeteer启动和导航到模板页) ...

    let allMemesData = [];
    for (let box of boxes) {
        try {
            let data = await box.$eval('.mt-title > a', el => { return { link: el.getAttribute('href'), text: el.textContent } });
            const page2 = await browser.newPage();
            await page2.goto(`https://imgflip.com${data.link}`, { waitUntil: "networkidle2", timeout: 30000 });
            await page2.waitForSelector('body'); // 等待页面主体加载

            // 筛选包含h2标题的meme单元
            let memes = await page2.$$(".base-unit:has(h2)");
            let relativeMemes = [];
            for (let m of memes) {
                let title = await m.$eval('h2 > a', el => { return { link: el.getAttribute("href"), text: el.textContent }; });
                let image;
                // 判断图片是直接在.base-img中还是通过data-src加载
                if (await m.$('div.base-img')) { // 如果是div.base-img
                    image = await m.$eval('div.base-img', el => el.getAttribute("data-src"));
                } else if (await m.$('img.base-img')) { // 如果是img.base-img
                    image = await m.$eval('img.base-img', el => el.getAttribute("src"));
                } else {
                    image = null; // 或者其他默认值
                }
                relativeMemes.push({ link: title.link, text: title.text, image: image });
            }
            await page2.close();

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

        } catch (error) {
            console.error(`Error processing meme page:`, error);
        }
    }

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