How to find an element dynamically loaded by jQuery in page through Selenium, WebDriver and Python

Question

I'm having a problem getting an item within a page, this item is loaded after loading the page via ajax or iframe, is there any way to create a condition for the script to wait until the item appear?

To exemplify my problem I did the following test:

Python:

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from selenium.common.exceptions import TimeoutException
browser = webdriver.Firefox()
browser.get("http://localhost/test_time.php")
delay = 10 # seconds
try:
    myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.ID, 'id_2'))) 
    print ("Elememento encontrado")
except TimeoutException:
    print ('Nao foi dessa vez :(')
    pass

I search for id_2 which is displayed 5 seconds after completion of loading the page by JavaScript

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste Python</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function sleep(milliseconds) {
            var start = new Date().getTime();
            for (var i = 0; i < 1e7; i++) {
                if ((new Date().getTime() - start) > milliseconds){
                break;
                }
            }
        }
        $( document ).ready(function() {
            console.log('js start');     
            sleep(5000);
            jQuery('<div> DIV 2 </div>', {id: 'id_2', }).appendTo('#content');                      
            console.log('js Done');                 
        });
    </script>    
</head>
<body>
    <div>Main page</div>
    <div id='content'>
        <div id="id_1">DIV 1</div>
    </div>
</body>
</html>

This is the HTML I have 2 div if you do the search for div id_1 it finds no problem, but the div id_2 which is displayed 5 seconds after page loading is not found by selenium even though I determine the wait time of 10 seconds.

I would like a light to find a solution to this problem.

Why don't you manually wait for some time to locate the HTML of the element with `div id_2`? — undetected Selenium, Jul 13 '18 at 13:36
There is no `div id_2` in your HTML, are you sure, that element appears after 5 seconds? — Andrei Suvorkov, Jul 13 '18 at 13:37
@DebanjanB Because the page does not have a specific time to load. — Bulfaitelo, Jul 13 '18 at 13:48
@AndreiSuvorkov See javascript, has a sleep() then create a div with Jquery — Bulfaitelo, Jul 13 '18 at 13:52
@Bulfaitelo I see the script, but I'm not sure, that the script does, what you want. That's why I am asking if the `div id_2` actually appears — Andrei Suvorkov, Jul 13 '18 at 13:55

score 0 · Accepted Answer · answered Jul 13 '18 at 14:16

As per the HTML you have provided the associated function within the <script> invokes:

jQuery('<div> DIV 2 </div>', {id: 'id_2', }).appendTo('#content');

So, when the webpage will finish loading completely an element will be present within the HTML DOM as:

('<div> DIV 2 </div>', {id: 'id_2', })

Here you can find a discussion on Do we have any generic funtion to check if page has completely loaded in Selenium

Finally, you can wait for either of the following state of the element inducing WebDriverWait as follows:

presence_of_element_located(locator):

myElement = WebDriverWait(driver, 20).until(expected_conditions.presence_of_element_located((By.CSS_SELECTOR, "div#id_2")))

visibility_of_element_located(locator)

myElement = WebDriverWait(driver, 20).until(expected_conditions.visibility_of_element_located((By.CSS_SELECTOR, "div#id_2")))

score 0 · Answer 2 · answered Jul 15 '18 at 16:11

0

instead of:

myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.ID, 'id_2')))

try this:

myElem = WebDriverWait(browser, delay).until(EC.presence_of_element_located((By.XPATH, ".//*[@id='content']/div[2]")))

answered Jul 15 '18 at 16:11

TwinckleTwinckle

309
1
4

How to find an element dynamically loaded by jQuery in page through Selenium, WebDriver and Python

2 Answers2