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

[fransallen]

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 #30 (comment)

[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.

[munirkamal]

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]

Hey awesome fellows,
Any updates on this?

TIA

[fransallen]

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

[anuraghazra]

@fransallen this might work? puppeteer/puppeteer#511 (comment)

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

[fransallen]

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

[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 🔥

https://github.com/staticallyio/screenshot

[gabrielbeauchemin]

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.