search

reg-viz / storycap

A Storybook Addon, Save the screenshot image of your stories :camera: via puppeteer.
https://www.npmjs.com/package/storycap
MIT License
705 stars 89 forks source link

[Question] Why capture whole page instead of element? #762

Open Filipoliko opened 1 year ago

Filipoliko commented 1 year ago

Hi everyone! Our team has been analysing visual regression tools, that we could use for our projects and storycap/reg-suite is really standing out as a great and powerful solution full of features. You did some amazing work here and thank you for sharing it as an open-source solution!

We are thinking to migrate from our aging test solution to storycap, but there has been one missing feature and I am trying to figure out if I missed some documentation, or if there is some good reason why it is not implemented.

Is there any option to capture screenshot only for the story preview element, not the whole page? If not, are you open to PRs, or is there some reason why are you choosing not to have this option?

I ran into this feature request https://github.com/reg-viz/storycap/issues/506 , but I am not really sure, if it is possible to use the clip screenshot option to only capture the element. I tried playing with document.querySelector().getBoundingClientRect(), but I could not get it to work. Is there some way to do this?

peteragarclover commented 1 year ago

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.

https://github.com/reg-viz/storycap/blob/af615c58eee467dc4571fbdb8335d170298873ba/packages/storycap/src/node/capturing-browser.ts#L460-L465

In addition to https://github.com/reg-viz/storycap/issues/506, mentioned above, I found a suggestion in https://github.com/reg-viz/storycap/issues/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.