Can't set a specific areas to be screenshotted

[fusionx1]

This one is more of a feature, I hope we will have the capability of setting up the specific section in the page to be screenshotted.

[LucianoGanga]

I think that one is a hard feature... haha

From the 'user' point of view. How would you like to define the section to be screenshotted?

[LucianoGanga]

Well, you got me thinking.. And as I had to make some fixes in the screenshot methods, I made this for you :)

https://github.com/LucianoGanga/simple-headless-chrome/blob/master/examples/simple-headless-chrome-files.png

https://github.com/LucianoGanga/simple-headless-chrome/blob/master/examples/screenCapture.js

I hope it helps!

Oh, and in that case you only have to pass a selector, but you can also pass a property called "clip", with a Viewport object, so you can manually select the area that you want to screenshot.

Besides that, there's a method called getSelectorViewport() where you can obtain the viewport of a element in a selector. That's useful if you want to, let's say, combine 2 elements and make the viewport the sum of both.

An example of the "clip" parameter may be:

    await mainTab.saveScreenshot('./examples/simple-headless-chrome-clip', {
      clip: {
              x: 350, // X coordinate reference point
              y: 700, // Y coordinate reference point
              width: this.options.deviceMetrics.width, // Width of the screenshot
              height: this.options.deviceMetrics.height, // Height of the screenshot
              scale: this.options.deviceMetrics.deviceScaleFactor // Scale (I don't understand it yet 😅)
      }        
    })

Please let me know if there's a problem with this, but the example worked for me.

Cheers! Lucho

[fusionx1]

Hi Luciano,

Thank you so much for providing this feature. Ive been trying to make this work for the last 2 weeks but i always failed, even using 4.3.1 or 4.3.2