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

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?


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"));

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

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.


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")

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.