How to implement WAIT for screen elements load in ionic 2 hybrid mobile application using protractor

Question

How to implement wait for screen elements load in ionic 2 hybrid mobile application using protractor.

As I am testing the IONIC Mobile application and not able to use wait without browser.sleep(), Because browser instance is not working in application.

Please help me to resolve this issue.

Answer 1

It's been a while, but I've had some success testing Ionic with Protractor with the following helper method:

waitForIonic: function () {
    //Register a promise with protractor, so the browser waits for it
    var deferred = protractor.promise.defer();

    let clickBlock = element(by.css('.click-block-active'));

    //if there's a click block, wait for it to be gone, otherwise just wait 1 sec
    if (clickBlock.isPresent()) {
        var untilClickBlockIsGone = ExpectedConditions.not(ExpectedConditions.visibilityOf(clickBlock));
        browser.wait(untilClickBlockIsGone, 20000).then(() => {
            browser.driver.sleep(1000);
            //We've fulfilled the promise, so 
            deferred.fulfill();
        });
    }
    else {
        browser.driver.sleep(1000);
        //We've fulfilled the promise, so 
        deferred.fulfill();
    }

    //Return the promise (which hasn't been fulfilled yet)
    return deferred.promise;
}

Then use it like so:

//Wait for ionic animiations, Click logout
module.exports.waitForIonic().then(() => {
    logoutButton.click();
});