Combining Protractor locators

Question

What should I do if I want to find a repeater that also has a specific class? Or if I want to find a binding containing text?

What if I wanted to find an element by repeater OR CSS selector (matching elements that have a specific repeater expression OR, eg a specific class / attribute)?

This is a very general question. I'm not exactly interested in those specific cases, but in a general way to combine those locators.

Protractor allows locators to be chained (ie: element(by.this(...)).element(by.that(...)) ), but that will look for child elements instead. I want to do something similar, but filter elements using more than one locator, or find elements that match any of n locators.

Is this currently possible? Would such a feature be undesirable or hard to implement for some reason?

Filtering example:

// Template:
<li ng-repeat="fruit in fruits">...</li>

// Locator:
var evenFruitElements = element.all(by.repeater("fruit in fruits")).filter(by.css(":nth-child(even)"));

OR example:

// Template:
<span class="something-interesting">...</span>
<span class="something-else-similarly-interesting">...</span>

// Locator:
var interestingElements = element.all(by.css(".something-interesting"), by.css(".something-else-similarly-interesting"));

Answer 1

1. There is an API for adding custom locators: http://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.addLocator

    // Add the custom locator. by.addLocator('buttonTextSimple', function(buttonText, opt_parentElement, opt_rootSelector) { // This function will be serialized as a string and will execute in the // browser. The first argument is the text for the button. The second // argument is the parent element, if any. var using = opt_parentElement, buttons = using.querySelectorAll('button'); // Return an array of buttons with the text. return Array.prototype.filter.call(buttons, function(button) { return button.textContent === buttonText; }); // Use the custom locator. element(by.buttonTextSimple('Go!')).click(); 

2. CSS selectors can do wonders sometimes:

    var interestingElements = element.all(by.css(".something-interesting"), by.css(".something-else-similarly-interesting")); 

   can be actually implemented(as found here: https://stackoverflow.com/a/2144801 ):

    element.all(by.css(".something-interesting,.something-else-similarly-interesting"))