Forum Discussion

SS01's avatar
SS01
Occasional Contributor
3 years ago

TestComplete - Verify if a web page loads with all images and content

What is the simple straightforward code in JavaScript script tests to verify that a page loads with all the images and written content.

4 Replies

    • SS01's avatar
      SS01
      Occasional Contributor

      Thanks for the suggestion. I am not sure how I can use this solution as there are so many elements on a page, text, images, links, buttons etc. Is there a quick way or an inbuilt method to check if the page has loaded without errors by not mentioning each and every web element. An example code would help. Thanks

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3

        Hi,

         

         Is there a quick way or an inbuilt method to check if the page has loaded

        Alas, there is no quick way.

        Solution depends on your tested application and your definition of "page has loaded".

         

        To explain the above with a bit more details:

        When the browser is commanded to load some web page, it sends the request to web server and waits for the response with the html markup for the requested web page. When the response is received, web browser starts to process and render the page. .Wait() method of Page object delays test code execution to this moment. This delay is enough for regular web pages with static content because at this moment page content is usually rendered by web browser and TestComplete can access page's internals.

        The problem is with modern dynamic web pages. The problem is that modern dynamic web pages may load additional content and/or modify page's internal DOM structure via script code, CSS transforms, etc.

        In a simple case, your test code must additionally delay until all additional resources are loaded, all script code completed its execution on page and all CSS transformations have been processed by browser's engine. Exact implementation of how to do this depends on the implementation of the tested web page. For example, if page uses jQuery, the your code must wait until jQuery becomes idle. Likewise, if the page uses Angular, then test code must delay until Angular is idle. If page uses both jQuery and Angular, then test code must wait until both of them become idle.

        In a complex case, page may never complete its load. For example, if page refreshes some financial information every 5 seconds, or provides streaming content, browser will constantly update page's content and the page may be considered to be in an endless loading state.

         

        Considering the above, you may either wait until all required content is (asynchronously) loaded by web page and continue with test code execution after that, or wait within some reasonable time for the given required web element becomes accessible for TestComplete (via appropriate .WaitXXX() method).

        Both approaches have their pros and cons and should be considered separately for each tested web application.