如何等待页面加载图像在非 Angular 页面上的 Protractor 中消失

Question

在非 Angular 站点上，当我单击某个单选按钮时，页面加载 gif 出现。在量角器测试中，我想等到这个加载器 gif 消失，然后检查另一个元素。

HTML 加载程序（永远存在）：

<div class="loader" style="display: none;">
    <div id="loader">
        <img src="/img/loading.gif">
    </div>
    <div class="totalMaskForLoader"></div>
</div>

我在测试中做了什么：

        ...
        //  click on balance dropdown
        page.sortByBalanceSelector.click();

        browser.wait(function() {
                    // return a boolean here. Wait for spinner to be gone.
                    return !browser.isElementPresent(by.css(".loader"));
                }, 20000);

        // compare to the starting player's username
        expect(page.hasText(page.usernameCellButton)).not.toContain(startingUsername);

问题是我总是得到

Wait timed out after 20009ms

如何等待加载器 gif 消失？

Answer 1

有一个 built-in invisibilityOf 专门针对此用例的预期条件：

page.sortByBalanceSelector.click();

var loader = element(by.id("loader"));
var EC = protractor.ExpectedConditions;

browser.wait(EC.invisibilityOf(loader), 5000);

您也可以使用 stalenessOf，这基本上意味着 "not present"。

您当前方法的问题是您将 "not" 应用于 isElementPresent() 返回的承诺，并且，由于 承诺始终是真实的，你总是得到 "false" 作为等待条件的结果，因此超时错误。

如何等待页面加载图像在非 Angular 页面上的 Protractor 中消失

How to wait until page loading image disappears in Protractor on non-Angular page

javascript

gif

loader

protractor