Protractor: How do I click on an element using the href substring or span substring?

Question

The following lines is information of the element I want to be able to click on using protractor.

    <hsx-nav-menu-group hsx-html-element> == $0
      <hsx-nav-menu-info>
        <i hsx-html-element hsx-icon>
          <svg>
            <use xlink:href="#icon-so"></use>
          </svg>
        </i>
        <span>Service Orders</span>
      </hsx-nav-menu-info>
    </div>

I have been able to click on it via the xpath but I wanted to locate and click the element preferably with the href substring or the span subtring.

Answer 1

I wanted to locate and click the element preferably with the href substring or the span subtring

Let's use the Service Orders text to create a locator:

element(by.xpath("//hsx-nav-menu-info[span = 'Service Orders']"));

This is still an XPath expression though.

---

Alternatively, you can use filter():

$$("hsx-nav-menu-info").filter(function (useElm) {
    return useElm.$("use").getAttribute("xlink:href").then(function (href) {
        return href === "#icon-so";
    });
}).first().click();