Question

所以我开始从JavaScript（＆amp; 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>

我无法弄清楚为什么元素（by.css（'img.phone'））...功能正常。基于选择器（来自jQuery），我希望在图像上看到一个“手机”类......但它并不存在。 “.phone”是否引用了其他内容？

我可以看到删除'.phone'部分给出'.....警告：找到多个定位器BycssSelector（“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

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

1 个答案: