Added nested angular app capability via conf file. Copied some tests over to demonstrate

Changed option name to coincide with angular's $rootElement semantics

Author: colinmutter

lib/cli.js

@@ -19,6 +19,7 @@ var config = {
   capabilities: {
     'browserName': 'chrome'
   },
+  rootElement: 'body',
   jasmineNodeOpts: {
     specs: [],
     isVerbose: false,
@@ -138,7 +139,7 @@ var startJasmineTests = function() {
   driver.getSession().then(function(session) {
     id = session.getId();
 
-    protractor.setInstance(protractor.wrapDriver(driver, config.baseUrl));
+    protractor.setInstance(protractor.wrapDriver(driver, config.baseUrl, config.rootElement));
 
     // Export protractor to the global namespace to be used in tests.
     global.protractor = protractor;

lib/protractor.js

@@ -25,11 +25,13 @@ var clientSideScripts = {};
  * Wait until Angular has finished rendering and has
  * no outstanding $http calls before continuing.
  *
- * arguments none.
+ * arguments[0] {string} The selector housing an ng-app
+ * arguments[1] {function} callback
  */
 clientSideScripts.waitForAngular = function() {
-  var callback = arguments[arguments.length - 1];
-  angular.element(document.body).injector().get('$browser').
+  var el = document.querySelector(arguments[0]);
+  var callback = arguments[1];
+  angular.element(el).injector().get('$browser').
       notifyWhenNoOutstandingRequests(callback);
 };
 
@@ -291,9 +293,10 @@ var mixin = function(to, from, fnName) {
 /**
  * @param {webdriver.WebDriver} webdriver
  * @param {string=} opt_baseUrl A base URL to run get requests against.
+ * @param {string=body} opt_rootElement  Selector el that has an ng-app in scope
  * @constructor
  */
-var Protractor = function(webdriver, opt_baseUrl) {
+var Protractor = function(webdriver, opt_baseUrl, opt_rootElement) {
   // Mix all other driver functionality into Protractor.
   for (var foo in webdriver) {
     if(!this[foo] && typeof webdriver[foo] == 'function') {
@@ -303,7 +306,7 @@ var Protractor = function(webdriver, opt_baseUrl) {
 
   this.driver = webdriver;
   this.baseUrl = opt_baseUrl || '';
-
+  this.rootEl = opt_rootElement || 'body';
   this.moduleNames_ = [];
 
   this.moduleScripts_ = [];
@@ -317,7 +320,7 @@ var Protractor = function(webdriver, opt_baseUrl) {
  *    scripts return value.
  */
 Protractor.prototype.waitForAngular = function() {
-  return this.driver.executeAsyncScript(clientSideScripts.waitForAngular);
+  return this.driver.executeAsyncScript(clientSideScripts.waitForAngular, this.rootEl);
 };
 
 /**
@@ -444,8 +447,8 @@ Protractor.prototype.debugger = function() {
  * @param {string=} opt_baseUrl A URL to prepend to relative gets.
  * @return {Protractor}
  */
-exports.wrapDriver = function(webdriver, opt_baseUrl) {
-  return new Protractor(webdriver, opt_baseUrl);
+exports.wrapDriver = function(webdriver, opt_baseUrl, opt_rootElement) {
+  return new Protractor(webdriver, opt_baseUrl, opt_rootElement);
 };
 
 var instance;

package.json

@@ -31,7 +31,7 @@
   "bin": "bin/protractor",
   "main": "lib/protractor.js",
   "scripts": {
-    "test": "node lib/cli.js spec/basicConf.js"
+    "test": "node lib/cli.js spec/basicConf.js; node lib/cli.js spec/altRootConf.js;"
   },
   "version": "0.7.0"
 }

spec/altRoot/findelements_spec.js

@@ -0,0 +1,27 @@
+var util = require('util');
+
+describe('finding elements when ng-app is nested', function() {
+  var ptor;
+
+  describe('in forms', function() {
+    ptor = protractor.getInstance();
+
+    beforeEach(function() {
+      ptor.get('app/alt_root_index.html#/form');
+    });
+
+    it('should find an element by binding', function() {
+      var greeting = ptor.findElement(protractor.By.binding('{{greeting}}'));
+
+      expect(greeting.getText()).toEqual('Hiya');
+    });
+
+    it('should find elements outside of angular', function() {
+      var outside = ptor.findElement(protractor.By.id('outside-ng'));
+      var inside = ptor.findElement(protractor.By.id('inside-ng'));
+
+      expect(outside.getText()).toEqual('{{1 + 2}}');
+      expect(inside.getText()).toEqual('3');
+    });
+  });
+});

spec/altRootConf.js

@@ -0,0 +1,29 @@
+// Tests for an Angular app where ng-app is not on the body.
+exports.config = {
+  seleniumServerJar: './selenium/selenium-server-standalone-2.35.0.jar',
+  chromeDriver: './selenium/chromedriver',
+
+  seleniumAddress: 'http://localhost:4444/wd/hub',
+
+  // Spec patterns are relative to the current working directly when
+  // protractor is called.
+  specs: [
+    'spec/altRoot/*_spec.js',
+  ],
+
+  capabilities: {
+    'browserName': 'chrome'
+  },
+
+  // Selector for the element housing the angular app.
+  rootElement: 'div#nested-ng-app',
+
+  baseUrl: 'http://localhost:8000',
+
+  jasmineNodeOpts: {
+    onComplete: null,
+    isVerbose: false,
+    showColors: true,
+    includeStackTrace: true,
+  }
+};

spec/testapp_spec.js

@@ -2,7 +2,7 @@ var util = require('util');
 
 describe('longer example', function() {
   var ptor = protractor.getInstance();
-  
+
   describe('synchronizing with Angular', function() {
     describe('http calls', function() {
       beforeEach(function() {
@@ -29,11 +29,11 @@ describe('longer example', function() {
         // Would normally need ptor.sleep(2) or something.
         expect(ptor.findElement(protractor.By.id('statuscode')).getText()).
             toEqual('200');
-        
+
         expect(ptor.findElement(protractor.By.id('data')).getText()).
             toEqual('finally done');
       });
-    }); 
+    });
 
     describe('slow rendering', function() {
       beforeEach(function() {
@@ -59,4 +59,5 @@ describe('longer example', function() {
       });
     });
   });
-});
+
+});

testapp/app/alt_root_index.html

@@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>My AngularJS App</title>
+  <link rel="stylesheet" href="css/app.css"/>
+</head>
+<body>
+
+  <div id="outside-ng">
+    {{1 + 2}}
+  </div>
+
+  <div id="nested-ng-app" ng-app="myApp">
+    <div id="inside-ng">
+      {{1 + 2}}
+    </div>
+
+    <ul class="menu">
+      <li><a href="#/http">http</a></li>
+      <li><a href="#/repeater">repeater</a></li>
+      <li><a href="#/bindings">bindings</a></li>
+      <li><a href="#/form">form</a></li>
+      <li><a href="#/async">async</a></li>
+    </ul>
+
+    <div ng-view></div>
+    <div>Angular seed app: v<span app-version></span></div>
+  </div>
+
+  <!-- In production use:
+  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
+  -->
+  <script src="lib/angular_v1.0.6/angular.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/services.js"></script>
+  <script src="js/controllers.js"></script>
+  <script src="js/filters.js"></script>
+  <script src="js/directives.js"></script>
+</body>
+</html>