tungs
commented
2 years ago I tried to recreate this issue, and once I got a working setup, I didn't see those issues. I used your sample setup page (though with Ubuntu 22.04, though I don't think that makes much of a difference), and could select using both the data attribute and #some-existing-id.
However, along the way, I did get some of the same errors, though that's from errors in my testing setup. Maybe you're running into the same issues.
- If the page doesn't exist, it may be loading a 404 page, which results in a null selected element for
Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'getBoundingClientRect'). - Doing a web search for your second error ('querySelector is not a valid selector') results in this Stack Overflow question. Just to confirm, are you trying to select an element with literally an id of '
some-existing-id', or is the id something else? For some ids (e.g. when the id starts with a number), it can give that error. - In this case, I didn't run into your third error (
Error: Execution context was destroyed, most likely because of a navigation), though that message has popped up before in cases with removed iframes (tungs/timesnap#27) and WebGL canvases (tungs/timesnap#64). When you say it happens on simple pages, could you post those pages? Does it happen consistently or intermittently? - For your last issue, I did notice that the program would timeout for certain servers (like using
python3 -m http.server), though it works with others (like express). This timeout might be because the server doesn't support range requests, which timeweb uses to seek to specific frames of videos.
So just to verify:
- Can you navigate independently to your testing webpage using a browser?
- Does the selected element have a valid id (or not start with a number)?
- Does your test server support range requests?
Aside: CSS Animations
From your example page, you have a div for CSS animated text. timeweb / timesnap / timecut doesn't handle CSS animations, so that part may not render as intended.
Describe the bug
From a Node.js script with puppeteer and timecut libraries i'm trying to screen record as a video specific html element content based on CSS selector from a web page headless mode. Page is hosted on server or loaded locally from filesystem from the same folder as the script.
Still, i'm unable to do that, because i receive different errors:
selector: '[data-lpid="posterContainer"]'error is:Error: Evaluation failed: TypeError: Cannot read properties of null (reading 'getBoundingClientRect')selector: '#some-existing-id 'i get this error:Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#some-existing-id is not a valid selector.divandvideoelement inside, i receiveError: Execution context was destroyed, most likely because of a navigationWhen trying to load local index.html file from the same folder, i tried without path as normal
index.htmlor with full pathfile:///C:/zFVStuff/cms/poc-cms-video-poster-render-download/basic-puppeteer/test-local-lpac-files/index.htmlbut i'm receiving:TimeoutError: Navigation timeout of 30000 ms exceeded at C:\zFVStuff\DentsuSRC\liveposter\cms\poc-cms-video-poster-render-download\basic-puppeteer\node_modules\timesnap\node_modules\puppeteer\lib\LifecycleWatcher.js:142:21To Reproduce
Please List: From Windows 10 (or Ubuntu), through Node.js script (the official basic example script) fails when trying use selector like the ones from above.
Expected behavior A video recorded only with that element content i expected to see.
Attachments and Screenshots If applicable to a local, publicly unavailable web site, upload a minimal reproducible example. Also if applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Additional context Add any other context about the problem here.
My code:
Example of html code that i want to record:
Detailed errors:
Great job with the library!!!
Thank you very much in advance for any help!