how to wait for list of elements to be loaded in dynamic

Question

i have a search box, when i do search a value, say a bank name, it displays the results matching the text given on the search box. But the catch here is it may not an exact result, and also it takes some seconds to load in a complete list, by refreshing intellectually within the search results. so even if i wait for some results to load, it gets the values immediately whatever came at that moment, but actually it refreshes the list even after couple more seconds. So how can i wait for complete load and then take out the results. any help on this please.

code snippet

<ul class="DropDown__options DropDown__options--small--focused DropDown__options--focused" id="searchTopBank-listbox" role="listbox" aria-activedescendant="searchTopBank-options-4">
    <li aria-selected="true" class="DropDown__option TypeAhead__option DropDown__option--focused DropDown__option--small" id="searchTopBank-options-0" role="option">
        <img alt="" class="dropdown-logo" src="data">
        <span>
            <span class="DropDown__matched-option-chars">Bank of America</span>
        </span>
    </li>
    <li aria-selected="false" class="DropDown__option TypeAhead__option DropDown__option--focused DropDown__option--small" id="searchTopBank-options-1" role="option">
        <img alt="" class="dropdown-logo" src="data">
        <span>First National 
            <span class="DropDown__matched-option-chars">Bank of America</span>
        </span>
    </li>
    <li aria-selected="false" class="DropDown__option TypeAhead__option DropDown__option--focused DropDown__option--small" id="searchTopBank-options-2" role="option">
        <img alt="" class="dropdown-logo" src="data:image/png;base64, null">
        <span>Second National Farmer's 
            <span class="DropDown__matched-option-chars">Bank of America</span>
        </span>
    </li>
    <li aria-selected="false" class="DropDown__option TypeAhead__option DropDown__option--focused DropDown__option--small" id="searchTopBank-options-3" role="option">
        <img alt="" class="dropdown-logo" src="data:image/png;base64, null">
        <span>
            <span class="DropDown__matched-option-chars">Altabank</span>
        </span>
    </li>
    <li aria-selected="false" class="DropDown__option TypeAhead__option DropDown__option--focused DropDown__option--hover DropDown__option--small" id="searchTopBank-options-4" role="option">
        <img alt="" class="dropdown-logo" src="data:image/png;base64, null">
        <span>Freedom 
            <span class="DropDown__matched-option-chars">Bank of America</span>
        </span>
    </li>
</ul>

Do you know the final amount of search results to be appeared there? — Prophet, Jun 24 '21 at 14:28
No, that is also a catch here. Its not a static count. sometimes it gives 10, sometimes 7, sometimes 5. it depends on the text we give in the search box. — mmar, Jun 24 '21 at 14:29
OK, but once it gave the final amount of results they do not more changing? — Prophet, Jun 24 '21 at 14:30

score 1 · Accepted Answer · answered Jun 24 '21 at 14:44

1

I would suggest doing something like this:

WebDriverWait wait = new WebDriverWait(driver, 20);

public void wait(int delay){
    try {
        Thread.sleep(delay);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
}

String searchResult = "//li[contains(@id,'searchTopBank-options')]";
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(searchResult)));
int initialAmount = driver.findElements(By.xpath(searchResult)).size();
while(true){
    wait(200);
    int newAmount = driver.findElements(By.xpath(searchResult)).size();
    if(newAmount > initialAmount){
        initialAmount = newAmount;
    }else{
        break;
    }
}

The wait amount depends on the slowest actual speed of bringing the new search results.

answered Jun 24 '21 at 14:44

Prophet

32,350
22
54
79

thanks for the solution. i tried this and able to solve upto some extent only. because the nature of the element reacts very dynamic. sometimes the results are different between execution runs. so am not able to get pass this case 100% all the runs. so i used your solution just by increasing the wait to 3000 ms. Again, thanks for your time. – mmar Jun 24 '21 at 21:43
Well, I mentioned that explicitly that the delay you are using should be set depending on the actual speed of bringing the search results from the server. I just suggested using 200 milliseconds – Prophet Jun 24 '21 at 21:47
1

yes, i get it now. thank you. i did not notice the last line from your answer, sorry. – mmar Jun 24 '21 at 21:49

score 0 · Answer 2 · answered Jun 24 '21 at 14:35

0

Why not mix worst ExplicitWait - (Thread.sleep(5000)) and Mix it with a reliable ExplicitWait - visibilityOfAllElements and give a list using - driver.findElements:

I believe this css represent all the elements :

span.DropDown__matched-option-chars

code :

Thread.sleep(5000);
new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfAllElements(driver.findElements(By.cssSelector("span.DropDown__matched-option-chars"))));

answered Jun 24 '21 at 14:35

cruisepandey

28,520
6
20
38

i know Thread.sleep for 5 secs may work. But i do not want to use it. as my test case grows, it will slow my test execution. so i am looking for better way to wait until all loads and continue the next step immediately. – mmar Jun 24 '21 at 14:39
I know we should avoid thread.sleep but not in scenarios like this.. I would feel that this is a very simple implementation for the above solution – cruisepandey Jun 24 '21 at 14:58

how to wait for list of elements to be loaded in dynamic

2 Answers2