puppeteer 批量截图如何保证截图质量

puppeteer 批量截图如何保证截图质量

外层 for 循环任务列表。贴出里面的代码

// 启动 Chromium
      const browser = await puppeteer.launch({ ignoreHTTPSErrors: true, headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] }).catch( err => {
        console.log('launch-err: ' + err)
        reject('fail')
      })
      // 打开新页面
      const page = await browser.newPage()
      // 设置页面分辨率
      await page.setViewport({ width: 1920, height: 1080 })

      // 访问
      console.log('website-> ' + taskInfo[2])
      await page.goto(taskInfo[2], { waitUntil: ['domcontentloaded', 'load','networkidle0'] }).catch(err => {
        console.log('goto-err-> ' + err)
        reject('fail')
      })
      await page.waitFor(5000)

      try {
        // 截图
        await page.screenshot({ path: snapShotFolerPath + snapshotName, fullPage: true }).catch(err => {
          console.log('screenshot-err-> ' + err)
          reject('fail')
        })
      } catch (e) {
        reject('fail')
        console.log('failed ' + e)
      } 

现在遇到的问题是截图可以成功,但是发现某些截图会遇到空白或 404 的情况,请问大佬们如何解决这问题的

阅读 8k
2 个回答
await page.waitFor(5000)

因为你只是等了5s,和加载完成没有必然联系。如果某个元素出现意味着完成,那你该使用await page.waitForSelector,如果要等待前端某些事件或者需要前端脚本才能确定完成,那你可以使用await page.evaluate

新手上路,请多包涵

需要配合截图的网页共同完成

node端代码:

await page.waitForFunction(() =>
    document.getElementById('__rendered') &&
    document.getElementById('__rendered').value === 'ok',
    {
       timeout: 10000 // 超时时常
    }
) // 等待网页中__rendered元素出现

网页里加入一个表单隐藏域:

<input type="hidden" id="__rendered" value="no" />

网页端js:

$("#__rendered").val('ok')

在你需要截图的网页中,加入页面完全渲染完的事件,至于具体怎样才算完全加载完成,需要根据你的业务自行决定。加载完成后只需要将__rendered改为ok即可。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题