Can't set a specific areas to be screenshotted - still unsuccessful

[fusionx1]

Hi Luciano,

I have tried several times to screenshotting with clip but still failed. I dont know how you did it, or what version you have used on those example images.

I tried the latest npm version I also tried 4.3.2 but still failed to screenshot an images based on selector.

[hparadiz]

I actually made this work myself with the old version and I was going to make a pull request but then this new version came out and I was hoping it would actually work. Guess not.

Here's the code to make it actually work:

/**
 * Takes a screenshot of a node and returns it as a string
 * @param {string} selector - CSS selector to target the node. If multiple come back will always use the first result.
 * @param {object} captureOptions - Options object
 * Options properties:
 *    @property {string} format - Image compression format (defaults to png). Allowed values: jpeg, png.
 *    @property {integer} quality - Compression quality from range [0..100] (jpeg only).
 *    @property {boolean} fromSurface - Capture the screenshot from the surface, rather than the view. Defaults to false. EXPERIMENTAL
 * @param {boolean} returnBinary - If true, returns as binary. Otherwise, returns a base64 string
 * @return {string} - Binary or Base64 string with image data
 */
exports.getNodeScreenshot = async function (selector, captureOptions = {}, returnBinary = false) {
  debug(`:: getNodeScreenshot => Taking a screenshot of a node matching passed selector. Returning as ${returnBinary ? 'binary' : 'base64'} string`);
  browserIsInitialized.call(this);
  const {DOM, Emulation} = this.client;
  const {root: {nodeId: documentNodeId}} = await DOM.getDocument();
  const {nodeId: elNodeId} = await DOM.querySelector({
    selector: selector,
    nodeId: documentNodeId,
  });
  if(elNodeId == 0) {
    throw new Error('Failed to find any nodes for the provided selector');
  }
  const {model: boxModel} = await DOM.getBoxModel({nodeId: elNodeId});
  await Emulation.setVisibleSize({ width: boxModel.width, height: boxModel.height });
  await Emulation.forceViewport({ x: boxModel.content[0], y: boxModel.content[1], scale: 1 });

  let screenshot = (await this.client.Page.captureScreenshot(captureOptions)).data;

  if (returnBinary) {
    screenshot = Buffer.from(screenshot, 'base64');
  }
  debug(`:: getNodeScreenshot => Screenshot took!`);

  return screenshot;
}

@LucianoGanga

[fusionx1]

Are you using the 4.3.1 for this working code?

Thank you @hparadiz

[hparadiz]

@fusionx1 It was working immediately after 574535e2b9952bbce76885e726b1e8fb156d7609

I'm planning on messing around with it today to support the new tab structure

[hparadiz]

Turns out Emulation.forceViewport was removed in this update: https://chromium.googlesource.com/chromium/src/+/bd74faae21bebdda0da67016c2977b4ce85fcef0%5E%21/#F20

[LucianoGanga]

Hi @fusionx1 !

Can you give me a full example of the code that you're using?

It works perfect for me in the last version of simple-headless-chrome

This is what I use:

    // Take a screenshot of the selector with the files
    await mainTab.saveScreenshot('./examples/simple-headless-chrome-files', {
      selector: '.file-wrap'
    })

(you can see the full example here: https://github.com/LucianoGanga/simple-headless-chrome/blob/master/examples/screenCapture.js )

Cheers! Lucho

[fusionx1]

Hi Lucho,

Thank you so much for the latest updates, followed the same setup:

1. cloned the repo
2. ran npm install within the folder
3. and test to run the sample screenCapture.js script but i'm getting an error: git@github.com:LucianoGanga/simple-headless-chrome.git

[fusionx1]

Hi Lucho, I tried installing it to another macbook, but still the same i'm getting an error "Options must be a string or an object".

Im using the latest version of node and and using version 4.3.8

[fusionx1]

Hi Lucho,

I dont know what to do anymore, I already tested this to 3 different machines but Im getting the same error, the build and tests are all ok, but if i run the sample script for screen capture the error still persist.

Can you let us know, how do you run it?

Paul

[LucianoGanga]

I'd like to try it with you. Add me on skype: ** and we give it a try together.

Cheers! Lucho

[LucianoGanga]

Can you try now? I fixed the fitWindow issue.

Thanks! Luciano

[fusionx1]

Wow its fixed now. Thanks Lucho you are awesome bro

On Mon, Sep 11, 2017 at 12:19 AM, Luciano notifications@github.com wrote:

Can you try now? I fixed the fitWindow issue.

Thanks! Luciano

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/LucianoGanga/simple-headless-chrome/issues/63#issuecomment-328353356, or mute the thread https://github.com/notifications/unsubscribe-auth/AAnPOuBSQ6M6Ia6Vv_I5om0n8soRj9qDks5shAwHgaJpZM4O3uv1 .

[fusionx1]

closing this now