A handy trick (read: best practice) I ran into today was about how to properly inform Protractor where to look for your Angular application when it pols the DOM.

In my early Protractor tests I always started out with something like:

// ignore Angular and sync
beforeEach(function() {
    browser.ignoreSynchronization = true;
});

I have a few tests that need to run back and fourth between Angular and non-Angular pages and this worked in a pinch but I never really looked into the details of it.

Today while working on a new test that’s being extremely finicky, I needed to debug that line a bit and came across a great post by Vincent Tunru. In essence, adding a browser.ignoreSynchronization = true;  line to each test works, but in reality it’s better to simply tell protractor in your config file where your Angular app will exist and let it sort out whether or not there’s Angular on the page.

You can accomplish this by adding to your cons.js file the following:

exports.config = {
  
  rootElement: '*[ng-app]', 

  ...

Which will tell Protractor that your Angular app should be found on an element with the attribute of ng-app whether your Angular app is in the default body tag or most likely not.

Neat and much cleaner. Thanks, Vincent!