Puppeteer爬取React动态区块链页面元素返回空值的问题求助

问题根源 #

1. 语法错误：page.$$('.tag-item')返回的是元素对象数组，你直接调用f.getProperty，数组没有这个方法，导致TypeError。
2. 元素加载不充分：虽然设置了waitUntil: 'networkidle0'，但React动态渲染的内容可能滞后于网络空闲状态，此时元素还未生成，导致定位失败。

修复方案 #

1. 修正元素获取逻辑

• 若只需要第一个匹配的标签，用page.$获取单个元素，而非page.$$（返回数组）；
• 用$eval或evaluate直接在页面上下文获取元素文本，比getProperty更简洁可靠。

2. 确保元素完全加载

添加page.waitForSelector等待目标元素出现，设置合理超时时间，避免因渲染滞后导致的元素未找到问题。

3. 容错处理，保证排查文件生成

用try-catch包裹核心逻辑，即使爬取出错，也能生成页面HTML文件用于排查问题。

修复后的完整代码 #

const puppeteer = require('puppeteer'); 
const fs = require('fs').promises; 

(async () => { 
    const browser = await puppeteer.launch(); 
    try {
        const page = await browser.newPage(); 
        await page.goto('https://tronscan.org/#/address/TAzsQ9Gx8eqFNFSKbeXrbi45CuVPHzA8wr', {
            waitUntil: 'networkidle0', 
        }); 

        // 等待目标标签元素加载，超时10秒
        await page.waitForSelector('.tag-item', { timeout: 10000 });

        // 获取第一个标签的文本内容
        const tagText = await page.$eval('.tag-item', el => el.textContent.trim());
        console.log("label is: " + tagText);

        // 生成页面HTML用于排查
        const html = await page.content(); 
        await fs.writeFile('tronscan-page.html', html); 
    } catch (err) {
        console.error('爬取出错:', err);
        // 出错时也保存页面内容
        const activePage = (await browser.pages())[0];
        const errorHtml = await activePage.content(); 
        await fs.writeFile('tronscan-error-page.html', errorHtml); 
    } finally {
        await browser.close(); 
    }
})();

额外处理场景 #

如果页面中有多个标签需要获取，改用$$eval批量获取：

const allTags = await page.$$eval('.tag-item', els => els.map(el => el.textContent.trim()));
console.log("所有标签:", allTags);

若仍无法定位元素，需检查：

• 是否存在反爬限制（如IP封禁、需要登录验证）；
• 目标元素是否嵌套在iframe中（可通过page.frames()遍历所有iframe，再在iframe内定位元素）。

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