Protractor browser.getCurrentUrl() is not working on route change

Question

I have just started using protractor for e2e testing of an Angular single page application. I have started the test with login page. This the test I wrote for fail case

Tesr Case 1

  it('Login with wrong email', function() {
    loginPage.get();
    loginPage.setEmail('[email protected]');
    loginPage.setPassword('12345678');
    loginPage.submit()

    expect(browser.getCurrentUrl()).toBe(loginPage.appUrl + '/#/login')
  })

The above code works perfectly. I am testing login failure with url, if the url haven't changed consider it as a failure. Q1)Is this the right approach? should I check for the error message, I have seen an example like this, so testing login failure with url.

Test Case 2

This is where I am getting the error, test case to check the successful login.

it('Login with correct email', function() {
  loginPage.get();
  loginPage.setEmail('[email protected]');
  loginPage.setPassword('12345678');
  loginPage.submit()
  expect(browser.getCurrentUrl()).toBe(loginPage.appUrl + '/#/home')
})

The above test case also works perfectly if I don't use browser.getCurrentUrl(), I am getting the following error when I use getCurrentUrl, this loginPage.submit() is a successful login attempt and redirects to another route.

Timed out waiting for Protractor to synchronize with the page after 11 seconds. Please see https://github.com/angular/protractor/blob/master/docs/faq.md. The following tasks were pending

I have googled this issue and found lot of solution and none of them seems to work.

Tried Out solutions

1. Added allScriptsTimeout, getPageTimeout to protractor configuration file.
2. Added defaultTimeoutInterval to configuration file
3. Found following SO questions link1, link2 and this github issue, tried all three and none seems to be working
4. When I googled with the timeout error message, I found this SO questions link1,link2, I tried all which is not working

Basically all the solutions says to use wait, sleep, waitForAngular. I tried all in thenable fashion, since all returns promise. I found this issue is because of using browser.getCurrentUrl. Let me know where I am doing wrong and would like to know deep about e2e testing with protractor.

I would like to know the basics of protractor, how it works on route change and how an async user action like $http is handled by protractor. Should I explicitly use promises etc.

Any help is greatly appreciated.

Answer 1

In an ideal world, you should not be adding any waits and Protractor should naturally wait for Angular to be ready and in general work in sync with it.

In a real world, unfortunately, there is often a need to add waits. Though, prefer Explicit Waits with specific conditions to hardcoded browser.sleep() calls which should generally be avoided. In this case, we can add a wait to wait for a specific URL, see this answer.

Answer 2

The problem here is not of browser.getCurrentUrl(), That piece is running fine as mentioned by you in the test which runs correctly.

Protractor gives you a big hint when it tells you Timed out waiting for Protractor to synchronize with the page after 11 seconds, which is its way of saying that it couldn't catch a hold of your angular page - or your angular page never finished loading in first place to take the test execution ahead. This happens when you are using either a lot of $timeouts or excessive polling on your page. To debug this problem, run your test suit with jasmine-spec-reporter and it will report you what function the page is waiting for (which are blocking the sync)