How to use browser.wait() to wait for URL to change?

[mcalthrop]

Hi

I want to write a Protractor test that waits until the current URL to change, so I have been looking at browser.wait(), combined with browser.getCurrentUrl().

However, I am not sure of how to use the two together: the browser.wait() method accepts as its first parameter a function that will return a boolean value – however, browser.getCurrentUrl() returns a promise.

My first attempt, which failed (as I expected), looks like this:

var currentUrl;
browser.getCurrentUrl().then(function (url) {
    currentUrl = url;
}).then(function () {
    return browser.wait(function () {
        return browser.getCurrentUrl().then(function (url) {
            return url !== currentUrl;
        });
    });
}).then(function () {
    // continue testing
});

Can anyone help?

many thanks

Matt

[elgalu]

How is this failing? Is it a too early timeout issue?
I can't find in the docs what's the default timeout when no timeout param is specified in browser.wait()

[mcalthrop]

It times out after 30s (as I set in my protractor.conf.js file) – which seems to indicate that the browser.wait() never returns.

I tried again, this time specifying a timeout parameter of 12000 – all the tests timed out again, this time after 12 seconds.

[elgalu]

I can't recall exactly why but at some point i had to switch from browser.getCurrentUrl() to browser.driver.getCurrentUrl() and even created this helper function:

var waitForCurrentUrl = function(timeout) {
    if (timeout == null) {
        timeout = browser.manage().timeouts().pageLoadTimeout;
    };

    return browser.driver.wait(function() {
        // Return a condition. Code will continue to run until is true 
        return browser.driver.getCurrentUrl().then(function(url) {
            return url;
        }, function(err) {
            // errored  .. TODO: retry
            throw err;
        });
    }, timeout, 'Expectation error: Timed out waiting for current url');
};

[mcalthrop]

Great, thanks Leo!

I'll give that a go.

If it works, I'll suggest a document change to @juliemr :-)

[mcalthrop]

Hmmm... looks like I was right originally – using browser.getCurrentUrl() and browser.wait() are working fine for me at the moment:

var currentUrl;
browser.getCurrentUrl().then(function(url) {
        currentUrl = url;
    }
).then(function() {
        browser.wait(function() {
            return browser.getCurrentUrl().then(function (url) {
                return url !== currentUrl;
            });
        });
    }
).then(function () {
    // continue testing
});

However, I am running into problems when I try to use getText() in a similar fashion:

browser.wait(function () {
    return methodThatReturnsWebElementViaPromise().then(function (ele) {
            return ele.getText();    // <-- occasional failure point
        }
    ).then(function (text) {
            return text === 'changed text';
        }
    );
}).then(function () {
    // continue testing
});

It works sometimes, but on other times it fails with this message: StaleElementReferenceError: stale element reference: element is not attached to the page document

So what I think is causing the error is that by the time the call to getText() is executed, the contents of the element changed, thereby making the reference to it stale.

What do you think?

And can you suggest any workaround? (@juliemr?)

[juliemr]

Reference for testing the URL: https://github.com/angular/protractor/blob/master/spec/withLoginConf.js#L24

For the second question (getText), I'm guessing that your methodThatReturnsWebElementViaPromise is only getting called one time (because the promise is resolved once and then later invocations just return the value), instead of being called every time. It seems like you want to re-find the element every time?

[mcalthrop]

Ok, I ended up finding a solution:

function waitForElementTextToChange (elementId, textToWaitFor) {
    return browser.wait(function () {
        return element(by.id(elementId)).getText().then(function (text) {
                return text === textToWaitFor;
            },
            function () {
                return element(by.id(elementId)).getText().then(function (text) {
                    return text === textToWaitFor;
                });
            }
        );
    });
}

You can see that I call the element(by.id(elementId)).getText() a second time, in the error handler for the first time – this is because I consistently found that StaleElementReferenceErrors would be thrown, and very unpredictably (but sometimes not at all).

I'm guessing this is because of some kind of race condition: in the time between the calls to element(by.id(elementId)) and getText(), Angular had updated the DOM with a new value – just guesswork though.

So it's not an ideal solution, but it works consistently. And if I understand it correctly, any error that occurs on the second getText() call will be propagated back up the chain.

Note also that I simplified my code so that I'm only dealing with a DOM ID, and no longer needing to use the method that returned a promise.

[mcalthrop]

In case it may help others in future, here is the method I have written to wait for the URL to change to a particular value (as specified by a regex) :

/**
 * @name waitForUrlToChangeTo
 * @description Wait until the URL changes to match a provided regex
 * @param {RegExp} urlRegex wait until the URL changes to match this regex
 * @returns {!webdriver.promise.Promise} Promise
 */
function waitForUrlToChangeTo(urlRegex) {
    var currentUrl;

    return browser.getCurrentUrl().then(function storeCurrentUrl(url) {
            currentUrl = url;
        }
    ).then(function waitForUrlToChangeTo() {
            return browser.wait(function waitForUrlToChangeTo() {
                return browser.getCurrentUrl().then(function compareCurrentUrl(url) {
                    return urlRegex.test(url);
                });
            });
        }
    );
}

[rafbgarcia]

Thanks @mcalthrop, both functions work pretty well!

[mcalthrop]

Excellent! Glad they helped.

[astalker]

Thanks for this @mcalthrop these two functions have proved to be very helpful.

[nasikshafeek]

Great thanks @mcalthrop

[henrygrover]

Thanks, @mcalthrop. Very helpful.