AngularJS - e2e 测试 - 为什么这个 by.css 选择器有效？

Question

所以我开始从 JavaScript (& jQuery) 背景进入 AngularJS。我一直在学习教程，并且喜欢它的设置方式。目前我正在查看lesson 10，但我无法弄清楚为什么一段代码有效。我试过谷歌搜索并浏览文档......量角器文档似乎没有任何关于 by.css 的内容，我无法弄清楚如何非常简洁地搜索这个：/ ...抱歉，如果我'我只是遗漏了一些非常明显的东西。

在e2e测试场景中有这段代码：

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/);
});

作用于本页-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>

由这个 ng-markup 产生：

<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}" ng-click="setImage(img)">
  </li>
</ul>

我不明白为什么 element(by.css('img.phone'))... 是有效的。基于选择器（并且来自 jQuery），我希望在图像上看到一个“电话”类......但它不存在。 '.phone' 是否引用了其他内容？

我可以看到删除“.phone”部分会给出“.....警告：为定位器 By.cssSelector("img") 找到多个元素 - 你可能需要更具体”，那么如何'.phone' 是否提供了这种特殊性？

谢谢， 本

Answer 1

你只是找错地方了：

它正在检查是否点击缩略图

//app/partials/phone-detail.html (line 9):
<img ng-src="{{img}}" ng-click="setImage(img)">

制作这张图片：

//app/partials/phone-detail.html (line 1):
<img ng-src="{{mainImageUrl}}" class="phone">

改变它的来源。 img.phone 正是您所期望的。

by.css 的文档在这里：https://github.com/angular/protractor/blob/master/docs/locators.md