Protractor tests stopped working after upgrade to Angular 2

Question

I have a manually bootstrapped Angular application with a large number of Protractor tests written. Around June 2016, the tests worked, but no longer do. Since then, the following changes have occurred:

Angular 2 has been released
The login portion of the application has been rewritten. Originally, the login page did not use Angular at all. Now it uses Angular 2. The rest of the app is still Angular 1.

If I do not interact with the app beyond logging in, and run a single test (such as "expect(true).toBe(true)"), then everything runs to completion, with no error messages generated.

If my test automation does interact with the app, then the following occurs:

If my conf.js file contains "useAllAngular2AppRoots: true", I get the error message: "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"
If my conf.js file does not contain "useAllAngular2AppRoots: true", I get the error message: "Error while waiting for Protractor to sync with the page: "Could not find testability for element."

In either case, the automation proceeds through login and into the Angular1 portion of the application.

The questions I have are:

Is this kind of application (Angular2 login page, everything else Angular1) possible to test with Protractor?
Should "useAllAngular2AppRoots: true" be used?
The error messages I am getting don't seem to point to a particular area of my test code to fix. How can I go about determining what the problem is?

EDIT 27 Oct 2016 After the first answer this question received, I attempted to pin down exactly what was failing, and where.

I found that:

setting rootElement in my conf.js file had no effect. Whether I left it out entirely, specifically set it to 'body', or set it to a random nonsense string, I got the same behavior.
following the given suggestions, I was still getting an error message 'AfterAll Failed: Error while waiting for Protractor to sync with the page: "Could not find testability for element."' Note that I was not trying to make any tests in my AfterAll function, just clicking a Logout button
if I set 'browser.ignoreSynchronization=true' in the beforeAll function of my test, I could make calls that interacted with the app, such as clicking on screen elements. Without this line, no such call had any effect. However, I'm sure that this is not something I should do, or that I should need to.
even with 'browser.ignoreSynchronization=true', I would still get error messages when I tried to make Angular1-specific calls, such as trying to match an element with by.repeater(). This would occur in the part of the app which is still written in Angular 1, and is therefore using ng-repeat rather than ngFor.

Does this additional information give any further insight on what might be going on, and what else I might try?

If the solution from Urish worked for you, please mark it as the answer. — santon

urish urish · Accepted Answer · 2016-10-22T12:16:52

First of all, you need to make sure you are using the latest protractor (4.0.9) and zone.js >= 0.6.25.

Then, make sure you set browser.ng12Hybrid to true for each page that contains a hybrid angular 1 + 2 app, i.e.:

beforeEach(function () {
    browser.ng12Hybrid = true;
    browser.get('/somepage.html');
});

afterEach(function () {
    browser.ng12Hybrid = false;
});

You can also find example in protractor's own test specs.

As for useAllAngular2AppRoots: true, it should only be used once your app is completely migrated to Angular 2 and you have removed the upgrade adapter, as explained here.

Good luck with your project!

Protractor tests stopped working after upgrade to Angular 2

1 Answers