量角器AngularJS CSS選擇器查找多個元素

Question

我是CSS新手，我試圖避免在我的Protractor AngularJS測試自動化中使用xpath。我試圖在列表中獲取一個特定的元素，我得到了，但是量角器告訴我有多個找到的元素找到了。將來我想避免這種情況，因爲我並不總是希望首先在名單上。我對CSS略有困惑，並且確切地知道如何去到我要去的地方，我發現的文檔一直很模糊。我試圖抓住營銷場所元素，但也需要抓住下面的其他元素。最上面的代碼是AngularJS，我目前如何抓取文本。提前致謝。

var iPlanLevel=element(by.css("div:nth-of-type(2) > div:nth-of-type(2) > div > div:nth-of-type(1) > span")).getText().then(function (text) { 
 
    console.log(text); 
 
} 
 
); 
 

 
<!-- begin snippet: js hide: false -->

<div class="home-info"> 
 

 
    <span class="web-developer-id-class-details"></span> 
 
    <div class="home-top home-section"></div> 
 
    <span class="web-developer-id-class-details"></span> 
 
    <div class="home-bottom home-section"> 
 
    <h3></h3> 
 
    <span class="web-developer-id-class-details"></span> 
 
    <div class="home-box"> 
 
     <span class="web-developer-id-class-details"></span> 
 
     <span class="home-name"></span> 
 
     <br></br> 
 

 

 
     Lindemannstrasse 88 
 

 
     <br></br> 
 

 

 
     Dortmund 44137 
 

 
     <br></br> 
 
     <br></br> 
 
     <span class="web-developer-id-class-details"></span> 
 
     <div class="property-group meduim"> 
 
     <div></div> 
 
     <span> 
 

 
        MarketingVenue 
 

 
       </span> 
 
     </div> 
 
     <span class="web-developer-id-class-details"> 
 

 
       .property-group.meduim 
 

 
      </span> 
 
     <div class="property-group meduim"> 
 
     <div></div> 
 
     <span> 
 

 
        December 31, 2016 
 

 
       </span> 
 
     </div> 
 
     <span class="web-developer-id-class-details"></span> 
 
     <div class="property-group meduim"></div> 
 
     <div></div> 
 
     <br></br> 
 
    </div> 
 
    <span class="web-developer-id-class-details"></span> 
 
    <div class="home-box"></div> 
 
    </div> 
 

 
</div>

Answer 1

您可以編輯您要測試的HTML？如果是這樣，將標籤添加到Marketing Venue範圍內將非常有用。假設你添加名稱=「marketingVenue」，那麼你可以做這樣的事情：

// Element by css selector shorthand($ = by.css()) 
var marketingVenue = $('[name="marketingVenue"]'); 

// Child selector using css selector shorthand 
var marketingChild = marketingVenue.$('[name="childBeneathMarketingVenue]'); 

// Child selector using a variable and element(el.locator()) 
var marketingChildSelector = $('[name="childBeneathMarketingVenue"]'); 
var marketingChild = marketingVenue.element(marketingChildSelector.locator()); 

如果您不能編輯HTML，你仍然可以使用上面的代碼，但有一個更長，更脆弱的CSS選擇器。

要清除多個元素的警告，您必須獲得所有元素都是select .first或.get（x）的數組中的特定元素。

// Get all elements with a tag using shorthand $$ element.all(by.css(x)) 
var marketingVenues = $$('[name="marketingVenues"]'); 
var firstMarketingVenue = marketingVenues.first(); 
var specificMarketingVenue = marketingVenues.get(12); // Get the 13th element from the array 

您也可以使用此功能來抓住那些看得見元素（一個或多個），假設你的HTML有一些隱藏的，有些是可見的。

// Pass a string css selector to get the first visible element of that selector 
function getVisibleElements(selector){ 
    var allElementsOfSelector = element.all(by.css(selector)); 
    var displayedElement = allElementsOfSelector .filter(function(elem) { 
     return elem.isDisplayed('cannot find' + ' ' + selector); 
    }) // Add '.first();' here if you want just the first visible 
    return displayedElement ; 
} 

var visibleMarketingVenues = getVisibleElements('[name="marketingVenues"]'); 
var marketingVenue = visibleMarketingVenues.first(); 
var fifthMarketingVenue = visibleMarketingVenues.get(4); 

針對您的特殊選擇，如果你沒有進入編輯HTML，你可能在尋找改變選擇，如果頁面本身有任何改變，因爲DIV選擇器是真的很脆弱。您的選擇器現在可能是這樣的：

var marketingVenue = $$('.property-group').get(0).$('span');