Facing Protractor sync error when navigating from non angular page to angular

Question

I am creating e2e tests for my angular7 application (Windows 10, chrome). In my application first comes up a non angular page and when I enter username and password then angular page comes up. I have tried using browser.ignoresynchronization = true for a non-angular page and browser.ignoresynchronization = false before I navigate to angular page. Still, protractor is throwing as soon as it reaches to angular page.

I have tried browser.ignoresynchronization = true in my protractor.conf file under onPrepare() and then setting this flag again to false after login and before angular page appears. Still I am getting the protractor synchronization error.

I also tried using browser.waitForAngularEnabled(false) instead of ignoresynchronization but still no success.

Answer 1

Welcome to SO!

Before getting to specifics:

Protractor supports both angular and non-angular pages. As you have done already, specify when you want protractor to wait for angular to load and when it shouldn't.

We also have an application that has both angular and non-angular pages. Been using protractor for E2E testing for quite sometime now. In our case, the intention is to migrate to Angular eventually across the app.

That said, we used browser.ignoreSynchronization (deprecated now) and browser.waitForAngularEnabled() to handle angular pages iow. the configuration was by default for non-angular. However, things became difficult as soon as the pages are getting migrated to angular. We had to do something.

Solution that worked for us:

• Do nothing and let protractor believe its an angular application in general. This made sense as most of the pages are either completely angular or sections of the pages were using angular. IN your case, find the amount of angular vs non-angular pages. Set protractor config parameter accordingly so that majority works out of the box.
• For non-angular pages, we moved that setting to PageObjects as, logically, thats the right place to hold that information i.e. whether it is angular or non-angular.
• Specs started to work hand-in-hand with the page objects except places where clicking a link open a new tab/window/popup. Those places, we let Specs decide to disable and then enable back angular loading flag. So far, this is working very nicely

In specific:

From our experience, use the flag judiciously and at the start and end of an it block. That is: call browser.waitForAngularEnabled(true/false) at the very beginning of the it block and then restore it back at the end of same it block. Feel free to make your it block as small as possible to handle this. All in all make sure the it block is similar to

it('should do', function(){
  browser.waitForAngularEnabled(false/true)
  step1 here
  step2 here
  browser.waitForAngularEnabled(true/false)
})

The question did not include the error details, but this approach should work as protractor (to be precise, JavaScript engine) will run it block as a whole.

It is also not clear if you are using protractor promise manager or not. Do update if the above approach doesn't solve the issue.

All the best...