Python – How do I determine if some HTML elements are loaded for Selenium + Python?

How do I determine if some HTML elements are loaded for Selenium + Python?… here is a solution to the problem.

How do I determine if some HTML elements are loaded for Selenium + Python?

From this link, I assume that the DOM should first be loaded into RAM as a whole.

How DOM works/is loaded? (in HTML)

But then I did a timeout exception test in Selenium. It seems that even the timeout exception is thrown, some elements can already be found, so it is not an empty object.

But I wonder, how do I make sure that some elements are already loaded? For example. HTML example, how do I make sure all <th > elements are loaded? Given that I don’t actually know the number of <th>. Element.

Code Trial:

driver = webdriver. Chrome()
driver.set_page_load_timeout(10)
try:
    driver.get(url)
    print('load success!')
except TimeoutException:
    print(self.page_source)

Example HTML:

<table width="910" border="0" cellpadding="3" cellspacing="0" id="fth1_" class="fth1_" style="display: none; position: fixed; top: 29px; left: 99px; ">
     <thead style="background-color: rgb(233, 233, 233); ">
        <tr align="center">
           <th id="f13" style="width: 121px; "><a href="t/?i=614&amp;o=1">Symbol</a></th>
           <th id="f13" style="width: 267px; "><a href="t/?i=614&amp;o=2">Name</a></th>
        </tr>
     </thead>
</table>

Solution

Based on your code experiments, you’re using ChromeDriver and Chrome Browser to automate these steps. As you configured the set_page_load_timeout(10) timeout exception is thrown because the page is not fully loaded within the time frame configured by set_page_load_timeout(). But as you called print(self.page_source) The rendered element HTML DOM is retrieved.

Now about your personal enquiry:

  • How can I make sure some elements are already loaded? : An ideal testcase should have a clear step, such as verifying the presence of an element, verifying the visibility of an element, or verifying the interactivity of an element (when clicked). From this perspective, validating that an element is loaded may not include the required element. Therefore, you need to narrow your search criteria to something definite, rather than such a broader search criteria, for example

    • Page title
    • Page title
    • There is an alert
    • element
    • The presence of the element
    • There is a set of elements
    • The visibility of the element
    • The visibility of a set of elements
    • The clickability of the element
    • element of StalenessOf
    • FrameToBeAvailableAndSwitchToIt

In WebDriverWait With the help of these narrowed search criteria, you can save a lot of execution time combined with expected_conditions .

  • How can I make sure all elements are loaded? : Again, our tests should only focus on the elements we need to interact with, rather than verifying the state of other elements that we are not interested in.

  • Now, based on the two points mentioned above, these are the 3 most commonly used use cases:

    • presence_of_element_located : Expect to check if the element exists in the DOM of the page. This does not necessarily mean that the element is visible.
    • visibility_of_element_located : Expect to check if the element exists in the DOM of the page and is visible. Visibility means that an element is not only displayed, but also has a height and width greater than 0.
    • element_to_be_clickable : Expectation for checking the element is visible and enabled so that you can click it.
  • Depending on the use case you mentioned, you can make a list of all <th> <a href=”https://javascript.info/dom-nodes” rel=”noreferrer noopener nofollow”>DOM Tree Elements visible in wait for a configurable amount of time to raise a WebDriverWait as follows

    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.common.by import By
    from selenium.webdriver.support import expected_conditions as EC 
    
    headerList = WebDriverWait(driver, 20).until(EC.visibility_of_all_elements_located((By.XPATH, "//table[@class='fth1_' and @id='fth1_']/thead/tr//th")))
    

Note : The xpath used in this illustration is a sample xpath used only for demonstration purpose.

Related Problems and Solutions