How to get an element it's index in PROTRACTOR

Question

It's my first question here and I've been trying to use Protractor to do end to end test. I need to get the first element from this group of code. As you can see, I have the same class and the same sub-class for these 3 element. So I thought to get it by using the index.

    <div class="col-md-4">
          <div class="form-group">
            <label>Número</label>
            <input class="form-control ng-valid ng-touched ng-dirty" type="number">
          </div>
        </div>
<div class="form-group">
        <label>Inicio Vigência</label>
        <input class="form-control ng-untouched ng-pristine ng-valid" placeholder="dd/MM/yyyy" type="date" value="">
      </div>
<div class="form-group">
        <label>Fim Vigência</label>
        <input class="form-control ng-untouched ng-pristine ng-valid" placeholder="dd/MM/yyyy" type="date" value="">
      </div>

I've trying:

var numero = element.all(by.className('form-group')).get(2).all(by.tagName('input'));
        numero.sendKeys(aux2);

But it's not working. Protractor doesn't sentkeys in the input.

Answer 1

Well, if you need the first element, just use .first() instead of .get(2) :

var numero = element.all(by.className('form-group')).first().all(by.tagName('input'));
numero.sendKeys(aux2);

Note that you can locate the desired input element in one go with a CSS selector and the first-of-type pseudo-class :

var numero = $(".form-group:first-of-type input");
numero.sendKeys(aux2);

Or, via nth-of-type() :

var numero = $(".form-group:nth-of-type(1) input");
numero.sendKeys(aux2);

$ here is a convenient shortcut to element(by.css()) .

---

Another way to approach this problem would be not to rely on the form group indexes (which actually sounds fragile - imagine the UI would change and the form controls would simply be re-arranged) and, instead, locate the input element based on it's label:

var numero = element(by.xpath("//label[. = 'Número']/following-sibling::input"));
numero.sendKeys(aux2);