ProtractorJS: Error while waiting for Protractor to sync with the page: “Could not find testability for element.”

Question

I'm trying to end-to-end test my Angular 2 project with ProtractorJS. When I run protractor conf.js in my console, I get:

 Failed: Error while waiting for Protractor to sync with the page: "Could not
 find testability for element."

Inside the config file:

exports.config = {
    seleniumAddress: "http://localhost:4444/wd/hub",
    framework:"jasmine2",
    capabilities: {"browserName": "chrome"},
    specs: ["todo-spec.js"]
};

My root component:

<section>
    <h1>Employee Payroll Information Directory</h1>
    <employee-searchform></employee-searchform>
</section>

This is the test I'm trying to run:

describe('modal component', function () {
    it('should output the employee and delete it from the array', function () {
        browser.get('http://localhost:80/Fourth/Fourth/');
        var searchField = element(by.className('.ng-valid'));
        searchField.click();
        searchField.sendKeys('Skye');
        searchField.getText().then(function (text) {
            console.log(text);
        });
        var employeeListItem = element(by.id('employee-list'));
    });
});

This is what I get on the webDriver Selenium server:

23:57:25.816 INFO - Done: [execute async script: try { return (function (rootSel
ector, callback) {
  var el = document.querySelector(rootSelector);

  try {
    if (window.getAngularTestability) {
      window.getAngularTestability(el).whenStable(callback);
      return;
    }
    if (!window.angular) {
      throw new Error('angular could not be found on the window');
    }
    if (angular.getTestability) {
      angular.getTestability(el).whenStable(callback);
    } else {
      if (!angular.element(el).injector()) {
        throw new Error('root element (' + rootSelector + ') has no injector.' +

           ' this may mean it is not inside ng-app.');
      }
      angular.element(el).injector().get('$browser').
          notifyWhenNoOutstandingRequests(callback);
    }
  } catch (err) {
    callback(err.message);
  }
}).apply(this, arguments); }
catch(e) { throw (e instanceof Error) ? e : new Error(e); }, [body]]
23:57:25.899 INFO - Executing: [delete session: 35adb055-eee3-419e-b3c1-461b65b4
18aa])
23:57:29.157 INFO - Done: [delete session: 35adb055-eee3-419e-b3c1-461b65b418aa]

Answer 1

You should point Protractor to the element housing the Angular app. This can be done by setting the rootElement in your protractor config:

rootElement: 'app',

Answer 2

if you use By.className() you no need to mention "." in front of your class name. You can simply use By.className("ng-valid")