Question

我在下拉列表中定位元素时遇到问题。尝试使用chrome中的开发人员工具识别它，导致在单击下拉菜单时禁用了本地化工具。 html看起来像这样：

<select ng-model="relation.rolle" name="relationType" required="" 
  class="uniform form-control ng-touched ng-dirty ng-valid-parse ng-invalid 
  ng-invalid-required" ng-class="::formControlClass()" ng- 
  options="relationType.name as relationType.label for relationType in 
  relationTypes">
  <option value="" class="ng-binding">Velg...</option>
  <option value="0" label="Samboer">Samboer</option>
  <option value="1" label="Ektefelle">Ektefelle</option>
  <option value="2" label="Foresatt">Foresatt</option>
</select>

有关如何选择“ Samboer”的任何提示？

Answer 1

Bharath发布的示例很简单并且可以正常工作。您只需要确保先单击选择菜单即可。否则，您将收到未找到元素错误或不可点击错误。您必须先打开菜单，然后才能单击option。

我的示例有点复杂，但是这是我通常处理下拉菜单的方式。我创建了一个通用功能，该功能可用于任何选择菜单。您所要做的就是传递菜单元素和所需的文本。我这样做是因为我正在处理的应用程序具有很多下拉菜单。这样，我不必为菜单中的每个选项创建变量。其中一些菜单有很多选项，为每个菜单创建一个变量会很麻烦。

public async selectDropdownOption(dropdown: ElementFinder, optionText: string): Promise<void> {
    await dropdown.click(); // open the menu

    const relevantOption = await dropdown.all(by.tagName('option'))
        .filter((element: ElementFinder) => {
            return element.getText().then((text: string) => {
                return text === optionText;
            });
        })
        .first();

    await relevantOption.click();
}

在您的情况下，我会这样称呼：

const menu = element(by.name('relationType'));
selectDropdownOption(menu, 'Samboer');

Answer 2

希望这应该起作用。我这样使用。

element(by.cssContainingText('option', 'Samboer')).click();

（或）

element(by.model('relation.rolle')).$('[value="Samboer"]').click();

您选择下拉菜单并选择其值。

在这里，我已经链接了下拉菜单的元素定位器，然后选择了该选项。

第一个示例更为通用，第二个示例针对下拉菜单更具体。

量角器在下拉菜单中选择元素

2 个答案: