statically icon indicating copy to clipboard operation
statically copied to clipboard

[Feature request] Properly screenshot a website that uses CSS animations

Open fransallen opened this issue 5 years ago • 8 comments

I would like to suggest a feature request for the screenshot feature. It works well but not for those pages which has CSS animations on the content/section. That ends up with incorrect screenshots. How about adding a delay timer parameter to take the screenshot? Or wait for the page to load fully before taking a screenshot?

Originally posted by @munirkamal in https://github.com/staticallyio/statically/issues/30#issuecomment-563074015

fransallen avatar Jan 24 '20 22:01 fransallen

Hi @munirkamal, I moved this as a separate issue for better discovery.

I use Puppeteer, so something like waitUntil: 'networkidle0' might work.

I am currently still having an issue where I reached a timeout limit for this and returned an error page instead of an image, this is because I am still using a free ZEIT account, I am in the process of contacting them to get more limits, but if someone can help contact them, I'll be very grateful.

fransallen avatar Jan 24 '20 22:01 fransallen

Hi @fransallen,

Yes, delay option or something which triggers when page fully loads would do the job well. This feature will really be a great help for the screenshot feature. Many websites now use some kind of animations/interactions and taking the screenshot without delay or when page fully loads causes incorrect screenshot.

I am really hoping you get this sorted with ZEIT or another way.

Looking forward to this.

munirkamal avatar Jan 25 '20 08:01 munirkamal

Hey awesome fellows, Any updates on this?

TIA

munirkamal avatar Mar 23 '20 08:03 munirkamal

Hi @munirkamal not yet, but this will come, please stay tuned.

fransallen avatar Jul 11 '20 05:07 fransallen

@fransallen this might work? https://github.com/puppeteer/puppeteer/issues/511#issuecomment-468309571

https://github.com/zaqqaz/visual-unit-tests/blob/master/src/utils/testUtils.ts

anuraghazra avatar Jul 14 '20 17:07 anuraghazra

Will do some tests and see if it is a suitable workaround here. Thanks, @anuraghazra.

fransallen avatar Jul 14 '20 18:07 fransallen

Since Statically Screenshot is now an open-source software, anyone is welcome to contribute to the repo and make the software even better, good luck :fire:

https://github.com/staticallyio/screenshot

fransallen avatar Jul 20 '20 01:07 fransallen

Is it still a work in progress? I think it should be in the API, as animations are used a lot and without that, that make the tests flaky.

Also, a thing to consider I think is that it should work also with element under shadow root. Thanks for you work.

gabrielbeauchemin avatar Jun 17 '21 11:06 gabrielbeauchemin