AngularJS - e2e測試 - 爲什麼這個by.css選擇器工作？

所以我開始從JavaScript（& jQuery）背景入侵AngularJS。我一直在閱讀教程，並且喜歡它的設置方式。目前我正在尋找lesson 10，我不知道爲什麼一段代碼有效。我試着用google搜索文檔......量角器文檔似乎沒有任何關於by.css的內容，我也無法弄清楚如何非常簡潔地搜索：/ ...道歉，如果我'我只是錯過了一些顯而易見的事AngularJS - e2e測試 - 爲什麼這個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"> 
    <li ng-repeat="img in phone.images"> 
    <img ng-src="{{img}}" ng-click="setImage(img)"> 
    </li> 
</ul>

：

<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-標記產生

我無法弄清楚爲什麼元素（by.css（'img.phone'））...是功能性的。基於選擇器（來自jQuery），我期望在圖像上看到'手機'類...但它不在那裏。 '.phone'是否引用其他內容？

我可以看到刪除'.phone'部分給出'.....警告：爲定位器找到的多個元素By.cssSelector（「img」） - 您可能需要更具體一些'，所以'.phone'如何提供這種特異性？

感謝，本

來源

2014-11-04 Ben

你只是找錯了地方：

如果縮略圖

//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

來源

2014-11-04 22:24:57 dave

完美，謝謝...太多的代碼通過今天涉水，感激的幫助和文檔的鏈接！ – Ben 2014-11-04 22:37:20

AngularJS - e2e測試 - 爲什麼這個by.css選擇器工作？

回答

相關問題