[Question] Why capture whole page instead of element? about storycap HOT 1 OPEN

I ran into this issue as well. I would like to migrate to Storycap from Loki as it seems to be significantly faster, but the large screenshots make comparing changes difficult.

I'm aware of the clip option, which looks helpful, but it requires hard coded x/y/width/height.

In Loki, they have a chromeSelector option which they use to automatically determine the clip dimensions:

https://github.com/oblador/loki/blob/02c143c91b450273a8a5468b86d4a8fbd7827bc6/packages/target-chrome-core/src/create-chrome-target.js#L262-L276

In Loki you can provide chromeSelector: "body > *" which will only capture the component root elements (e.g. React root element plus any React Portals). This means the screenshot is still wide, but only as tall as the rendered component, not the entire body element.

Perhaps a similar feature could be added to Storycap? Perhaps an option, like clipSelector?

Storycap already queries the page using the Puppeteer Page API where it specifies the clip option for the screenshot call. This could be a convenient place to automatically calculate the value for clip based on a clipSelector.

In addition to #506, mentioned above, I found a suggestion in #186 to use Jimp to post-process the images, however, using Jimp significantly increases the total build time. If the original screenshot only captured the rendered div/s, that would be really helpful.

from storycap.