Locating second, third, fourth,...eigth element in protractor using css locator

Question

I have been testing using protractor and no way to refer the element except via css because it only do have class attribute given. The problem is there are more than 7 elements having this class name. Thus I use the syntax

element.all(by.css('h4.ng-binding')).first(); 

for the first one and it works fine but for the others it doesn't work! I use the same logic that I used also for the first one. Here is my snippets code for the others to locate them.

  element.all(by.css('h4.ng-binding')).second();
  element.all(by.css('h4.ng-binding')).third();
  element.all(by.css('h4.ng-binding')).fourth();
  element.all(by.css('h4.ng-binding')).fifth();
  element.all(by.css('h4.ng-binding')).sixth();
  element.all(by.css('h4.ng-binding')).seventh();
  element.all(by.css('h4.ng-binding')).eighth();

Answer 1

There are no functions of those kind in protractor. Only available functions are first(), last() and get(). You can implement everything using these 3 functions on top of the ElementArrayFinder. Here's how -

element.all(by.css('h4.ng-binding')).first(); //get the first element
element.all(by.css('h4.ng-binding')).get(0); //get the first element as get() function is a '0' based index
element.all(by.css('h4.ng-binding')).get(1); //get the second element
element.all(by.css('h4.ng-binding')).get(2); //get the third element
element.all(by.css('h4.ng-binding')).last(); //get the last element

Hope it helps.