AngularJS - e2e testing - Why does this by.css selector work? - angularjs

Question

So I'm starting to break into AngularJS from a JavaScript (& jQuery) background. I've been wading through the tutorial, and an loving the way it's set up. Currently I'm looking at lesson 10 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.
In the e2e test scenario there is this 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/);
});
which acts on this page-html:
<ul class="phone-thumbs ng-scope">
<li ng-repeat="img in phone.images" class="ng-scope">
<img ng-src="img/phones/nexus-s.0.jpg" ng-click="setImage(img)" src="img/phones/nexus-s.0.jpg">
</li>
</ul>
produced by this ng-markup:
<ul class="phone-thumbs">
<li ng-repeat="img in phone.images">
<img ng-src="{{img}}" ng-click="setImage(img)">
</li>
</ul>
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?
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?
Thanks,
Ben

Answer 1

You're just looking in the wrong place:
It is checking if clicking on a thumbnail
//app/partials/phone-detail.html (line 9):
<img ng-src="{{img}}" ng-click="setImage(img)">
makes THIS image:
//app/partials/phone-detail.html (line 1):
<img ng-src="{{mainImageUrl}}" class="phone">
change it's source. img.phone is exactly what you would expect.
The docs for by.css are here: https://github.com/angular/protractor/blob/master/docs/locators.md