title: Understanding the cssContainingText locator functionality in Protractor
body: <p>I am currently in process of creating a framework using Protractor. I was trying to use <code>cssContainingText</code> locator given by the Protractor API. However, the locator failed giving an <code>invalidElement</code> exception, which seemed wierd to me. </p>
  
  <p>The HTML of the page looks like this</p>
  
  <pre><code>     &lt;tbody&gt;
          &lt;tr class="row2"&gt;
               &lt;td class="action-checkbox"&gt;...&lt;/td&gt;
               &lt;th class="field-name"&gt;
                   &lt;a href="some_link"&gt;someText&lt;/a&gt;
               &lt;/th&gt;
               &lt;td class="field-slug"&gt;sometext&lt;/td&gt;
          &lt;/tr&gt;   
          &lt;tr class="row3"&gt;
               &lt;td class="action-checkbox"&gt;...&lt;/td&gt;
               &lt;th class="field-name"&gt;
                   &lt;a href="some_link"&gt;someOtherText&lt;/a&gt;
               &lt;/th&gt;
               &lt;td class="field-slug"&gt;someothertext&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="row4"&gt;...&lt;/tr&gt;
               &lt;td class="action-checkbox"&gt;...&lt;/td&gt;
               &lt;th class="field-name"&gt;
                   &lt;a href="some_link"&gt;someThirdText&lt;/a&gt;
               &lt;/th&gt;
               &lt;td class="field-slug"&gt;somethirdtext&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>I was trying to use the text <code>someText</code> using the following locator-</p>
  
  <p><code>element(by.cssContainingText('.field-name','someText'));</code>, which weirdly gives an <code>InvalidLocator</code> exception. When I use the following locator <code>element(by.cssContainingText('a','someText'))</code>, the code works perfectly fine. </p>
  
  <p>As per what I understand from the explanation given <a href="https://stackoverflow.com/questions/41391028/by-csscontainingtext-in-python-selenium">here</a>, and the Protractor implementation given <a href="https://github.com/angular/protractor/blob/86fd56917f039efbff8e6f323f4d91fa8bc821a4/lib/clientsidescripts.js#L575" rel="nofollow noreferrer">here</a>, the <code>cssContainingText</code> first locates all the elements using the CSS Selector and then matches the required text. </p>
  
  <p>So, it seems perfectly fine to me to use the <code>.field-name</code> class name for the CSS Selector and then match the desired string. However, this fails, which I am not able to understand. Inputs on this would be helpful.</p>