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

Question

所以我开始从 JavaScript(和 jQuery)背景开始进入 AngularJS。我一直在费力地阅读本教程，并且喜欢它的设置方式。目前我正在查看lesson 10我不明白为什么一段代码可以工作。我尝试过谷歌搜索和浏览文档... Protractor 文档似乎甚至没有任何关于 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 标记生成:

<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