How can I access a child element within an element using Protractor?

Question

How can I access a child element within an element using Protractor?

I'm struggling to access the child element of an ng-repeat element.

After searching for solutions, I came across suggestions that didn't work for me. One tip was to try something like this:

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

However, when I attempt to use the child line, I can't seem to find the element function on the parent element.

http://example.com

If you look at the provided screenshot, you'll see the structure of the page code I'm trying to test.

My goal is to retrieve the alt attribute of the avatar image and extract its value (which is the Username of the User).

One possible solution I thought of is using .getInnerHTML() on the ng-repeat row to get a string containing all the code. From there, I could locate the alt attribute and its value through string manipulation, but this approach seems too brute-force, and I believe there must be a better method.

In simple terms, what I aim to do is to fetch row 4 from the repeater and obtain the Username of the user in row 4. That's essentially my objective here.

javascript angularjs selenium typescript protractor

Answer 1

Answer №1

Give this a shot:

let container = element(by.repeater('f in feed'));
let item = container.all(by.xpath('//img[@alt="Pundeep"]')).first()

(or)

let container = element(by.repeater('f in feed'));
let item = container.all(by.xpath('//img[@alt="Pundeep"]')).get(0)

Answer 2

Give this a shot:

let container = element(by.repeater('f in feed'));
let item = container.all(by.xpath('//img[@alt="Pundeep"]')).first()

(or)

let container = element(by.repeater('f in feed'));
let item = container.all(by.xpath('//img[@alt="Pundeep"]')).get(0)

Answer 3

Answer №2

To retrieve the desired element in protractor, you can make use of both element.all() and get() locators. Follow these steps to achieve this:

var selectedElement = element.all(by.repeater('parent_locator')).get(3); // Retrieves the 4th element in the repeater. Remember that indexing starts from 0.
selectedElement.getAttribute('alt').then(function(attribute){
    var value = attribute; // The variable 'value' now stores the alt text
});

I hope you find this explanation helpful.

Answer 4

To retrieve the desired element in protractor, you can make use of both element.all() and get() locators. Follow these steps to achieve this:

var selectedElement = element.all(by.repeater('parent_locator')).get(3); // Retrieves the 4th element in the repeater. Remember that indexing starts from 0.
selectedElement.getAttribute('alt').then(function(attribute){
    var value = attribute; // The variable 'value' now stores the alt text
});

I hope you find this explanation helpful.

Answer 5

Answer №3

When referring to Protractor element documentation, an example is provided for finding child elements by chaining element find calls:

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

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

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

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

// Chaining 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.$

Answer 6

When referring to Protractor element documentation, an example is provided for finding child elements by chaining element find calls:

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

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

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

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

// Chaining 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.$

Answer 7

Answer №4

This illustration provides guidance:

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

The nth-child() selector enables you to target a specific child element. In this scenario, I utilized a plugin containing two selects with identical classes where I needed to interact with a particular option in the first select and another option in the second select.

Answer 8

This illustration provides guidance:

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

The nth-child() selector enables you to target a specific child element. In this scenario, I utilized a plugin containing two selects with identical classes where I needed to interact with a particular option in the first select and another option in the second select.

How can I access a child element within an element using Protractor?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting Issue with Ionic's UI Router

Tips for creating a login page with AngularJS

What methods can I use to emphasize three distinct dates?

Creating a new component when a click event occurs in React

Utilize a Chrome extension to emphasize text within a contenteditable element by underlining it

Is there a more efficient method for translating arrays between JavaScript and PHP?

Is it possible to incorporate some scripting to enhance the efficiency of deploying my mongoose database?

Mastering the integration of bootstrap datepicker - jquery plugin within AngularJS

Issue with activating a Modal through a button inside a table row on React

Warning in Closure compiler: [JSC_POSSIBLE_INEXISTENT_PROPERTY] The property TextEncoder may not be defined on this object

Different ways to resize an image in various sizes without relying on PHP thumb

When running locally, the Web API functions as expected. However, once published, it

Struggling to extract feedback with Selenium in Python

The clone() function in jQuery causes the properties of the original element to become distorted

General procedure: identifying the specific input element triggering the keypress event, without directly specifying the ID or other identifiers

What causes the discrepancy in the output values of the sha1 algorithm when using the packages object-hash and crypto/hashlib

Loading a different webpage seamlessly without having to reload the current one

organizing data using backbone marionette router

What is preventing me from getting this straightforward CSS transition to function properly?

Ways to stop a form input value from disappearing when clicking on other fields?