feat(locators): Added a By.cssContainingText locator.

This new locator find elements by css selector and inner text in response to the lack of ':contains' selector.

Example: By.cssContainingText('ul .pet', 'Dog') will find all ul children with class 'pet' containing the text 'Dog'.

Closes #488, Closes #709

Author: bcaudan

lib/clientsidescripts.js

@@ -471,6 +471,29 @@ clientSideScripts.findTextareas = function(model, using) {
   }
 };
 
+/**
+ * Find elements by css selector and textual content.
+ *
+ * @param {string} cssSelector The css selector to match.
+ * @param {string} searchText The exact text to match.
+ * @param {Element} using The scope of the search. Defaults to 'document'.
+ *
+ * @return {Array.<Element>} An array of matching elements.
+ */
+clientSideScripts.findByCssContainingText = function(cssSelector, searchText, using) {
+  var using = using || document;
+  var elements = using.querySelectorAll(cssSelector);
+  var matches = [];
+  for (var i = 0; i < elements.length; ++i) {
+    var element = elements[i];
+    var elementText = element.innerText || element.textContent;
+    if (elementText.indexOf(searchText) > -1) {
+      matches.push(element);
+    }
+  }
+  return matches;
+};
+
 /**
  * Tests whether the angular global variable is present on a page. Retries
  * in case the page is just loading slowly.

lib/locators.js

@@ -321,4 +321,28 @@ ProtractorBy.prototype.repeater = function(repeatDescriptor) {
   };
 };
 
+/**
+ * Find elements by CSS which contain a certain string.
+ *
+ * @view
+ * <ul>
+ *   <li class="pet">Dog</li>
+ *   <li class="pet">Cat</li>
+ * </ul>
+ *
+ * @example
+ * // Returns the DIV for the dog, but not cat.
+ * var dog = element(by.cssContainingText('.pet', 'Dog'));
+ */
+ProtractorBy.prototype.cssContainingText = function(cssSelector, searchText) {
+  return {
+    findElementsOverride: function(driver, using) {
+      return driver.findElements(
+        webdriver.By.js(clientSideScripts.findByCssContainingText,
+        cssSelector, searchText, using));
+    },
+    message: 'by.cssContainingText("' + cssSelector + '", "' + searchText + '")'
+  };
+};
+
 exports.ProtractorBy = ProtractorBy;

spec/basic/findelements_spec.js

@@ -336,7 +336,6 @@ describe('locators', function() {
       });
 
       it('should find an individual element', function() {
-        browser.debugger();
         var firstInitial = element(
           by.repeater('bloop in days').row(0).column('bloop.initial'));
 
@@ -345,6 +344,16 @@ describe('locators', function() {
     });
   });
 
+  describe('by css containing text', function () {
+    it('should find elements by css and partial text', function () {
+      element.all(by.cssContainingText('#inner ul .pet', 'dog')).then(function(arr) {
+        expect(arr.length).toEqual(2);
+        expect(arr[0].getAttribute('id')).toBe('bigdog');
+        expect(arr[1].getAttribute('id')).toBe('smalldog');
+      });
+    });
+  });
+
   it('should determine if an element is present', function() {
     expect(browser.isElementPresent(by.binding('greet'))).toBe(true);
     expect(browser.isElementPresent(by.binding('nopenopenope'))).toBe(false);

testapp/form/form.html

@@ -72,3 +72,13 @@ <h4>Buttons</h4>
   <input type="submit" value="Exact text" id="submitbutton"/>
   <input type="button" value="Hello text" id="inputbutton"/>
 </div>
+
+<div id="inner">
+  <h4>Inner text</h4>
+  <ul>
+    <li class="pet" id="bigdog">Big dog</li>
+    <li class="pet" id="smalldog">Small dog</li>
+    <li class="notpet" id="otherdog">Other dog</li>
+    <li class="pet" id="cat">Cat</li>
+  </ul>
+</div>