Protractor: custom locators

Question

I have this code:

  by.addLocator('Name',
  function(spanText, opt_parentElement) {
    var using = opt_parentElement || document;
    var td = using.querySelectorAll('td');
      return Array.prototype.filter.call(td, function(teg) {
        return teg.getAttribute("Name") === spanText;
      });
  });

It's a simple method to search by attribute "Name". But it isn't universal, because it search element with tag td. How I can make it independent of marking?

Answer 1

You can add any number of arguments to your locator, so after spanText you can include for example tagName. You can go further and not put yourself in boundaries of using tag-only argument, but any selector which will be supported by querySelectorAll():

by.addLocator('Name', function (spanText, selector, opt_parentElement) {
    var using = opt_parentElement || document;
    var els = using.querySelectorAll(selector);
    return Array.prototype.filter.call(els, function (el) {
        return el.getAttribute('Name') === spanText;
    });
});

Usage:

// find all span on the page with Name="Alice"
element(by.Name('Alice', 'span'))

// find all .row within #container with Name="Bob"
element(by.Name('Bob', '#container .row'));