user10251019
user10251019

Reputation:

Issue in handling dropdown in protractor using typescript

I am having issues in selecting dropdown in protractor

My Dom looks like this

Dropdown Dom

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.

Upvotes: 1

Views: 96

Answers (1)

yong
yong

Reputation: 13722

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.

Upvotes: 1

Related Questions