browser.get() does not wait for Angular before page load

[sashee]

If I have an Angular page that I am navigating from, the browser.get() call does not wait for the original page to settle. This makes use cases like this fragile:

1. Open login page
2. Fill in login details
3. Click on the login button
4. Open an application page
5. Do something as a logged in user

This results in a race condition between the click on step 3) and the page load on step 4), resulting in a flickering test.

I made a minimal project to serve as an example for this at: https://github.com/sashee/protractor-problem-example . You can check the very same workflow at the spec file: https://github.com/sashee/protractor-problem-example/blob/master/spec.js

The login is substituted with a simple $timeout, but in a real app this would be a $http call that the $httpBackend intercepts and returns a canned response. Thus it's length is undetermined, if you play around with the exact timings (https://github.com/sashee/protractor-problem-example/blob/master/login-controller.js#L8) you can easily find a value when the spec passes, and one when fails (try with 2ms and 500ms)

If I manually call waitForAngular() before browser.get(), then the test pass every time (see: https://github.com/sashee/protractor-problem-example/blob/master/spec.js#L12)

[xyq117480]

As I use Protractor so far, the waiting stuff is always annoying.

In you spec file, I believe both browser.waitForAngular() and browser.wait(a-long-time) will work. And you may know the reason is because element().click() is an asynchronized call.

I always solve this kind of race problem by browser.wait(function), relying on things that can tell me 'page is ready for next step', for example, the URL may changed to the one I want or some special elements appear so that I could stop wait.

Hopefully this 'unclear answer' will help you. But I have a question about why you have to browser.get() again after clicking login button? Doesn't the login button lead to the check_login page?

[juliemr]

Yeah, waiting when loading new pages is tricky, since we don't know when a click event will cause a new page load. See #996 for some ideas, but no good solutions yet. Rest assured, it's on our plate!

Your minimal example is really helpful - we'll definitely use it for testing. In the meantime, your manual waitForAngular solution is good.

I'm going to close this issue, but note and link to it from #996