如何在Puppeteer中获取DOM元素值？以Instagram的span标签为例

你遇到的JsHandle@node是因为waitForSelector返回的是ElementHandle对象，并非直接的文本内容。要拿到span里的文本，有几种实用方法：

方法一：直接在页面上下文获取文本（推荐） #

用page.evaluate()直接在浏览器环境中执行DOM操作，获取目标元素的文本：

async function startInstagram(){
    const browser = await puppeteer.launch({headless: false})
    const page = await browser.newPage()
    await page.goto('https://www.instagram.com/50cent/', { waitUntil: 'networkidle2' }) // 等待页面加载完成

    // 直接在页面上下文中获取span的文本
    const subsText = await page.evaluate(() => {
        // 用结构选择器替代动态类名（Instagram类名会频繁变化）
        const spanElement = document.querySelector('li:nth-child(2) span span');
        return spanElement ? spanElement.textContent : '获取失败';
    });

    console.log('粉丝数：', subsText);
    await browser.close()
}

startInstagram()

方法二：通过ElementHandle提取文本 #

如果已经用waitForSelector拿到了ElementHandle，可以用以下两种方式提取文本：

async function startInstagram(){
    const browser = await puppeteer.launch({headless: false})
    const page = await browser.newPage()
    await page.goto('https://www.instagram.com/50cent/', { waitUntil: 'networkidle2' })

    // 获取ElementHandle
    const subsElement = await page.waitForSelector('li:nth-child(2) span span')
        .catch(e => console.log('选择器错误：', e));

    if (subsElement) {
        // 方式A：用evaluate获取文本
        const subsText = await subsElement.evaluate(el => el.textContent);
        // 方式B：用getProperty + jsonValue
        // const subsText = await (await subsElement.getProperty('textContent')).jsonValue();
        
        console.log('粉丝数：', subsText);
    }

    await browser.close()
}

startInstagram()

关键修正点 #

• 你原代码存在变量名不一致问题：定义了html却调用subs.asElement()，会直接报错；
• Instagram的动态类名（比如mount_0_0_qQ）会定期变化，建议用基于页面结构的稳定选择器；
• 加上waitUntil: 'networkidle2'确保页面完全渲染，避免元素未加载就执行获取操作。

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