title: Can Protractor select an element using two "by." statements?
body: <p>My team's web app has several elements with identical bindings and several elements with identical CSS. In my Protractor test, I would need to use both by.css and by.binding in order to capture the element I'm looking for.</p>
  
  <p>Here's an example section of our Angular markup:</p>
  
  <pre><code>&lt;!-- eiHand --&gt;
  &lt;td ng-show="assessment.type === 'EI'"&gt;{{assessment.ratedDate || assessment.scores.eiHand[0].ratedDate | date:'MMMM d, y h:mm a'}}&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'EI'"&gt;{{assessment.raterName || assessment.scores.eiHand[0].rater}}&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'EI'"&gt;{{assessment.averageScore * 100 | number:0}}&lt;/td&gt;
  &lt;!-- lsa --&gt;
  &lt;td ng-show="assessment.type === 'LSA'"&gt;{{assessment.ratedDate || assessment.scores.lsa[0].ratedDate | date:'MMMM d, y h:mm a'}}&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'LSA'"&gt;{{assessment.raterName || assessment.scores.lsa[0].rater}}&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'LSA'"&gt;{{assessment.averageScore | number:1}}&lt;/td&gt;
  </code></pre>
  
  <p>The HTML generated by the browser looks like this:</p>
  
  <pre><code>&lt;!-- eiHand --&gt;
  &lt;td ng-show="assessment.type === 'EI'" class="ng-binding ng-hide"&gt;&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'EI'" class="ng-binding ng-hide"&gt;&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'EI'" class="ng-binding ng-hide"&gt;500&lt;/td&gt;
  &lt;!-- lsa --&gt;
  &lt;td ng-show="assessment.type === 'LSA'" class="ng-binding"&gt;December 1, 2013 5:00 AM&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'LSA'" class="ng-binding"&gt;John Doe&lt;/td&gt;
  &lt;td ng-show="assessment.type === 'LSA'" class="ng-binding"&gt;5.0&lt;/td&gt;
  </code></pre>
  
  <p>I want to select the element with the binding <code>assessment.raterName</code> and the CSS <code>ng-show="assessment.type === 'LSA'"</code>, unless the LSA's are invisible and the EI's are visible, in which case I'd use the other assessment.type. I know how to do either of these individually, but I'm not sure how to zero in on an element with both.</p>
  
  <p>I've tried using <code>element(by.css([the_table])).all(by.binding([see above])).element(by.css([see above]))</code> but I get the error <code>Object [object Object] has no method 'element'</code>. </p>
  
  <p>I also tried <code>element(by.css([the_table])).all(by.binding([see above])).get([a numerical expression based on the value of the assessment.type variable])</code> but it gives the error <code>Object 2000 has no method 'apply'</code>.</p>
  
  <p>I'm sure there's an elegant solution for this, but I don't know what it is.</p>
  
  <p><strong>The ugly solution</strong></p>
  
  <p>What I'm using now is <code>element(by.css([the_table])).element(by.binding('assessment.scores.' + (assessmentType == "LSA" ? "lsa" : "eiHand") + '[0].rater'))</code>. It works in this specific case but doesn't answer the broader question, so I'm not posting it as an answer.</p>