[Question] - Screenshot on lazyload sites

[Tymotey]

I have been trying to make a screenshot for a link that has lazyload images.
This is what I have so far:

const page = await context.newPage()
await page.goto(site, {waitUntil: 'domcontentloaded'})
var resources_before = 0
const watchComplete = page.waitForFunction((resources_before) => {
  let body = document.body
  let html = document.scrollingElement || document.documentElement
  let viewportHeight = window.innerHeight
  let documentHeight = Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight)
  const getScrollState = async () => {
    return await new Promise(resolve => {
      setTimeout(function () {
        html.scrollTop = html.scrollTop + viewportHeight
        if (html.scrollTop >= (documentHeight - viewportHeight)) {
          resolve('scrolled_bottom')
        } else {
          resolve('not_scrolled_bottom')
        }
      }, 500)
    }).then((val) => {
      window.scroll_state = val;
    })
  };
  getScrollState()
  if ('scrolled_bottom' === window.scroll_state) {
    return_val = true
  } else {
    return_val = false
  }
  return return_val
}, resources_before, {
  polling: 1000
})
await watchComplete
await page.evaluate(() => {
  window.scrollTo(0, 0);
})
await page.screenshot({
    type: 'jpeg',
    fullPage: true,
    waitUntil: 'networkidle0'
})

I want to get rid of the hardcoded times from code and make the screenshot fire at the moment all resources are loaded. Any ideeas?

resources_before - I wanted to compare the nr of resources after scroll with the number before and wait for load.

Thank you!

[celeryclub]

I think your best bet here is to have some code in your app that sets a state variable, and then use waitForFunction to check that variable in your test code.

App code

// check if images are loaded, then run this
window.allImagesLoaded = true;

Test code

await page.waitForFunction(() => {
  return window.allImagesLoaded === true;
});
await page.screenshot({...});

[pavelfeldman]

This advice looks great. Closing for now, please feel free to reopn.