Issue in handling dropdown in protractor using typescript

Question

I am having issues in selecting dropdown in protractor

My Dom looks like this

This is the XPath to select the dropdown with value Yes

//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select//option[contains(text(),'Yes')]

The following is the way I am trying to select the drop down with the XPath above

First I created an XPath which retrieves the select block and stored in dropDownBlock as below

dropDownBlock = element(by.xpath('//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select'));

FamilysafeDropdown () {        
    selectDropdownByText(dropDownBlock, "yes");
}

I created a function which accepts the element finder and string and selects the value based on the string passed

public selectDropdownByText(dropdownElement: ElementFinder, text: string) {
    dropdownElement.click();
    dropdownElement.element(by.xpath('//option[contains(text(), "' + text + '")]')).click();
}

My problem here is the code is always finding the element with xpath

//option[contains(text(), "Yes")]" and there are multiple dropdowns in my DOM with this XPath.

so I wanted to select value with XPath

//label[contains(text(),"is your family safe?")]//parent::app-control-header//following-sibling::select//option[contains(text(),'Yes')]

I don't understand the problem here, can someone point me in the right way.

Could you clarify that there are multiple answers containing the value 'yes' in the dropdown? I believe that is what you are saying? — DublinDev
– DublinDev, Commented Jan 29, 2019 at 22:36

yong · Accepted Answer · 2019-01-30 01:50:52Z

1

The issue comes from the xpath used in following code line:

dropdownElement.element(by.xpath('//option[contains(text(), "' + text + '")]')).click();

You should use .//option[contains(text(), "' + text + '")], the prefix . at here means search HTML element start from dropdownElement.

Without the ., it means search HTML element start from the beginning of the HTML page.

In XPath, . represents current node.

answered Jan 30, 2019 at 1:50

yong

13.8k1 gold badge19 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Issue in handling dropdown in protractor using typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related