使用Puppeteer获取元素innerHTML返回undefined的问题排查与解决

问题场景 #

爬取多个网站时，部分站点数据能正常获取，但部分站点始终返回undefined，打印获取到的元素得到ElementHandle {}。

核心代码如下：

const { url, selectors } = WebsiteUtils

const getData = async (url) => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage()
    await page.setViewport({
        height: 20000,
        width: 1500,
    })
    await page.goto(url, { waitUntil: 'networkidle2' })

    const link = page.$(selectors.link)
    return link.innerHTML
}

console.log(await getData(url))

其中selectors.link的值为ul，目标页面确实存在多个该元素。

已尝试的排查手段：

• 使用.waitForSelector等待元素加载
• 改用page.evaluate替代page.$
• 设置5秒超时确保页面完全加载
• 确认页面无iframe结构（最初判断）

以上方法均未解决问题。

解决方案 #

实际页面存在未在DevTools HTML面板显示的iframe，通过page.frames()遍历所有框架后发现了该iframe，改用frame.$eval()访问其内部内容后问题解决。

修改后的核心逻辑示例：

const getData = async (url) => {
    const browser = await puppeteer.launch({ headless: false })
    const page = await browser.newPage()
    await page.setViewport({
        height: 20000,
        width: 1500,
    })
    await page.goto(url, { waitUntil: 'networkidle2' })

    // 遍历所有框架，根据实际特征筛选目标iframe（如url、name等）
    const targetFrame = page.frames().find(frame => 
        frame.url().includes('目标域名')
    )

    if (targetFrame) {
        // 在iframe内获取元素内容
        const content = await targetFrame.$eval('ul', el => el.innerHTML)
        await browser.close()
        return content
    } else {
        console.log('未找到目标iframe')
        await browser.close()
        return null
    }
}

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