feat(locators): by model works for anything with a model, not just input

Notably, by.model will now find selects and textareas.

Closes #321.

Author: juliemr

lib/clientsidescripts.js

@@ -211,6 +211,7 @@ clientSideScripts.findRepeaterColumn = function() {
 
 /**
  * Find an input elements by model name.
+ * DEPRECATED - use findByModel
  *
  * arguments[0] {Element} The scope of the search.
  * arguments[1] {string} The model name.
@@ -230,6 +231,27 @@ clientSideScripts.findInputs = function() {
   }
 };
 
+/**
+ * Find a elements by model name.
+ *
+ * arguments[0] {Element} The scope of the search.
+ * arguments[1] {string} The model name.
+ *
+ * @return {Array.<Element>} The matching elements.
+ */
+clientSideScripts.findByModel = function() {
+  var using = arguments[0] || document;
+  var model = arguments[1];
+  var prefixes = ['ng-', 'ng_', 'data-ng-', 'x-ng-', 'ng\\:'];
+  for (var p = 0; p < prefixes.length; ++p) {
+    var selector = '[' + prefixes[p] + 'model="' + model + '"]';
+    var elements = using.querySelectorAll(selector);
+    if (elements.length) {
+      return elements;
+    }
+  }
+};
+
 /**
  * Find multiple select elements by model name.
  *

lib/locators.js

@@ -60,6 +60,7 @@ ProtractorBy.prototype.binding = function(bindingDescriptor) {
 
 /**
  * Usage:
+  * @DEPRECATED - use 'model' instead.
  *   <select ng-model="user" ng-options="user.name for user in users"></select>
  *   element(by.select("user"));
  */
@@ -113,13 +114,14 @@ ProtractorBy.prototype.model = function(model) {
   return {
     findElementsOverride: function(driver, using) {
       return driver.findElements(
-          webdriver.By.js(clientSideScripts.findInputs), using, model);
+          webdriver.By.js(clientSideScripts.findByModel), using, model);
     },
     message: 'by.model("' + model + '")'
   };
 };
 
 /**
+ * @DEPRECATED - use 'model' instead.
  * Usage:
  *   <textarea ng-model="user"></textarea>
  *   element(by.textarea("user"));

spec/basic/findelements_spec.js

@@ -54,7 +54,19 @@ describe('locators', function() {
           toBe(false);
     });
 
+    it('should find a textarea by model', function() {
+      var about = element(by.model('aboutbox'));
+      expect(about.getAttribute('value')).toEqual('This is a text box');
+
+      about.clear();
+      about.sendKeys('Something else to write about');
+
+      expect(about.getAttribute('value')).
+          toEqual('Something else to write about');
+    });
+
     it('should find an element by textarea model', function() {
+      // Note: deprecated API.
       var about = element(by.textarea('aboutbox'));
       expect(about.getAttribute('value')).toEqual('This is a text box');
 
@@ -65,6 +77,11 @@ describe('locators', function() {
           toEqual('Something else to write about');
     });
 
+    it('should find multiple selects by model', function() {
+      var selects = element.all(by.model('dayColor.color'));
+      expect(selects.count()).toEqual(3);
+    });
+
     it('should find inputs with alternate attribute forms', function() {
       var letterList = element(by.id('letterlist'));
       expect(letterList.getText()).toBe('');
@@ -91,22 +108,18 @@ describe('locators', function() {
 
   describe('by select', function() {
     it('should find multiple selects', function() {
+      // Note: deprecated API.
       browser.findElements(by.select('dayColor.color')).then(function(arr) {
         expect(arr.length).toEqual(3);
       });
     });
 
-    it('should find the select and concat its options', function() {
-      expect(element(by.select('fruit')).getText()).
-          toEqual('applepearpeachbanana');
-    });
-
     it('should find the selected option', function() {
       expect(element(by.selectedOption('fruit')).getText()).toEqual('apple');
     });
 
     it('should find multiple selected options', function() {
-      browser.findElements(
+      element.all(
           by.selectedOption('dayColor.color')).then(function(arr) {
         expect(arr.length).toEqual(3);
         expect(arr[0].getText()).toBe('red');