量角器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');