please excuse me if this is not the correct forum to post this question but I've exhausted all other venues of information.

I am working in automating some test for a webpage that is highly dynamic and using jQuery heavily. Almost all the elements in the page will dynamically load or swap elements of the DOM when clicking or inputing text and I am having a really hard time waiting for the elements to be on it's final state before interacting with them.

So my question is, is there a surefire way to check the DOM is fully loaded and no more changes are pending?

I have checked  https://api.jquery.com/load-event/ and  https://api.jquery.com/jQuery.ready/ and it seems to be what I am looking for, but sadly I don't understand how to use it properly.

I have tried using 

2. $.when($.ready).then(function() {
3.     alert("ready");
4. });

but it is throwing

2. Uncaught ReferenceError: jQuery is not defined
3.     at eval (eval at onScriptLoad (require.min.js:1), <anonymous>:1:1)
4.     at HTMLScriptElement.onScriptLoad (require.min.js:1)

because jQuery has not loaded yet, so I would have to wait for the page to be in readyState to finally check if jQuery has finished loading?

Any help is greatly appreciated.

Thank you.