Angular 7, Protractor, randomly error "both angularJS testability and angular testability are undefined"

Question

I'm randomly getting the error:

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"

running

$ ng e2e --webdriverUpdate=false --devServerTarget=

In my spec.ts file I have the following 2 tests, the first one always work, the second randomly fail with the above error.

  beforeEach(async () => {
    myPage = new MyPage();
    browser.get('my-page');
  });

  it('should work', async () => {
    console.log('should work');
    expect(true).toBeTruthy();
  });

  it('should display the title', async () => {
    const title = await $('my-title-selector').getText();
    expect(title).toEqual('My-Title');
  });

Here is MyPage PageObject:

import { $, $$ } from 'protractor';

export class MyPage {
  title = $('my-title-selector');
}

Here is my protractor.conf.js

  // Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts

const { SpecReporter } = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './src/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  SELENIUM_PROMISE_MANAGER: false,
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function () { }
  },
  onPrepare() {
    require('ts-node').register({
      project: require('path').join(__dirname, './tsconfig.e2e.json')
    });
    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
  },
};

Have you any ideas?

Answer 1

If you are using async / await (which you are!) you will need to await all promises. So my guess is your beforeEach promise to load the page is not completed and you are looking for a web element that might not have been bootstrapped properly by Protractor.

beforeEach(async () => {
  myPage = new MyPage();
  await browser.get('my-page');   // browser.get returns a webdriver.promise.Promise
});

it('should work', async () => {
  console.log('should work');
  expect(true).toBeTruthy();
});

it('should display the title', async () => {
  const title = await $('my-title-selector').getText();  // <-- this is right, getText returns a webdriver.promise.Promise<string>
  expect(title).toEqual('My-Title');
});

If you are using Protractor 5.4, it is still using the selenium-webdriver control flow / promise library and not native Promises. So the webdriver.promise.Promise is from the selenium-webdriver typings, promise namespace, Promise object. In Protractor 6 (when it is out of beta), this will switch to native Promises.

Hope that helps.