Locate an element by uib-tooltip in protractor?

Question

I'm having issues locating 'events' on our platform. Each time an event is created, a div card is added to the page at the end of the events. Ideally I'd like to run tests in parallel so picking up the event based on location would be difficult depending on the timing. The tooltip will change based off of the name each time.

<div class="caption__name ng-binding" uib-tooltip="Name Here">Name Here</div>

Edit - additional clickable code:

<div class="card__caption" ng-click="goToEvent(event)"><!--<div class="card__caption" ui-sref="backend.parent.event.builder.update({id: event.id})">--><div class="caption__name ng-binding" uib-tooltip="Basic Automation without companion">Basic Automation without companion</div><!-- ngIf: event.location.venue --><div class="caption__location ng-binding ng-scope" uib-tooltip="House of Blues" ng-if="event.location.venue">House of Blues</div><!-- end ngIf: event.location.venue --><!-- ngIf: !event.location.venue --><div class="caption__date ng-binding">Jul 25th 2017 - Jul 27th 2017</div></div>

Answer 1

Locating an element by the value of an attribute is usually pretty straightforward to do with a CSS selector locator:

$('[uib-tooltip="Name Here"]').getText();

Or, if you are only interested in last element with the uib-tooltip, you can do:

$$("[uib-tooltip]").last().getText();

Note that if you want to make things more organized and modular and, if you are going to locate elements by the uib-tooltip more, it might be a good idea to make a custom locator out of it.

That said, this answers the question in this specific scope only - seeing the complete HTML source of the page might help to generate more or/and better options.

Answer 2

If caption__name is unique:

div.caption__name

If there are more than one then either scope under a stable element or use last-child(css) or .last(xpath) to pick out the last, something like

div.caption__name:last-child

but that may not work and I think I still would want to see if there is a parent element around this set of divs for this card, and if that element has an attribute I can use and target with last-child, if so I would then be able to use something more like

div.card:last_child div.caption__name

You say the row is added dynamically but is last, at the end, so last-child if suitable for that.