timeout-error when testing login-dialog using protractor and angular-strap modal

Question

I have a login-dialog using a angular-strap modal, which gets invoked by:

scope.authModal = $modal({
                template: '/components/login/login.html',
                show: false,
                scope: scope,
                backdrop: 'static'
            });

(that code is inside the link function of a login-directive.)

Now, my protractor code looks like this:

it('should perform login properly', function () {
    browser.manage().deleteAllCookies();
    element(by.model('login.username')).sendKeys('xy123');
    element(by.model('login.password')).sendKeys('abz89');
    element(by.binding("guiText.loginButton")).click();
    browser.waitForAngular();
    expect(element(by.id('login.username')).isPresent()).to.eventually.equal(false);
});

In another test above the element(by.id('login.username')).isPresent() has been proved to equal true when the login-dialog is visible.

The problem is, I'm getting Error: timeout of 10000ms exceeded with that test. In the browser I can see, that the credentials are typed in correctly and the button is being clicked. The login modal disappeas and then nothing happens and the browser is eventually running in to that timeout exception after waiting 10 seconds.

Answer 1

I had the same problem and I did below to solve this.

Write this function in your helper file and call this to click on login button in your code. Try to access the button by Id and then pass the id in this function, if not id then update the function as per your need

var clickAndWait= function (btnId) {
    var returnVal = false;
    browser.wait(function () {
        if (!returnVal) {
            element(by.id(btnId)).click().then(function () {
                returnVal = true;
            });
        }
        return returnVal;
    }, 30000);
};