Angular2 E2E Protractor。等待元素具有类。

Question

我需要找到一种方法，在我的e2e测试（angular2项目）中等待被测试的元素获得特定的CSS类。

是否有任何可能的方法，而不使用browser.wait()或browser.sleep()？

- Marcel Wiechmann

---

提供一个原因为什么：https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem - Tatsuyuki Ishi

你想在不使用 browser.wait() 的情况下进行等待吗？这没有意义...因为这就是它的作用。用来等待某件事。 - Gunderson

Answer 1

你在问题中甚至使用了“等待”这个词，但却要求不使用内置的等待函数来解决问题。我认为这样做没有太多意义。

我们之前已经解决过类似的问题，并想出了一个自定义等待函数，它可以作为browser.wait()的预期条件来使用:

function waitForCssClass(elementFinder, desiredClass) {
    return function () {
        return elementFinder.getAttribute('class').then(function (classValue) {
            return classValue && classValue.indexOf(desiredClass) >= 0;
        });
    };
};

browser.wait(waitForCssClass($("#myid"), "desiredClass"), 5000);

- alecxe

---

为什么不直接使用expectedCondition呢？提供一个具有类的ElementFinder，并等待例如VisibilityOf。因此，不需要自定义方法，而是使用“普通”的Protractor api。 - wswebcreation

@wswebcreation 对，我也考虑过这个问题，但是在这里我假设我们不能修改要等待具有类的元素的定位器。例如，该元素可能通过xpath、名称或重复器等进行定位。 - alecxe

确实如此，但您已经知道了该类，因此可以使用类似于 $('.className') 或带有作用域的 .scope').$('.className') 作为预期条件的元素查找器。 - wswebcreation

Answer 2

此函数等待一个类从元素中消失，需要传入元素对象（ElementFinder）和要检查的CSS类。

    static async waitCssClassToDisappear(elem:ElementFinder, cssClass:string, timeout?: number) {
        await browser.wait(()=>{
            return elem.getAttribute('class').then((value) =>{
                return value.indexOf(cssClass) < 0;
            });
        }, timeout ? timeout : Utils.defaultTimeout, 'CSS class did not disappear within specified timeout');
    }

- René Rubio Cruz