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

[SS01]

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

[ApplePen]

Please check link below.

I think it can help.

Wait For Web Pages | TestComplete Documentation (smartbear.com)

[SS01]

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]

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.

[SS01]

I would like to know how to verify if the page throws an error like 503 or 404 or if if the content or images on the page is coming from different sources and some if it has not loaded and that part of the page stays blank. Is there a way to validate that?