title: Search on descendants of an element
body: <p>With protractor whats the best way to select child elements? Say we have the layout below...</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id='parent_1'&gt;
      &lt;div class='red'&gt;Red&lt;/div&gt;
      &lt;div class='blue'&gt;Blue&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id='parent_2'&gt;
      &lt;div class='red'&gt;Red&lt;/div&gt;
      &lt;div class='blue'&gt;Blue&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With jQuery we'd do something like this.</p>
  
  <pre class="lang-js prettyprint-override"><code>var p1 = $('#parent_1');
  var p1_red = $('.red', p1);  //or p1.find('.red');
  var p1_blue = $('.blue', p1); //or p1.find('.blue');
  </code></pre>
  
  <p>But with Protractor does it make sense to first get the parent element?
  Since doing this <code>var p1 = element('#parent_1');</code> doesn't actually retrieve/search for the object until <code>getText()</code> or something is called.  </p>
  
  <p>so doing this..</p>
  
  <p>Scenario 1
  </p>
  
  <pre><code>expect(p1.element('.red')).toBe('red');
  expect(p1.element('.blue')).toBe('blue');
  </code></pre>
  
  <p>OR</p>
  
  <p>Scenario 2
  </p>
  
  <pre><code>expect(element('#parent_1').element('.red')).toBe('red');
  expect(element('#parent_1').element('.blue')).toBe('blue');
  </code></pre>
  
  <p>OR</p>
  
  <p>Scenario 3
  </p>
  
  <pre><code>expect(element('#parent_1 &gt; .red')).toBe('red');
  expect(element('#parent_1 &gt; .blue')).toBe('blue');
  </code></pre>
  
  <p><strong>Are there any benefits in one approach over the other?</strong></p>
  
  <p>This is what I'm doing but I don't know if there's any advantage of separating the parent from the cssSelector:</p>
  
  <pre class="lang-js prettyprint-override"><code>function getChild(cssSelector, parentElement){
      return parentElement.$(cssSelector);
  }
  
  var parent = $('#parent_1');
  var child_red = getChild('.red', parent);
  var child_blue = getChild('.blue', parent);
  </code></pre>
  
  <p>Looking at Protractor's <a href="https://github.com/angular/protractor/blob/master/docs/api.md#elementfinder">elementFinder</a> I could be doing this:</p>
  
  <pre class="lang-js prettyprint-override"><code>function getChild(cssSelector, parentCss){
      return $(parentCss).$(cssSelector);
  }
  
  var child_red = getChild('.red', '#parent_1');
  var child_blue = getChild('.blue', '#parent_1');
  </code></pre>