Get value from element of type <a>

Question

So this is the HTML

<ul class="has-status sub-menu">
  <!-- ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope saved">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.general-info" translate="procurement.menu.item.generalInfo" href="#/procurement/382125/general-info">additional data</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope saved">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.procurers" translate="procurement.menu.item.procurers" href="#/procurement/382125/procurers">Hankijad</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope saved">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.additional-data" translate="procurement.menu.item.additionalData" href="#/procurement/382125/additional-data">Hanke lisaandmed</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope unsaved" style="">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.procurement-passport" translate="procurement.menu.item.procurementPassport" href="#/procurement/382125/procurement-passport">Additional other data</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope unsaved">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.qualification-conditions" translate="procurement.menu.item.qualificationConditions" href="#/procurement/382125/qualification-conditions">Vastavustingimused</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope saved active">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.evaluation" translate="procurement.menu.item.evaluation" href="#/procurement/382125/evaluation">Criteriad</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope unsaved" style="">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.notices" translate="procurement.menu.item.notices" href="#/procurement/382125/notices">Something</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
  <li ng-repeat="subItem in item.subMenuItems track by subItem.name" ui-sref-active="active" ng-class="{'saved': subItem.hasStatus &amp;&amp; subItem.isValid, 'unsaved': subItem.hasStatus &amp;&amp; !subItem.isValid}" class="ng-scope saved">
    <a class="sub-menu-item ng-scope" tabindex="" ui-sref="procurement.details.documents({group: 'B'})" translate="procurement.menu.item.documents" href="#/procurement/382125/documents?group=B">documents</a>
  </li>
  <!-- end ngRepeat: subItem in item.subMenuItems track by subItem.name -->
</ul>

As you can see there are multiple submenu items containing an a element, I've tried the following.

element.all(by.tagName('a')).get(1).click();
element(by.css('.submenu-item a')).get(1).click();

But I'm using typescript and that causes an error. Is there a good xpath I could use to either get element by its order number, or by its value?

Answer 1

You can use an xPath like the following to get items based on their order number:

//ul/li[position() = 3]/a

in this specific example the order number is 3 and the returned element is the one with Hanke lisaandmed value.

You can build this xPath with any order number you want, dynamically.

---

Or, if you want to get elements based on value, you can use an xPath like this one:

//ul/li/a[text()='Hanke lisaandmed']

This expression should return the same element like the one with the order number.