Feat(clientSideScripts): Add by.buttonText, by.partialButtonText

Adds client side JS implementations of by.buttonText and
by.partialButtonText, enabling element lookup based on innerText.

Closes #452

Author: Damiya

docs/api.md

@@ -147,10 +147,10 @@ are available:
 `Protractor.By.className` function(  ) 
 
  : 
-`Protractor.By.linkText` function(  ) 
+`Protractor.By.linkText` function(  )
 
  : 
-`Protractor.By.partialLinkText` function(  ) 
+`Protractor.By.partialLinkText` function(  )
 
  : 
 `Protractor.By.js` function(  ) 
@@ -179,6 +179,11 @@ are available:
 [**P**](https://github.com/angular/protractor/blob/92e0fdf07ad775878feba9f16be8fba1015e3753/lib/locators.js#L138) : 
 `Protractor.By.repeater` function(  ) 
 
+ :
+`Protractor.By.buttonText` function(  )
+
+ :
+`Protractor.By.partialButtonText` function(  )
 
 
 WebElements

lib/clientsidescripts.js

@@ -342,7 +342,7 @@ clientSideScripts.findInputs = function() {
 };
 
 /**
- * Find a elements by model name.
+ * Find elements by model name.
  *
  * arguments[0] {Element} The scope of the search.
  * arguments[1] {string} The model name.
@@ -363,6 +363,65 @@ clientSideScripts.findByModel = function() {
 };
 
 /**
+ * Find buttons by textual content.
+ *
+ * arguments[0] {Element} The scope of the search.
+ * arguments[1] {string} The exact text to match.
+ *
+ * @return {Array.<Element>} The matching elements.
+ */
+clientSideScripts.findByButtonText = function() {
+  var using = arguments[0] || document;
+  var searchText = arguments[1];
+  var elements = using.querySelectorAll('button, input[type="button"], input[type="submit"]');
+  var matches = [];
+  for (var i = 0; i < elements.length; ++i) {
+    var element = elements[i];
+    var elementText;
+    if (element.tagName.toLowerCase() == "button") {
+      elementText = element.innerText || element.textContent;
+    } else {
+      elementText = element.value;
+    }
+    if (elementText === searchText) {
+      matches.push(element);
+    }
+  }
+
+  return matches;
+};
+
+/**
+ * Find buttons by textual content.
+ *
+ * arguments[0] {Element} The scope of the search.
+ * arguments[1] {string} The exact text to match.
+ *
+ * @return {Array.<Element>} The matching elements.
+ */
+clientSideScripts.findByPartialButtonText = function() {
+  var using = arguments[0] || document;
+  var searchText = arguments[1];
+  var elements = using.querySelectorAll('button, input[type="button"], input[type="submit"]');
+  var matches = [];
+  for (var i = 0; i < elements.length; ++i) {
+    var element = elements[i];
+    var elementText;
+    if (element.tagName.toLowerCase() == "button") {
+      elementText = element.innerText || element.textContent;
+    } else {
+      elementText = element.value;
+    }
+    if (elementText.indexOf(searchText) > -1) {
+      matches.push(element);
+    }
+  }
+
+  return matches;
+};
+
+
+    /**
  * Find multiple select elements by model name.
  *
  * arguments[0] {Element} The scope of the search.

lib/locators.js

@@ -120,6 +120,37 @@ ProtractorBy.prototype.model = function(model) {
   };
 };
 
+/**
+ * Usage:
+ *   <button>Save</button>
+ *   element(by.buttonText("Save"));
+ */
+ProtractorBy.prototype.buttonText = function(searchText) {
+  return {
+    findElementsOverride: function(driver, using) {
+      return driver.findElements(
+          webdriver.By.js(clientSideScripts.findByButtonText), using, searchText);
+    },
+    message: 'by.buttonText("' + searchText + '")'
+  };
+};
+
+/**
+ * Usage:
+ *   <button>Save my file</button>
+ *   element(by.partialButtonText("Save"));
+ */
+ProtractorBy.prototype.partialButtonText = function(searchText) {
+  return {
+    findElementsOverride: function(driver, using) {
+      return driver.findElements(
+          webdriver.By.js(clientSideScripts.findByPartialButtonText), using, searchText);
+    },
+    message: 'by.partialButtonText("' + searchText + '")'
+  };
+};
+
+
 /**
  * @DEPRECATED - use 'model' instead.
  * Usage:

spec/basic/findelements_spec.js

@@ -129,6 +129,35 @@ describe('locators', function() {
     });
   });
 
+  describe('by partial button text', function() {
+    it('should find multiple buttons containing "text"', function() {
+      element.all(by.partialButtonText('text')).then(function(arr) {
+        expect(arr.length).toEqual(4);
+        expect(arr[0].getAttribute('id')).toBe('exacttext');
+        expect(arr[1].getAttribute('id')).toBe('otherbutton');
+        expect(arr[2].getAttribute('id')).toBe('submitbutton');
+        expect(arr[3].getAttribute('id')).toBe('inputbutton');
+      });
+    });
+  });
+
+  describe('by button text', function() {
+    it('should find two button containing "Exact text"', function() {
+      element.all(by.buttonText('Exact text')).then(function(arr) {
+        expect(arr.length).toEqual(2);
+        expect(arr[0].getAttribute('id')).toBe('exacttext');
+        expect(arr[1].getAttribute('id')).toBe('submitbutton');
+      });
+    });
+
+    it('should not find any buttons containing "text"', function() {
+      element.all(by.buttonText('text')).then(function(arr) {
+        expect(arr.length).toEqual(0);
+      })
+    });
+
+  });
+
   describe('by repeater', function() {
     beforeEach(function() {
       browser.get('index.html#/repeater');

testapp/form/form.html

@@ -60,3 +60,12 @@ <h4>Drag and Drop</h4>
   <h4>Alert trigger</h4>
   <button id="alertbutton" ng-click="doAlert()">Open Alert</button>
 </div>
+
+<div>
+  <h4>Buttons</h4>
+  <button id="exacttext">Exact text</button>
+  <button id="otherbutton">Partial button text</button>
+  <button id="trapbutton">No match</button>
+  <input type="submit" value="Exact text" id="submitbutton"/>
+  <input type="button" value="Hello text" id="inputbutton"/>
+</div>