Protractor AngularJS CSS selector finding multiple elements

Are you able to edit the HTML you are testing? If so, it would be very useful to add a tag into the Marketing Venue span. Say you add name="marketingVenue", then you could 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 cannot edit the HTML, you can still use the code above, but with a longer, more fragile css selector.

For clearing the warning of multiple elements, youve got to get all of the elements are select .first or .get(x) a specific one 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 specific selector, if you do not have access to edit the html, you are probably looking at changing the selector if the page itself has any changes, as div selectors are really fragile. Your selector right now may be something like:

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