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

Question

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 的情况，请问大佬们如何解决这问题的

Answer 1

await page.waitFor(5000)

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

Answer 2

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

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即可。