Protractor - get child element of an element?

Question

I am trying to access child element of an ng-repeat element but I am having troubles doing that.

I have searched around about the problem and the solutions that I have found did not work for me. One of those solutions was to do something like this:

var parent = element(by.repeater(''));
var child = parent.element(by.....);

When I try the child line I cant see the element function on the parent element..

http://prikachi.com/images/11/8338011u.png

If you see the screenshot above you will see the structure of the code of the page that I am trying to test.

I need to access the alt attribute of the image of the avatar and get its value (thats the Username of the User).

One thing that came to my mind is to use .getInnerHTML() on the ng-repeat row which will return a string with all that code. From there I can find the alt attribute and its value with string manipulation but this seems too brute and I am sure that there has to be a better way.

Simply I want to be able to get row 4 from the repeater and get the Username of the user at row 4, that's all I wanna do actually.

Solution 1

You can get it directly using element.all() and get() locator in protractor. Here's how -

var child = element.all(by.repeater('parent_locator')).get(3); //gets 4th element in repeater. Its a 0 based index.
child.getAttribute('alt').then(function(user){
    var username = user; //username contains the alt text
});

Hope this helps.

Solution 2

In Protractor element documentation it gives an example like this to find child elements, which is same as chaining element find:

// Chain 2 element calls.
let child = element(by.css('.parent')).
    $('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = element(by.css('.parent')).
    $('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567');

// Or using the shortcut $() notation instead of element(by.css()):

// Chain 2 element calls.
let child = $('.parent').$('.child');
expect(child.getText()).toBe('Child text\n555-123-4567');

// Chain 3 element calls.
let triple = $('.parent').$('.child').
    element(by.binding('person.phone'));
expect(triple.getText()).toBe('555-123-4567'); 

https://www.protractortest.org/#/api?view=ElementFinder.prototype.$

Solution 3

this example could help :

return element(by.css('select.custom-select:nth-child(1) option[value="12"]'));

you can use nth-child() selector to access to a child element. In my example i used a plugin with 2 select with same classes and i wanted to click on a defined option in the select 1, and a second in the select 2.

Comments

[Luca Kiebel]

While this code snippet may solve the problem, it doesn't explain why or how it answers the question. Please include an explanation for your code, as that really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion.