Ever noticed that annoying error while running your Protractor tests:

Error while waiting for Protractor to sync with the page: {}.

Especially the two brackets are annoying, because they suggest more information might be available but it is just hidden for you.

The good news is, the fix is rather easy. It turns out that Protractor expects your application to have an data-ng-app attribute on the HTML body element.

My application does not have that, since the Angular application is just a part of my page. So in my Protractor config, I have to add an option to tell Protractor where to find the Angular application:

rootElement: '#awesomeApp',

Note that I’m using a CSS selector based on the ID of the element, but you can also use a class selector or just an element selector. My page obviously looks something like this:

<body>
  <div id="aweSomeApp" data-ng-app="AwesomeApp">
  </div>
  <!-- other markup here -->
</body>

Enjoy!