Is it possible to access document.body.scrollHeight with the chromeless API?

Question

I would like to capture a fullpage screenshot using the chromless api. (Fullpage as in everything below the fold, not just the current viewport.

In order to do this, I think one would calculate the height of the webpage (using document.body.scrollHeight), and set the viewport height to that value.

Here is what I currently have, I am testing on their demo site:

const chromeless = new Chromeless({ remote: true })

const screenshot = await chromeless
  .goto('https://www.graph.cool')
  .setViewport({width: 1024, height: 800, scale: 1})
  .evaluate(() => {
    const height = document.body.scrollHeight;
    return height
    })
  .setViewport({width: 1024, height: height, scale: 1})
  .screenshot()

console.log(screenshot)

await chromeless.end()

I think (hope) my javascript is okay, and maybe this is a limitation of the API? Is the document object accessible from a headless web browser?

Here is the documentation on evaluate for reference: https://github.com/graphcool/chromeless/blob/master/docs/api.md#api-evaluate

Answer 1

It's possible to screenshot the full page by grabbing the document's height like this (demo):

const chromeless = new Chromeless({ remote: true })

const scrollHeight = await chromeless
  .goto('https://www.graph.cool')
  .evaluate(() => document.body.scrollHeight)

console.log(`The document's height is ${scrollHeight}px`)

const screenshot = await chromeless
  .setViewport({width: 1024, height: scrollHeight, scale: 1})
  .screenshot()

console.log(screenshot)

await chromeless.end()

The main thing to note is that we have to return the height from the evaluate() call and assign that to a variable scrollHeight which we can then use to set the viewport's height.