Protractor - Finding elements by any attribute

Question

<ul class="menu">
    <li ui-sref-active="active">
        <a class="ng-scope" translate="menu.home" href="#/home">Home</a>
    </li>
    <li ui-sref-active="active">
        <a class="ng-scope" ui-sref="customer.list" translate="menu.customers" href="#/customers">Customers</a>
    </li>
</ul>

I want to search for the element using the text "Home" as in code below:

element(by.linkText("Home")).click();

But I need use too any other available attribute, in this case translate, to make it more accurate.

Is there any possibility in doing that? I've seen things like this

by.css(".ng-scope input[translate='menu.customers']"); 

But it does not seem to work.

Answer 1

by.css(".ng-scope input[translate='menu.customers']");

This basically translates to: give me the input element having menu.customers translate attribute value, somewhere inside the parent element having ng-scope class. This is not working since there is no parent element with ng-scope class in the HTML you've provided and it is a instead of input you are looking for.

Instead, you probably meant to:

a.ng-scope[translate='menu.customers']

Though, I would not recommend relying on the quite broad ng-scope class.

---

Here are several rather precise CSS selectors, given the HTML you've provided:

ul.menu > li > a[href*=home]  // href contains "home"
ul.menu > li > a[href$=home]  // href ends with "home"
ul.menu > li > a[translate="menu.home"]  // translate equals to "menu.home"
ul.menu > li > a[translate$=home]  // translate contains "home"