feat(locators): Add support for regex in cssContainingText (#4532)

* feat(locators): Add support for regex in cssContainingText.

In order to get this working, I had to serialize the regex before
we send it over the wire to the browser.

Since there is no standard way to do this, I took guidance from
a stackoverflow answer, where they call toString on the regex.
Then, on the browser, you use a regex to extract out the text in between
/someregex/

The hard part is to also extract out the modifiers, like i for ignore case.

Author: joeheyming

lib/clientsidescripts.js

@@ -676,20 +676,28 @@ functions.findByPartialButtonText = function(searchText, 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 {string} searchText The exact text to match or a serialized regex.
  * @param {Element} using The scope of the search.
  *
  * @return {Array.<Element>} An array of matching elements.
  */
 functions.findByCssContainingText = function(cssSelector, searchText, using) {
   using = using || document;
 
+  if (searchText.indexOf('__REGEXP__') === 0) {
+    var match = searchText.split('__REGEXP__')[1].match(/\/(.*)\/(.*)?/);
+    searchText = new RegExp(match[1], match[2] || '');
+  }
   var elements = using.querySelectorAll(cssSelector);
   var matches = [];
   for (var i = 0; i < elements.length; ++i) {
     var element = elements[i];
     var elementText = element.textContent || element.innerText || '';
-    if (elementText.indexOf(searchText) > -1) {
+    var elementMatches = searchText instanceof RegExp ?
+        searchText.test(elementText) :
+        elementText.indexOf(searchText) > -1;
+    
+    if (elementMatches) {
       matches.push(element);
     }
   }

lib/locators.ts

@@ -415,10 +415,11 @@ export class ProtractorBy extends WebdriverBy {
    * var dog = element(by.cssContainingText('.pet', 'Dog'));
    *
    * @param {string} cssSelector css selector
-   * @param {string} searchString text search
+   * @param {string|RegExp} searchString text search
    * @returns {ProtractorLocator} location strategy
    */
-  cssContainingText(cssSelector: string, searchText: string): ProtractorLocator {
+  cssContainingText(cssSelector: string, searchText: string|RegExp): ProtractorLocator {
+    searchText = (searchText instanceof RegExp) ? '__REGEXP__' + searchText.toString() : searchText;
     return {
       findElementsOverride: (driver: WebDriver, using: WebElement, rootSelector: string):
                                 wdpromise.Promise<WebElement[]> => {

spec/basic/locators_spec.js

@@ -353,6 +353,26 @@ describe('locators', function() {
       expect(element(by.cssContainingText('#transformedtext div', 'capitalize'))
           .getAttribute('id')).toBe('textcapitalize');
     });
+
+    it('should find elements with a regex', function() {
+      element.all(by.cssContainingText('#transformedtext div', /(upper|lower)case/i))
+        .then(function(found) {
+          expect(found.length).toEqual(2);
+          expect(found[0].getText()).toBe('UPPERCASE');
+          expect(found[1].getText()).toBe('lowercase');
+        });
+    });
+
+    it('should find elements with a regex with no flags', function() {
+      // this test matches the non-transformed text.
+      // the text is actually transformed with css,
+      // so you can't match the Node innerText or textContent.
+      element.all(by.cssContainingText('#transformedtext div', /Uppercase/))
+        .then(function(found) {
+          expect(found.length).toEqual(1);
+          expect(found[0].getText()).toBe('UPPERCASE');
+        });
+    });
   });
 
   describe('by options', function() {