如何等到页面加载图像在非 Angular 页面上的量角器中消失

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);

问题是我总是得到

20009 毫秒后等待超时

如何等待加载器 gif 消失？

Answer 1

有一个专门针对此用例的内置 invisibilityOf 预期条件：

page.sortByBalanceSelector.click();

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

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

您也可以使用stalenessOf，它的基本意思是“不存在”。

---

您当前方法的问题是您将“不”应用于isElementPresent() 返回的承诺，并且，由于承诺始终是真实的，因此您总是得到“错误”由于等待条件，因此超时错误。