使用Puppeteer无法获取网页动态Div内容的问题求助

当然可以用Puppeteer获取动态内容，你的问题出在页面加载完成后，动态内容还没通过接口请求渲染出来，就执行了获取操作。以下是几种可行的修复方案：

方案1：等待特定元素出现并加载完成 #

如果知道目标Div的选择器（比如#target-status-div），可以用page.waitForSelector明确等待该元素出现，甚至等待它有内容：

const puppeteer = require('puppeteer');
function run () {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();

            await page.goto("<URL>/status.html", { waitUntil: 'networkidle0' });
            // 等待目标Div出现，并且内容非空
            await page.waitForSelector('#target-status-div', {
                visible: true, // 确保元素可见
                timeout: 10000 // 超时时间，防止无限等待
            });
            
            let urls = await page.evaluate(() => {
                let results = [];
                let items = document.querySelectorAll('div');

                items.forEach((item) => {
                    results.push({
                        url:  item.getAttribute('id'),
                        text: item.innerText,
                    });
                });
                return results;
            })
            await browser.close();
            return resolve(urls);
        } catch (e) {
            await browser.close();
            return reject(e);
        }
    })
}
run().then(console.log).catch(console.error);

方案2：等待接口请求完成 #

如果知道动态内容对应的接口URL，可以监听该请求完成后再获取内容：

const puppeteer = require('puppeteer');
function run () {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();

            // 监听目标接口请求完成
            await page.waitForResponse(response => {
                return response.url().includes("/api/status") && response.ok();
            });
            
            await page.goto("<URL>/status.html", { waitUntil: 'networkidle0' });
            
            let urls = await page.evaluate(() => {
                let results = [];
                let items = document.querySelectorAll('div');

                items.forEach((item) => {
                    results.push({
                        url:  item.getAttribute('id'),
                        text: item.innerText,
                    });
                });
                return results;
            })
            await browser.close();
            return resolve(urls);
        } catch (e) {
            await browser.close();
            return reject(e);
        }
    })
}
run().then(console.log).catch(console.error);

方案3：强制等待一段时间（简单但不推荐） #

如果不确定选择器或接口，也可以用page.waitForTimeout强制等待几秒，让内容加载完成：

const puppeteer = require('puppeteer');
function run () {
    return new Promise(async (resolve, reject) => {
        try {
            const browser = await puppeteer.launch();
            const page = await browser.newPage();

            await page.goto("<URL>/status.html", { waitUntil: 'networkidle0' });
            // 等待5秒，根据实际加载时间调整
            await page.waitForTimeout(5000);
            
            let urls = await page.evaluate(() => {
                let results = [];
                let items = document.querySelectorAll('div');

                items.forEach((item) => {
                    results.push({
                        url:  item.getAttribute('id'),
                        text: item.innerText,
                    });
                });
                return results;
            })
            await browser.close();
            return resolve(urls);
        } catch (e) {
            await browser.close();
            return reject(e);
        }
    })
}
run().then(console.log).catch(console.error);

注意事项 #

• 优先使用方案1或方案2，因为强制等待（方案3）不够灵活，容易因加载时间波动导致失败。
• 确保waitForSelector的选择器是目标Div的准确选择器，避免等待错误元素。
• 注意添加超时时间，防止因页面加载异常导致程序挂起。

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