Wait for DOM content before snapping

[Asheboy]

It would be great if it was possible to only start taking the screenshots once some specific content was on the DOM. Puppeteer has a waitForSelector function (docs), however I've not had success implementing this, I imagine this is because the content I am waiting for is rendered by JS.

[tungs]

Thanks for the feedback! As it is, there isn't a whole lot of support for this. There is config.start and --start which progresses a certain amount of virtual time before taking screenshots, but the bounding box for screenshots is unfortunately calculated before then.

As I see it, there are two features that may solve this problem:

• calculating the bounding box for screenshots after timesnap progresses to the start virtual time
• progressing virtual time until an element is available

The first is fairly easy to implement and I'll try to do it on the next release. The second use case is more limited and requires more rewriting, so I'm not sure if I want to support that quite yet.

[Asheboy]

@tungs I've put an implementation of what I needed here. I went down the route of only capturing while a selector was on the DOM. It means that the webpage can have more control over the start and end times of the capture.

Happy to make changes and submit a PR, shoot over any criticism.

[Asheboy]

I now have a better implementation of this here.

[RhinoW]

For my use case I too need to signal from JavaScript running on the page when to both start and stop the capture.

I looked at hooking into a window.stopCapture() call (and a startCapture to be implemented) as in PR 56 #56 but @Asheboy 's captureWhileSelectorExists (https://github.com/Asheboy/timesnap/blob/master/index.js#L197-L205) looks cleaner as it doesn't pollute the global namespace.

@tungs what do you think?

[tungs]

@RhinoW, I'm on the fence about this, though I'm leaning towards the overall idea; the implementation seems straightforward and generally useful, though it feels a little feature bloaty.

If I do implement it, it would probably be as two functions: a start function (like shouldStartCapture) that would take page as an argument and resolve to true to begin capturing and an end function (like shouldEndCapture) that would take page as an argument and resolve to true to prematurely end capturing. The function names might need a little tweaking to make it clear that virtual time is being incremented.

This should give you the flexibility to check for a range of things (e.g. see if an element exists or a global variable is set to a certain value).

Would this work for your use case? I realize that this would require specifying a function instead of a string, so it can be less friendly than Asheboy's implementation.

[yoavniran]

hey @tungs thanks for a very cool library
any chance (should)startCapture is going to be implemented?