使用Puppeteer page.evaluate无法获取div子元素该如何解决？

• evaluate 内部的循环判断逻辑存在类型错误：document.getElementsByClassName 会返回 HTMLCollection 集合对象，你当前将它和字符串"undefined"做全等比较，判断逻辑永远不生效。只要DOM还没完全渲染完成，就会拿到空集合，访问dd[0]得到undefined，读取firstChild自然抛出错误。
• 你已经在外部调用了waitForSelector等待外层div渲染完成，但存在外层div已经挂载、内部img元素还没渲染的时序差，另外firstChild有可能匹配到div内部的空白文本节点，而非你要的img元素。

直接替换原有从waitForSelector开始的代码段即可：

// 原有await pg.waitForTimeout(5000) 可保留，也可根据网络情况调整时长
await pg.waitForSelector('.PostContent-imageWrapper-rounded img', { timeout: 10000 }) // 直接等待目标img元素渲染完成，最长等10秒
let imgSrc = await pg.evaluate(function(){
  return document.querySelector('.PostContent-imageWrapper-rounded img').src
})

修改后优化了两个点：

1. 直接等待img元素渲染完成再执行evaluate，不需要在evaluate内部写循环判断逻辑，Puppeteer自带的等待逻辑已经足够稳定。
2. 用querySelector直接匹配img元素，避免集合索引错误、空白文本节点匹配错误的问题。

如果需要做异常兼容，可以给evaluate加上空值判断：

let imgSrc = await pg.evaluate(function(){
  const targetImg = document.querySelector('.PostContent-imageWrapper-rounded img')
  return targetImg ? targetImg.src : ''
})
// 拿到返回值后可判断如果为空就重试上传流程

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