5

I want to verify if a web page has been loaded properly. My approach is:

  1. Verify the URL is shown as expected.
  2. Verify the element at the top left most corner has been shown.
  3. Verify the element at the bottom right most corner has been shown.

If all three criteria above are met, a page is loaded properly. My assumption is:

  • A page is populated from top left corner to bottom right corner

Is my assumption correct?

Improve this question
5

This is an incorrect assumption. A webpage loads as follows in generic terms:

  1. Server content is received by the browser.
  2. Rendering begins starting with objects and then styles from a layout as in all at once and if you slowed it down you would see a pixelated progression as it took shape starting with the content areas and then the objects and then the styles for those objects.
  3. On Load events fire during this process as well
  4. Post load events fire right after this. When you have alot of javascript it comes over in one bulk file and then most of the time on-load and post-load events fire to fully bring in the content. This allows for the browser to load the content for the eye to see and then javascript calls finish the content while the user is focused on the page, thus giving the appearance that it loads faster than it actually does.

All of the above is by application specific design, except 1 & 2, so it's really hard to say what is the final "loading complete". What I usually do is open up dev tools and start the traffic monitoring for the browser and then load the page. This should break out the server communication, then the rendering, then any javascript calls. The last items in the load traffic I dig into and see if there is a specific piece of the page that this corresponds to. Once I have that then I put an explicit wait on that object as my "page load complete" test before executing anything else.

You can just wait on the general page load, but it's not guaranteed to be the final loaded element on the page. If you have access to the code or dev help I recommend reverse tracing each page like that to be sure you have the last loaded element.

Improve this answer
3
  • 1
    yep, it's a different name for various browser types and extensions, but it's the one that shows you times on loading with what is loading when... – mutt Apr 17 '17 at 4:18
  • "The last items in the load traffic I dig into and see if there is a specific piece of the page that this corresponds to. Once I have that then I put an explicit wait on that object as my "page load complete" test before executing anything else." - but the last object loaded under one browser may not be last in a different browser. Additionally, a new build of the page may very well change which object is loaded last. – Joe Strazzere Apr 17 '17 at 11:02
  • That depends on how the app is written @JoeStrazzere. Cases like post load executions or large data rendering it's consistent and the loading is consistent if defined. If it's a standard app load, waiting on the page complete is probably best as there are no after actions. Selenium has one of those as do most automation suites and the javascript version is in the other answer. The goal would be waiting long enough for the first interaction to be successful though which even if there is slight variation it should work just fine. If we add mobile then things get very different... – mutt Apr 17 '17 at 14:42
3

I think you can use pure JS to achieve this. The cross-browser way to do it in pure JavaScript is simply to test document.readyState:

 if (document.readyState=='complete'){
      //you can do something here
}

You can select from either an loading, interactive or complete states. This returns a loading state while the document is loading. If you only want your DOM to be ready and then start performing tests, then you can use interactive state, while if you want your DOM to completely loaded, then you need to use complete state.

Improve this answer
1
  • 2
    True, but if you use the partial page load approach it won't work as javascript calls after the page loads re-write portions of the page and the browser won't be aware of that to utilize the document functionality. If it's just a standard load though, should work fine. Selenium has some built in page waits too, I'm not sure if those wait on the full DOM rendering or a different target. – mutt Apr 17 '17 at 14:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.