title: AngularJS - e2e testing - Why does this by.css selector work?
body: <p>So I'm starting to break into AngularJS from a JavaScript (&amp; jQuery) background. I've been wading through the tutorial, and an loving the way it's set up. Currently I'm looking at <a href="https://docs.angularjs.org/tutorial/step_10" rel="nofollow">lesson 10</a> and I can't figure out why a piece of the code works. I have tried googling and poking through the documentation...the protractor docs don't even seem to have anything for by.css and I couldn't figure out how to search for this very concisely :/ ... Apologies if I'm just missing something seriously obvious.</p>
  
  <p>In the e2e test scenario there is this code:</p>
  
  <pre><code>it('should swap main image if a thumbnail image is clicked on', function() {
    element(by.css('.phone-thumbs li:nth-child(3) img')).click();
    expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
  
    element(by.css('.phone-thumbs li:nth-child(1) img')).click();
    expect(element(by.css('img.phone')).getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
  });
  </code></pre>
  
  <p>which acts on this page-html:</p>
  
  <pre><code>&lt;ul class="phone-thumbs ng-scope"&gt;
    &lt;li ng-repeat="img in phone.images" class="ng-scope"&gt;
      &lt;img ng-src="img/phones/nexus-s.0.jpg" ng-click="setImage(img)" src="img/phones/nexus-s.0.jpg"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>produced by this ng-markup:</p>
  
  <pre><code>&lt;ul class="phone-thumbs"&gt;
    &lt;li ng-repeat="img in phone.images"&gt;
      &lt;img ng-src="{{img}}" ng-click="setImage(img)"&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I can't figure out why the element(by.css('img.phone'))... is functional. Based on the selector (and coming from jQuery) I would expect to see a 'phone' class on the images...but it's not there. Does the '.phone' reference something else? </p>
  
  <p>I can see that removing the '.phone' portion gives '.....warning: more than one element found for locator By.cssSelector("img") - you may need to be more specific', so how is '.phone' providing that specificity?</p>
  
  <p>Thanks,
  Ben</p>