Karma – AngularJS Unit test debugging

• In karma.conf.js file, use your favorite browser

   browsers = ['Chrome'];
  

• In the spec file, add the statement “debugger” wherever you want to debug

   it('my awesome test', function () {
       debugger; //This is like setting a breakpoint
       ...
    });
  

• Run karma.

• In the newly opened Chrome Browser, open the console and refresh the page. The execution will stop at the position you added debugger. Now you can add additional breakpoints using the devtools also, if you want 😉

Karma – AngularJS e2e test debugging

• In the karma config, enable

   //set log_level to debug
   LOG_LEVEL = debug;
  

• In the e2e test scenarios, add “pause()” , check the more info at http://docs.angularjs.org/guide/dev_guide.e2e-testing

• Further debugging

  https://groups.google.com/forum/#!msg/angular/eUEVKUsif8U/W4rnLAVF8P0J

  As the application runs in an iframe, if you access the angular object from the JavaScript console, it’s the scenario runner’s one, not the application’s one.

  You can refer to the angular object of the iframe window object using this verbose syntax :

   document.getElementsByTagName('iframe')[0].contentWindow.angular.element("#app")
  

  Adding these two functions in the scenarios.js file will help :

  function appWindow() {
      return document.getElementsByTagName('iframe')[0].contentWindow;
  }
  function appAngular() {
      return appWindow().angular;
  }
  

  Now appWindow() and appAngular() will return respectively the application’s window and angular object. For instance :

  appAngular().element("#content").scope()