Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

blank screenshot of element at the bottom of page

See original GitHub issue

Steps to reproduce

Tell us about your environment:

Puppeteer version: 1.14.0
Platform / OS version: centos(docker) / macOS
URLs (if applicable): null
Node.js version: 12.2.0

What steps will reproduce the problem?

.footer is the last element of a long page. I got an blank image.

I got the correct screenshot in more than one way:

Moved it forward
Set viewport height bigger than the content height.

<body>
  <div class="J_container" style="width: 1050px; margin: 0 auto;">
    <div class="header">...</div>
    <div class="report_main">...</div>
    <div class="footer" style="height: 300px; background: url(/static/images/footer.png) no-repeat center; ...other-style"></div>
  </div>
</body>

const browser = await puppeteer.launch({
  args: [
    '--no-sandbox',
    '--enable-font-antialiasing',
    '--disable-dev-shm-usage'
  ]
})

const page = await browser.newPage()

await page.setViewport({
  width: 1920,
  height: 100,
  deviceScaleFactor: 1
})

await page.goto('http://www.example.com', { waitUntil: ['load', 'networkidle0'] })

const selectors = ['.footer']

const base64Datas = []

while (selectors.length) {
  const selector = selectors.shift()
  const element = await page.$(selector)

  if (!element) {
    base64Datas.push(null)
    continue
  }

  const base64Data = await element.screenshot({ encoding: 'base64' })
  base64Datas.push(base64Data)
}

What is the expected result?

Got correct screenshot.

What happens instead?

Got an blank image.

Issue Analytics

State:
Created 4 years ago
Comments:5

Top GitHub Comments

1reaction

ryo-hisanocommented, Jun 13, 2019

@Manjiz No, it’s possible to get multi-factor income with your code.

const browser = await puppeteer.launch({
  args: [
    '--no-sandbox',
    '--enable-font-antialiasing',
    '--disable-dev-shm-usage'
  ]
})

const page = await browser.newPage()

await page.setViewport({
  width: 1920,
  height: 100,
  deviceScaleFactor: 1
})

await page.goto('http://www.example.com', { waitUntil: ['load', 'networkidle0'] })

const selectors = ['.header', '.footer']

const base64Datas = []

while (selectors.length) {
  const selector = selectors.shift()
  const element = await page.$(selector)

  if (!element) {
    base64Datas.push(null)
    continue
  }

  const clip = await page.evaluate(el => {
    const { width, height, top: y, left: x } = el.getBoundingClientRect()
    return { width, height, x, y }
  }, element)

  const base64Data = await page.screenshot({
    clip,
    encoding: 'base64'
  })

  //fs.writeFileSync(selector + '.png', base64Data, 'base64')
  base64Datas.push(base64Data)
}
// console.log(base64Datas)
browser.close();

0reactions

SarthakSri98commented, May 9, 2020

Still this is a very specific solution, like I have to change my code every now and then if I change the website url. What if I just want to keep scrolling and taking screenshots and in the last part I will clip the required part by calculating the remaining height of the website to be scrolled.