Protractor: Error while waiting for Protractor to sync with the page: "both angularJS testability and angular testability are undefined

Question

I am trying to write some end to end tests and waned to use async and await.

configuration file

exports.config = {
    framework: 'jasmine',
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['spec.js'],
    SELENIUM_PROMISE_MANAGER: false,
    getPageTimeout: 10000,
    multiCapabilities: [
        {
            browserName: 'firefox'
        }, {
            browserName: 'chrome'
        }
    ]
}

spec file

    describe('home-view', function(){

    beforeEach(async function(){

        await browser.get('http://localhost:49335/index.html#!/home');

    });

    it('sorted by firstname', async function(){

        await element(by.css("[ng-click=\"sortData('firstname')\"]")).click();
        var firstname = element.all(by.repeater('a in emps')).all(by.css('td'));     
        expect(await firstname.get(0).getText()).toEqual('abraham');

    });

})

Error 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."

Why do I get this error? Thanks

Answer 1

You got this error because Protractor by default wait angular page is loaded. If you work with non angular you should add await browser.waitForAngularEnabled(false); to onPrepare block:

 onPrepare: async () => {
 ...
 await browser.waitForAngularEnabled(false);
 ...  

How does this "waiting" mechanism works? I will copy description from code:

     * If set to false, Protractor will not wait for Angular $http and $timeout
     * tasks to complete before interacting with the browser. This can cause
     * flaky tests, but should be used if, for instance, your app continuously
     * polls an API with $timeout.

So, as you can see it is all about $http and $timeout tasks. A bit often developers use it in a not proper way.

In conclusion, if you see such error:

both angularJS testability and angular testability are undefined

you have to add await browser.waitForAngularEnabled(false);.