Ensure a web page is fully loaded

Question

Problem - I am using RPA to test if a/any web page is loaded (before going to the next line of code). In my RPA program, there are no such functions to help with this. This RPA program (Automation Anywhere) supports Javascript.

I wanted to know if Javascript has any functions to test out if a webpage is fully loaded (all components, all scripts, all images, etc)

Thank you!

Answer 1

I have two approaches for you:

window.addEventListener('load', function()
{
    // The page is fully loaded
});

OR

function isPageLoaded()
{
    return document.readyState === 'complete';
}

Hope it helps.

Answer 2

"Javascript" does not have anything like that. I guess you mean the "Browser" and its DOM Apis.

I would argue, that it due to the "dynamic" nature of Webpages, you can never be 100% sure, that the page has not an async request idle somewhere.

For process automation, I would assume that:

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

window.addEventListener("load", (event) => {
  // do something to signal the automation bot that everything is loaded.
});

is the best bet. In order for this to work, you will have to be able to access the browsers DOM tree, and injecting your own scripts. This might not be possible with the automation framework.

If the next automation step relies on a specific element to be loaded - this element should be directly targeted.

Answer 3

If you have access to the document object of the webpage then that can solve your problem.

https://developer.mozilla.org/en-US/docs/Web/API/Document

if (document.readyState === 'complete') {
  // The page is fully loaded
}

or

document.onreadystatechange = () => {
  if (document.readyState === 'complete') {
    // document ready
  }
};

Answer 4

Just use DOMContentLoaded

---

Code:

document.addEventListener('DOMContentLoaded', function() {  
    //do something...
});

It's very easy to use and you can use DOMContentLoaded if you would like to make a chrome app