I need find a way to wait with my e2e test (angular2 project) until the tested element gets an specific css class.
Is there any possible way without browser.wait() or browser.sleep()?
You've even used the word "wait" in the question, but asking to solve it without the built-in waiting functions. I don't see much sense in that.
We've solved something similar before and came up with a custom wait function which can be used as an Expected Condition with 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);
This function waits for a class to disappears from an element, given the element object (ElementFinder) and the CSS class you want to check for.
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');
}