How to solve the error: Failed: Error while waiting for Protractor to sync with the page

Question

I have an e2e testing using protractor. My test involves angular page and non-angular page. I have no problem to test on non-angular page. But I have an error when the test finished on the non-angular page and back to angular page.

My test starts from a home page(angular page) and click login button. This will redirect to a non-angular page. Finish typing username and password, then redirect to angular page again. I have issue on the last step when test back to angular page.

beforeAll(() => {
    page = new Abcflow();
});

fdescribe('step 1', () => {
   beforeEach(async () => await page.navigateToStart());

    fit('login as staff and come back to home page', async () => {
    //start from an angular page
    await page.clickButton('a', 'Login / Register');

    //now in a non-angular page
    browser.driver.findElement(by.id('Email')).sendKeys('email');
    browser.driver.findElement(by.id('Password')).sendKeys('password');
    browser.driver.findElement(by.name('button')).click();

    //navigate back to angular page
    await page.navigateToStart();

    expect(await page.getPageTitleText()).toEqual('abc title');
  });
});

I can see my test page came back from non-angular page to the angular page. Then I got error like

• Failed: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined. This could be either because this is a non-angular page or because your test involves client-side navigation, which can interfere with Protractor's bootstrapping. See https://github.com/angular/protractor/issues/2643 for details"

I have tried to add the lines:

browser.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);

Then I got another error said "No element found using locator". The funny thing is if I don't test the login page and just go for the last line, it will pass successfully. Seems like the angular page tests stopped working after navigating from non-angular page.

Answer 1

If your code is working as you say it may just be a case of adding the browser.waitForAngularEnabled(false);

fdescribe('step 1', () => {
   beforeEach(async () => await page.navigateToStart());

    fit('login as staff and come back to home page', async () => {
    //start from an angular page
    await page.clickButton('a', 'Login / Register');

    //now in a non-angular page
    await browser.driver.findElement(by.id('Email')).sendKeys('email');
    await browser.driver.findElement(by.id('Password')).sendKeys('password');
    await browser.driver.findElement(by.name('button')).click();

    //Setting this before you navigate back to the Angular page will ensure it will wait 
    // wait for page to load correctly
    await browser.waitForAngularEnabled(false);

    //navigate back to angular page
    await page.navigateToStart();

    expect(await page.getPageTitleText()).toEqual('abc title');
  });
});

That error you are receiving may be a genuine error and an issue with your locator on the angular page but you would need to post your error message and some of your html.

Answer 2

After adding:

browser.ignoreSynchronization = true;
browser.waitForAngularEnabled(false);

You got:

No element found using locator

Because Protractor didn't wait for page completely loaded and began to search for elements. Synchronization was disabled so you need to add specific time to wait until page loads up:

browser.ignoreSynchronization = true;
browser.sleep(3000);

ignoreSynchronization=true is used for non-Angular pages or when Protractor is unable to recognize it as Angular page. By default Protractor uses ignoreSynchronization=false and waits for Angular site to be completely loaded.

Also you shouldn't use both ignoreSynchronization and waitForAngularEnabled in the same time because they do the same thing ( What is difference between waitForAngularEnabled and browser.ignoreSynchronization in protractor? ).