fix(clientsidescripts): findElements and isElementPresent for protractor.By.select

Author: marcenuc

lib/clientsidescripts.js

@@ -256,6 +256,27 @@ clientSideScripts.findSelect = function() {
   }
 };
 
+/**
+ * Find multiple select elements by model name.
+ *
+ * arguments[0] {Element} The scope of the search.
+ * arguments[1] {string} The model name.
+ *
+ * @return {Array.<Element>} The matching select elements.
+*/
+clientSideScripts.findSelects = 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 = 'select[' + prefixes[p] + 'model="' + model + '"]';
+    var inputs = using.querySelectorAll(selector);
+    if (inputs.length) {
+      return inputs;
+    }
+  }
+};
+
 /**
   * Find an selected option element by model name.
   *
@@ -278,6 +299,27 @@ clientSideScripts.findSelectedOption = function() {
   }
 };
 
+/**
+ * Find selected option elements by model name.
+ *
+ * arguments[0] {Element} The scope of the search.
+ * arguments[1] {string} The model name.
+ *
+ * @return {Array.<Element?} The matching select elements.
+*/
+clientSideScripts.findSelectedOptions = 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 = 'select[' + prefixes[p] + 'model="' + model + '"] option:checked';
+    var inputs = using.querySelectorAll(selector);
+    if (inputs.length) {
+      return inputs;
+    }
+  }
+};
+
 /**
  * Find a textarea element by model name.
  *

lib/locators.js

@@ -51,6 +51,10 @@ ProtractorBy.prototype.select = function(model) {
     findOverride: function(driver, using) {
       return driver.findElement(
         webdriver.By.js(clientSideScripts.findSelect), using, model);
+    },
+    findArrayOverride: function(driver, using) {
+      return driver.findElements(
+          webdriver.By.js(clientSideScripts.findSelects), using, model);
     }
   };
 };
@@ -60,6 +64,10 @@ ProtractorBy.prototype.selectedOption = function(model) {
     findOverride: function(driver, using) {
       return driver.findElement(
         webdriver.By.js(clientSideScripts.findSelectedOption), using, model);
+    },
+    findArrayOverride: function(driver, using) {
+      return driver.findElements(
+          webdriver.By.js(clientSideScripts.findSelectedOptions), using, model);
     }
   };
 };

spec/findelements_spec.js

@@ -82,6 +82,21 @@ describe('finding elements', function() {
       });
     });
 
+    it('should find multiple selects', function() {
+      ptor.findElements(protractor.By.select('dc.color')).then(function(arr) {
+        expect(arr.length).toEqual(3);
+      });
+    });
+
+    it('should find multiple selected options', function() {
+      ptor.findElements(protractor.By.selectedOption('dc.color')).then(function(arr) {
+        expect(arr.length).toEqual(3);
+        expect(arr[0].getText()).toBe('red');
+        expect(arr[1].getText()).toBe('green');
+        expect(arr[2].getText()).toBe('blue');
+      });
+    });
+
     it('should find a repeater by partial match', function() {
       var fullMatch = ptor.findElement(
           protractor.By.repeater('baz in days | filter:\'T\'').

testapp/app/js/controllers.js

@@ -105,6 +105,8 @@ function FormCtrl($scope) {
   $scope.color = "blue";
   $scope.show = true;
   $scope.days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
+  $scope.colors = ['red', 'green', 'blue'];
+  $scope.dayColors = [{day: 'Mon', color: 'red'}, {day: 'Tue', color: 'green'}, {day: 'Wed', color: 'blue'}];
 }
 FormCtrl.$inject = ['$scope'];
 

testapp/app/partials/form.html

@@ -10,6 +10,7 @@
   <input ng-model="color" value="green" type="radio"/> green <br/>
   <input ng-model="color" value="red" type="radio"/> red <br/>
 </div>
+<ul><li ng-repeat="dc in dayColors"><select ng-model="dc.color" ng-options="c for c in colors"></select></li></ul>
 <div>
 <input ng-model="show" type="checkbox"/> Show?
 <span id="shower" ng-show="show">Shown!!</span>