Protractor Chained Elements by Using Variables?

Question

I am trying to keep my pageObjects in Protractor as clean as possible, but have run up against some behavior in selecting sub-elements.

This works:

v         


        

Answer 1

I wanted to mention that using 5.2.2 version this implementation is bit different. To get actual selector value you must use following code

let selector = child.locator().value

This is because locator returns an object which contains selector and other properties, but in this case, you only need selector. here is what is returned by method locator()

name(name) {
  return By.css('*[name="' + escapeCss(name) + '"]');
}
{ using: 'css selector', value: '.child-class' }

Here is how it should be implemented now.

var parent = element(by.css('.parent-class'));
var child = element(by.css('.child-class'));
parent.element(child.locator().value).getText();

//short hand
var parent = $('.parent-class');
var child = $('.child-class')

parent.$(child.locator().value).getText();