如何等待动态加载元素列表

Posted

技术标签:

【中文标题】如何等待动态加载元素列表【英文标题】:how to wait for list of elements to be loaded in dynamic 【发布时间】:2021-09-08 01:24:40 【问题描述】:

我有一个搜索框,当我搜索一个值时,比如银行名称,它会显示与搜索框中给出的文本匹配的结果。但这里要注意的是,它可能不是一个准确的结果,而且通过在搜索结果中智能刷新,加载一个完整的列表需要几秒钟的时间。因此,即使我等待加载某些结果,它也会立即获取当时出现的值,但实际上它会在几秒钟后刷新列表。那么我怎样才能等待完成加载然后取出结果。请对此提供任何帮助。

代码sn-p

<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  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  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  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  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  class="dropdown-logo" src="data:image/png;base64, null">
        <span>Freedom 
            <span class="DropDown__matched-option-chars">Bank of America</span>
        </span>
    </li>
</ul>

【问题讨论】:

你知道最终会出现多少搜索结果吗? 不,这也是一个问题。它不是静态计数。有时它给出 10,有时 7,有时 5。这取决于我们在搜索框中给出的文本。 好的,但是一旦给出了最终的结果量,它们就不会再改变了吗? 是的,可以这样。 这和Java有什么关系吗? 【参考方案1】:

我建议这样做:

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;
    

等待时间取决于带来新搜索结果的最慢实际速度。

【讨论】:

感谢您的解决方案。我试过了,只能在一定程度上解决。因为元素的性质反应非常动态。有时执行运行的结果不同。所以我无法通过这个案例 100% 的所有运行。所以我只是通过将等待时间增加到 3000 毫秒来使用您的解决方案。再次感谢您的宝贵时间。 好吧,我明确提到,您使用的延迟应该根据从服务器获取搜索结果的实际速度来设置。我只是建议使用 200 毫秒 是的,我现在明白了。谢谢。我没有注意到你回答的最后一行,对不起。【参考方案2】:

为什么不把最差的ExplicitWait - (Thread.sleep(5000)) 和可靠的ExplicitWait - visibilityOfAllElements 混合,然后使用 - driver.findElements 给出一个列表:

我相信这个 css 代表了所有元素:

span.DropDown__matched-option-chars

代码:

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

【讨论】:

我知道 Thread.sleep 5 秒可能有效。但我不想使用它。随着我的测试用例的增长,它会减慢我的测试执行速度。所以我正在寻找更好的方法来等到所有负载并立即继续下一步。 我知道我们应该避免使用 thread.sleep 但不是在这样的场景中。我觉得这是上述解决方案的一个非常简单的实现

以上是关于如何等待动态加载元素列表的主要内容,如果未能解决你的问题,请参考以下文章

将 CSS 动态加载到文档头部并在加载后等待

JQuery 动态加载 HTML 元素时绑定点击事件无效问题

如何确定 IE 中动态加载图像的 img 宽度/高度?

如何在需要等待内容加载的动态页面上使用 JSON-LD 添加结构化数据?

如何在选择时使用 formArray 索引加载动态下拉数据

使用swiper动态加载数据遇到的坑