AngularJS transcavator CSS selector that finds multiple elements
I am new to CSS and am trying to avoid using xpath in my Contractor AngularJS test machines. I'm trying to get a specific item in a list that I'm getting, however Protractor tells me that multiple items were found for the locator. In the future, I want to avoid this because I won't always be the first on the list. I am a little confused about the CSS and exactly how to get where I am going and the documentation I found was vague. I'm trying to grab the Marketing Site element, but at some point you will need to grab other elements as well. The top code is AngularJS and how I am currently grabbing the text. Thanks in advance.
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>
source to share
Can you edit the HTML you are testing? If so, it would be very helpful to add the tag to the Marketing Marketing span. Let's say you add name = "marketingVenue" then you can do something like this:
// 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());
If you can't edit HTML, you can still use the code above, but with a longer, more fragile css selector.
To clear the multiple element warning, you must get all elements: select.first or .get (x) defined in the array.
// 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
You can also use this function to grab ONLY the visible element (s), assuming your html has some hidden and some visible.
// 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);
For your particular selector, if you don't have access to edit the html, you are probably looking at changing the selector if the page itself has any changes, since selector groups are really fragile. Now your selector might look something like this:
var marketingVenue = $$('.property-group').get(0).$('span');
source to share