Heroku环境下Puppeteer无法正常渲染web应用获取目标HTML内容

• 页面等待策略不合理：本地网络环境好，2秒足够页面完成渲染，但Heroku机房网络延迟更高，固定2秒的等待时间不足以让目标页面的JS完成客户端渲染，你执行元素查询时页面还在加载中，自然拿到的是未渲染的原始资源。同时你调用page.goto时没有指定等待策略，默认仅监听load事件，而SPA类应用load事件触发时仅代表静态资源加载完成，还没完成客户端渲染逻辑。
• 反爬识别拦截：目标站点可能识别到Heroku的机房IP，或是Puppeteer默认无头浏览器的特征，故意返回未执行JS的原始页面，规避爬虫抓取。
• 版本兼容性问题：如果你的项目中Puppeteer版本和Heroku buildpack内置的Chromium版本不匹配，会导致JS执行异常，页面无法正常渲染。

• 优化页面等待逻辑
  修改page.goto的配置，用更严格的加载判定规则，同时替换固定等待时间为目标元素等待逻辑，确保元素渲染完成后再执行抓取：

return await puppeteer.launch({
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    // 新增适配Heroku环境和反识别的参数
    '--disable-dev-shm-usage',
    '--disable-gpu',
    '--no-first-run',
    '--no-zygote',
    // 替换为你本地Chrome浏览器的UA，避免特征识别
    '--user-agent=Mozilla/5.0 (Macintosh; Intel Mac OS X 13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Safari/537.36'
  ],
  headless: true,
}).then(async browser => {
  const page = await browser.newPage()
  page.setJavaScriptEnabled(true)

  // 修改goto配置，等待网络完全空闲再判定加载完成，超时拉长到60秒适配Heroku慢网络
  await page.goto(targetUrl, {
    waitUntil: 'networkidle0',
    timeout: 60000
  })

  // 替换固定等待为等待目标选择器出现，最多等10秒
  await page.waitForSelector(SELECTORS, { timeout: 10000 })
  const data = await page.$$eval(SELECTORS, (res) => {
      return res.map(r => {
        return r.getAttribute('ATRR')
      })
    }) as never as string[]

    .......
})

• 排查版本兼容性
  确认你package.json中Puppeteer的版本和使用的buildpack支持的Chromium版本匹配，不要使用太新的测试版Puppeteer，避免兼容问题。
• 增加调试日志
  如果修改后还是异常，可以在执行元素查询前打印当前页面的完整HTML，或是调用Puppeteer截图接口保存当前页面快照，确认是否是被反爬拦截返回了验证页面或是未渲染内容。

内容的提问来源于stack exchange，提问作者Aviv Ben Shahar