How can I locate the navigation element by text?

Question

<li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>By Coordinator &amp; Salesman</span>
        <!--bindings={}-->
      </a>
    </li>
<li class="nav-item" ng-reflect-ng-class="nav-item,">
      <a class="nav-link" href="javascript:void(0);">
        <span>By Branch</span>
        <!--bindings={}-->
      </a>
</li>
<li class="nav-item active" ng-reflect-ng-class="nav-item,">
      <a class="nav-link active" href="javascript:void(0);">
        <span>Selling Branches</span>
        <!--bindings={}-->
      </a>
</li> 

For the above code i need to click on the span items:

• click on 'Selling branch' and verify data is loaded and any error
• click on 'By Branches' and verify data is loaded without any error.

What is the best approach to write locator using protractor/js?

Answer 1

Choosing the best, most reliable and readable locator is not always straightforward. Here, I would rely on the nav-* classes and use the by.cssContainingText strategy:

var sellingBranches = element(by.cssContainingText(".nav-item a.nav-link > span", "Selling Branches"));
sellingBranches.click();

var byBranch = element(by.cssContainingText(".nav-item a.nav-link > span", "By Branch"));
byBranch.click();

Note that, for better reusability and to follow the DRY principle, it would probably be a good idea to define a function (or a "Page Object" method if following the concept) to select a navigation menu item.

Answer 2

You can search by list (1) item position or its text (2); depend on your context, should the most stable.

1 -

li:nth-of-type(3) span

2 -

li span:contains('Selling Branches')

If you use jQuery, you would locate a element as in

$("li:nth-of-type(3) span")

Answer 3

Try to use findElements method by using tagName as span:

List<WebElement> l = obj.findElements(By.tagName("span"));

get your elements and take what you want.