javascript - 使用 typescript 处理 Protractor 下拉列表的问题

Question

我在选择 Protractor 中的下拉菜单时遇到问题

我的 Dom 看起来像这样

这是选择值为 Yes 的下拉列表的 XPath

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

以下是我尝试使用上面的 XPath 选择下拉列表的方式

首先，我创建了一个 XPath，它检索选择 block 并存储在 dropDownBlock 中，如下所示

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

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

我创建了一个接受元素查找器和字符串并根据传递的字符串选择值的函数

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

我的问题是代码总是用 xpath 找到元素

//option[contains(text(), "Yes")]" 并且在我的 DOM 中有多个使用此 XPath 的下拉菜单。

所以我想用 XPath 选择值

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

我不明白这里的问题，谁能指出我正确的方法。

Answer 1

问题来自以下代码行中使用的 xpath:

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

你应该使用.//option[contains(text(), "' + text + '")]，这里的前缀.表示搜索HTML元素从 dropdownElement 开始。

如果没有.，表示从HTML页面的开头开始搜索HTML元素。

在XPath中，.代表当前节点。